bobrilフレームワークでSVG要素を移動する方法

Question

ボブリルにSVG要素（円）をマウスで移動したいと思います。どのライフサイクルコンポーネントメソッドを使用する必要がありますか？ onPointerDownなどを使用しようとしましたが、これらのメソッドは円内のイベントのみを処理します。私はドラッグアンドドロップを使うべきですか、SVG全体を円で動かすための他のオプションがありますか？

Answer 1

onPointerDown、onPointerMoveとonPointerUpコンポーネントのライフサイクルメソッド（bobril/index.tsIBobrilComponentでより多くの情報）あなたがたがもう少しコードで必要な正確に何です。

方法であなたの文脈で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と〜onMoveハンドラを提供することができます。このハンドラは、コンポーネントのノードを作成するときに入力データによって登録できます。