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

Question

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

Answer 1

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

在 onPointerDown 方法中将 bobril b.registerMouseOwner 与您的上下文一起使用。

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