Question

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

Answer 1

onPointerDown，onPointerMove和onPointerUp组件生命周期方法（bobril/index.ts IBobrilComponent中的更多信息）正是您所需要的，但代码更多一点

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

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。创建组件的节点时，可以通过输入数据注册此处理程序。

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

1 个答案: