javascript - KineticJS で円がちらつくのを防ぐ

Question

ユーザーがマウス カーソルをポリゴンの輪郭の上または近くに置くと、アンカーが表示され、マウスの位置をたどる必要がありますが、ポリゴンの輪郭にスナップします。

問題:mousemoveハンドラー関数がこのアンカーの位置を更新すると、アンカーがちらつくように見えます。ちらつきや更新の遅さの原因は何ですか? ここに示したKineticJS の例は、かなり迅速に更新されているようです。

また、アンカーはポリゴンのアウトライン/ストロークにスナップしていません。この効果はどのように達成できますか？

JSフィドル

Answer 1

あなたのmousemove関数はアンカーを動かしています。アンカーが移動すると、マウスが上になくなるpolyHitAreaため、mouseleaveイベントが発生してアンカーが非表示になります。

編集

これが起こらないようにするために私が考えることができる最良の方法は、setVisible(false)コードを呼び出しに配置し、呼び出しにイベントsetTimeoutを持たせることです。mouseentermouseoverAnchorclearTimeout

var polyHitArea._timeout = 0;

polyHitArea.on('mouseover', function(e) {
    clearTiemout(polyHitArea._timeout);
    mouseoverAnchor.setVisible(true);
    stage.draw();
});

polyHitArea.on('mouseleave', function(e) {
    clearTimeout(polyHitArea._timeout);
    polyHitArea._timeout = setTimeout(function(){
        mouseoverAnchor.setVisible(false);
    }, 25); // 25 ms enough time?
    stage.draw();
});

mouseoverAnchor.on('mouseenter', function(e) {
    clearTimeout(polyHitArea._timeout);
});