[英]Fabric JS Strange problem when handling mouse move over line object
[英]Fabric JS using mouse:over on an animating object
我可以为一个对象设置动画,然后添加一个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
事件?
我无法找出内置方式。 您可能希望将此作为问题提交。 与此同时,我想我有一个可用的解决方法:
// 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(), oe); // 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
,但也许您可以引入一个类似isInside(object, pos)
的函数isInside(object, pos)
它返回一个boolean
,在那里您可以检查object
是什么类型并基于此做出决定。
我意识到这个话题很老了,但我刚刚遇到了同样的问题。
经过一番折腾,结果发现在对象移动后调用setCoords()
将更新内部状态,以便mouseover
再次正常工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.