[英]Fabric JS using mouse:over on an animating object
I can animate an object and then add a mouse:over
event.我可以为一个对象设置动画,然后添加一个
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>
However the mouse:over
event continues to fire from the rectangle's original position.但是
mouse:over
事件继续从矩形的原始位置触发。 Once the animate finishes then the mouse:over
event works again over the animated object.动画完成后,
mouse:over
事件将再次作用于动画对象。
Is it possible to have a mouse:over
event fire while an object is moving/animating?是否可以在对象移动/动画时触发
mouse:over
事件?
I wasn't able to figure out a built-in way.我无法找出内置方式。 You might want to submit this as an issue.
您可能希望将此作为问题提交。 In the meantime, I think I have a usable workaround:
与此同时,我想我有一个可用的解决方法:
// 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>
Essentially, I listen for mouse:move
.本质上,我听
mouse:move
。 On each mouse move, I get the cursor coordinates and check to see if it's inside the shape.每次鼠标移动时,我都会获取光标坐标并检查它是否在形状内。
Right now, it's hard-coded to only work on Rect
s, but perhaps you could introduce a function like isInside(object, pos)
which returns a boolean
, and in there you can check what type object
is and decide based on that.现在,它被硬编码为仅适用于
Rect
,但也许您可以引入一个类似isInside(object, pos)
的函数isInside(object, pos)
它返回一个boolean
,在那里您可以检查object
是什么类型并基于此做出决定。
i realise this topic is very old, but i've just run into the same issue.我意识到这个话题很老了,但我刚刚遇到了同样的问题。
after a bit of fiddling, it turned out that calling setCoords()
after the object has moved will update the internal state so that mouseover
works again correctly.经过一番折腾,结果发现在对象移动后调用
setCoords()
将更新内部状态,以便mouseover
再次正常工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.