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

Question

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

Answer 1

的onPointerDown，onPointerMove和onPointerUp组件生命周期方法（在bobril/index.tsIBobrilComponent详细信息）是您需要的东西，但用多一点的代码。

使用bobril b.registerMouseOwner与您的上下文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处理程序。当您创建组件的节点时，可以通过输入数据注册该处理程序。