如何檢測fabric js動畫對象上的鼠標按下事件

Question

我正在使用 Fabric.js，目的是檢測動畫對象上的鼠標按下事件。 當前圖像正在從下到上進行動畫處理，當我按下鼠標時，它只顯示坐標但沒有檢測到單擊對象。

我還注意到，當圖像開始它們的動畫時，只有這樣我才能點擊/選擇它們，之后它們變得不可選擇

這是代碼的jsfiddle演示。 請檢查並提出建議。

我的 html 是：

 <h3>Hello Fabric</h3>
    <div class="mainCanvasContainer">
        <canvas class="mainCanvas" id="mycanvas" width="500px" height="400px"></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);
                })();                   
            })();


        });

Answer 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);
                    })();                   
                })();

此外，更新小提琴