如何检测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动画对象上的鼠标按下事件的主要内容,如果未能解决你的问题,请参考以下文章

GDI 图形对象上的鼠标 OnDrag 事件

js各事件使用详解

c# 如何检测鼠标是不是按下

Js事件大全

如何在 Java 中检测 Image 对象上的鼠标单击事件?

如何检测 MTKView 中鼠标按下事件发生的位置?