如何使用bobril框架移动SVG元素

Question

我想在bobril中用鼠标移动一个SVG元素(圆圈).我应该使用哪种生命周期组件方法？我尝试使用onPointerDown等等,但这些方法只处理圆圈内的事件.我应该使用拖放还是有其他选项来围绕整个SVG移动圆圈？

Answer 1

的onPointerDown,onPointerMove和onPointerUp组件生命周期方法(在更多信息bobril/index.ts IBobrilComponent)是你所需要的东西,但用多一点的代码.

b.registerMouseOwner在onPointerDown方法中使用bobril 和您的上下文.

onPointerDown(ctx: ICtx, event: b.IBobrilPointerEvent) {
    b.registerMouseOwner(ctx);

    // Store the initial coordinates
    ctx.lastX = event.x;
    ctx.lastY = event.y;
    return true;
},

然后你的组件可以处理onPointerMove方法中的鼠标移动,甚至移动到元素之外.您只需要确定您仍然是当前的所有者.所以你的方法看起来像这样:

onPointerMove(ctx: ICtx, event: b.IBobrilPointerEvent) {
    if (!b.isMouseOwner(ctx))
        return false;

    if (ctx.lastX === event.x && ctx.lastY === event.y)
        return false;

    // Call handler if it is registered
    if (ctx.data.onMove) {
        ctx.data.onMove(event.x - ctx.lastX, event.y - ctx.lastY);
    }

    // Update coordinates 
    ctx.lastX = event.x;
    ctx.lastY = event.y;

    return true;
},

不要忘记发布您的注册.

onPointerUp(ctx: ICtx, event: b.IBobrilPointerEvent) {
    b.releaseMouseOwner();
    return true;
}

上面的示例将最后一个指针坐标存储到组件上下文中ICtx.然后,它可以被用来提供deltaX和deltaY对onMove处理程序.创建组件的节点时,可以通过输入数据注册此处理程序.