Fabric JS：アニメーションオブジェクト上のマウスを使用

Question

オブジェクトをアニメーション化してからmouse:overイベントを追加できます。 mouse:overイベントは、矩形の元の位置から発射し続けただし

var canvas = new fabric.Canvas('c'); 
 
var x1 = 5; 
 
var y1 = 5; 
 
var x2 = 100; 
 
var y2 = 100; 
 

 
var rect = new fabric.Rect({ 
 
    width: 10, 
 
    height: 10, 
 
    left: x1, 
 
    top: y1, 
 
    stroke: '#000', 
 
    strokeWidth: 2, 
 
    fill: '#faa', 
 
    selectable: false 
 
}); 
 
canvas.add(rect); 
 

 
rect.animate({ 
 
    'left': x2, 
 
    'top': y2 
 
}, { 
 
    duration: 10000, 
 
    onChange: canvas.renderAll.bind(canvas), 
 
    onComplete: function() { 
 
    } 
 
}); 
 

 
canvas.on('mouse:over', function (e) { 
 
    console.log('mouseover'); 
 
});

<canvas id="c"></canvas> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.3/fabric.min.js"></script>

。アニメーションが終了すると、アニメーションオブジェクトに対してmouse:overイベントが再度作用します。

オブジェクトが移動/アニメーション中にmouse:overイベントを起動することはできますか？

Answer 1

私は組み込みの方法を理解することができませんでした。これを問題として提出するとよいでしょう。一方で、私は私が使用可能な回避策があると思う：

// Setup 
 

 
var canvas = new fabric.Canvas('c'); 
 
var x1 = 5; 
 
var y1 = 5; 
 
var x2 = 100; 
 
var y2 = 100; 
 
var rectWidth = 10; 
 
var rectHeight = 10; 
 

 
var rect = new fabric.Rect({ 
 
    width: rectWidth, 
 
    height: rectHeight, 
 
    left: x1, 
 
    top: y1, 
 
    stroke: '#000', 
 
    strokeWidth: 2, 
 
    fill: '#faa', 
 
    selectable: false 
 
}); 
 
canvas.add(rect); 
 

 
rect.animate({ 
 
    'left': x2, 
 
    'top': y2 
 
}, { 
 
    duration: 10000, 
 
    onChange: canvas.renderAll.bind(canvas), 
 
    onComplete: function() { 
 
    } 
 
}); 
 

 
// http://stackoverflow.com/questions/17130395/real-mouse-position-in-canvas 
 
function getMousePos(canvas, evt) { 
 
    var rect = canvas.getBoundingClientRect(), // abs. size of element 
 
     scaleX = canvas.width/rect.width, // relationship bitmap vs. element for X 
 
     scaleY = canvas.height/rect.height; // relationship bitmap vs. element for Y 
 

 
    return { 
 
    x: (evt.clientX - rect.left) * scaleX, // scale mouse coordinates after they have 
 
    y: (evt.clientY - rect.top) * scaleY  // been adjusted to be relative to element 
 
    } 
 
} 
 

 
// The important stuff 
 

 
canvas.on('mouse:move', function (o) { 
 
    var pos = getMousePos(canvas.getElement(), o.e); 
 
    // Do math to figure out if the mouse move was inside the the object. For a Rect: 
 
    if (
 
    pos.x >= rect.left && 
 
    pos.x <= rect.left + rectWidth && 
 
    pos.y >= rect.top && 
 
    pos.y <= rect.top + rectHeight 
 
) { 
 
    console.log('mouseover'); 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.3/fabric.min.js"></script> 
 
<canvas id="c"></canvas>

は基本的に、私はmouse:moveを聞きます。マウスを動かすたびに、カーソル座標を取得し、形状の中にあるかどうかを確認します。

は今のところ、それはRectの上だけの仕事にハードコーディングされたのですが、おそらくあなたはbooleanを返すisInside(object, pos)のような機能を導入でき、そしてそこに、あなたは何であるかのタイプobject確認することができ、それに基づいて決定します。