ファブリック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); 
        })();     
       })(); 

また、クールfiddle