Jak przenieść element SVG z ramą bobrilu

Question

Chcę przenieść element SVG (kółko) za pomocą myszy w bobrilu. Z jakiej metody komponentu cyklu życia powinienem korzystać? Próbowałem użyć onPointerDown i tak dalej, ale te metody obsługują tylko zdarzenia wewnątrz kręgu. Czy powinienem używać przeciągania i upuszczania, czy jest jakaś inna opcja poruszania kółkiem wokół całego SVG?

Answer 1

W onPointerDown, onPointerMove i onPointerUp metody cyklu życia składnika (więcej informacji w bobril/index.tsIBobrilComponent) są dokładnie to, co trzeba, ale z trochę więcej kodu.

Użyj bobrilu b.registerMouseOwner z kontekstem w metodzie onPointerDown.

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

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

Następnie komponent może obsługiwać ruch myszy w onPointerMove metoda nawet przeniesienie na zewnątrz elementu. Musisz tylko upewnić się, że nadal jesteś aktualnym właścicielem. Twoja metoda może więc wyglądać np. tak:

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; 
}, 

Nie zapomnij wydać rejestracji.

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

Powyższy przykład przechowuje ostatnie współrzędne wskaźnika w kontekście komponentu ICtx. Następnie można go użyć do obsługi programu deltaX i deltaY do onMove. Ten moduł obsługi można zarejestrować za pomocą danych wejściowych podczas tworzenia węzła komponentu.