Fabric JS 마우스 사용 : 애니메이션 오브젝트 위의

Question

오브젝트를 애니메이션 한 다음 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 이벤트가 애니메이션 객체 위에서 다시 작동합니다.

개체가 움직이거나 애니메이션되는 동안 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이 어떤 종류의 확인하실 수 있습니다 그 기반으로 결정합니다.