Javascript 使用鼠标在动画对象上移动Fabric JS

我可以设置一个对象的动画，然后添加一个

mouse:over

事件

var canvas=newfabric.canvas（'c'）；
var-x1=5；
变量y1=5；
var x2=100；
变量y2=100；
var rect=new fabric.rect({
宽度：10，
身高：10，
左：x1，
顶部：y1，
笔划：“#000”，
冲程宽度：2，
填写：“#faa”，
可选：false
});
canvas.add（rect）；
矩形动画({
“左”：x2，
“顶部”：y2
}, {
持续时间：10000，
onChange:canvas.renderAll.bind（canvas），
onComplete:function（）{
}
});
canvas.on（'mouse:over'，函数（e）{
console.log（'mouseover'）；
});
我无法找到一种内置方式。您可能希望将此作为问题提交。同时，我认为我有一个可用的解决方法：


//设置
var canvas=newfabric.canvas（'c'）；
var-x1=5；
变量y1=5；
var x2=100；
变量y2=100；
宽度=10；
高度=10；
var rect=new fabric.rect({
宽度：矩形宽度，
高度：垂直高度，
左：x1，
顶部：y1，
笔划：“#000”，
冲程宽度：2，
填写：“#faa”，
可选：false
});
canvas.add（rect）；
矩形动画({
“左”：x2，
“顶部”：y2
}, {
持续时间：10000，
onChange:canvas.renderAll.bind（canvas），
onComplete:function（）{
}
});
// http://stackoverflow.com/questions/17130395/real-mouse-position-in-canvas
函数getMousePos（画布，evt）{
var rect=canvas.getBoundingClientRect（），//元素的abs.size
scaleX=canvas.width/rect.width，//位图与X元素的关系
scaleY=canvas.height/rect.height；//位图与Y元素的关系
返回{
x:（evt.clientX-rect.left）*scaleX，//在鼠标坐标变化后缩放鼠标坐标
y：（evt.clientY-rect.top）*scaleY//已调整为相对于元素
}
}
//重要的东西
canvas.on（'mouse:move'，函数（o）{
var pos=getMousePos（canvas.getElement（），o.e）；
//计算鼠标移动是否在对象内部。对于矩形：
如果(
位置x>=矩形左&&
位置x=矩形顶部&&
pos.y我意识到这个话题很古老，但我刚刚遇到了同样的问题

经过一点修改，结果是调用
setCoords（）
对象移动后，将更新内部状态，以便
mouseover
再次正常工作。
谢谢Frank。但是，哎哟，这可能会因为更多的对象而变得更密集？@JakeN很可能是这样。这是我能想到的最好的解决方法。希望其他人能提出更好的建议，或者他们会提出更好的建议'如果您报告问题，我们将作出响应。