如何检测fabric js动画对象上的鼠标按下事件
Posted
技术标签:
【中文标题】如何检测fabric js动画对象上的鼠标按下事件【英文标题】:How to detect mouse down event on fabric js animated objects 【发布时间】:2017-06-20 11:24:05 【问题描述】:我在玩 Fabric.js,目的是检测动画对象上的鼠标按下事件。当前图像正在从下到上进行动画处理,当我按下鼠标时,它仅显示坐标但未检测到单击对象。
我还注意到,当图像开始动画时,我才能单击/选择它们,然后它们变得不可选择
这是一个jsfiddle 代码演示。请检查并提出建议。
我的 html 是:
<h3>Hello Fabric</h3>
<div class="mainCanvasContainer">
<canvas class="mainCanvas" id="mycanvas" ></canvas>
</div>
<div id='info'>
</div>
现在这是我的 javascript:
$(document).ready(function ()
var canvas_id = 'mycanvas';
function showInfo(text)
$('#info').append('<div> '+text+' </div>');
(function ()
var canvas = this.__canvas = new fabric.Canvas(canvas_id, selection: false);
fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center';
canvas.on('mouse:down', function (options)
if (options.target)
showInfo('an object was clicked! ', options.target.type);
var cor=options.e.clientX+','+ options.e.clientY;
showInfo(cor);
);
setInterval(function ()
fabric.Image.fromURL('http://www.rashflash.com/fabricjs_animation/img.png', function (img)
img.scale(0.2);
//img.set('left', fabric.util.getRandomInt(100, 400)).set('top', 450);
//img.movingLeft = !!Math.round(Math.random());
var text = new fabric.Text('hello',
fontSize: 30,
originX: 'center',
originY: 'center'
);
var group = new fabric.Group([img, text]);
group.set('left', fabric.util.getRandomInt(100, 400)).set('top', 420);
canvas.add(group);
);
, 1000);
(function animate()
canvas.forEachObject(function (obj)
if (!obj)
return;
// obj.left += (obj.movingLeft ? -1 : 1);
obj.top -= 1;
if (obj.left > 500 || obj.top < 0)
canvas.remove(obj);
);
canvas.renderAll();
fabric.util.requestAnimFrame(animate);
)();
)();
);
【问题讨论】:
【参考方案1】:RashFlash,您在制作动画时缺少 setCoords() 函数。
更新函数动画:
(function animate()
canvas.forEachObject(function (obj)
if (!obj)
return;
// obj.left += (obj.movingLeft ? -1 : 1);
obj.top -= 1;
if (obj.left > 500 || obj.top < 0)
canvas.remove(obj);
obj.setCoords();
);
canvas.renderAll();
fabric.util.requestAnimFrame(animate);
)();
)();
另外,更新fiddle
【讨论】:
以上是关于如何检测fabric js动画对象上的鼠标按下事件的主要内容,如果未能解决你的问题,请参考以下文章