javascript - 如何在fabricjs画布对象上触发mousedown事件？

Question

我在画布 fabricJs 上有一个图像对象，我想触发 mousedown(click) 事件。这是我尝试过的，但似乎没有达到预期的效果。

const canvas = new fabric.Canvas('gameCanvas', {selection: false});
 let myImg;
 
 fabric.Image.fromURL('http://placekitten.com/50/50', function(img) 
 {
   myImg = img.set({
                    left: 50, 
                    top: 50 ,
                    width:50,
                    height:50
                  });
                  
   canvas.add(myImg); 
    
   myImg.on('mousedown', function(e)
   {
      console.log('image click event was simulated at: ', e.clientX, e.clientY);
   
   });
 
 });
 
 document.getElementById('triggerBtn').addEventListener('click', function()
 {
    canvas.trigger('mouse:down', {
          objCanvas: myImg,
          objCanvasX: myImg.left,
          objCanvasY: myImg.top
    });
 });
 
 canvas.on('mouse:down', function(e) {
 
      if(e.objCanvas)
      {
      
        if(e.objCanvas.type === 'image')
        {
            e.objCanvas.trigger('mousedown', {
                   clientX: e.objCanvasX,
                   clientY: e.objCanvasY 
            });
        }
      }
      
      else {
        console.log('image was clicked');
      }
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.0.0/fabric.min.js"></script>
<canvas id="gameCanvas" width="500" height="300" style="border: 2px solid green;"></canvas>
<button id="triggerBtn">Trigger</button>

我找到了我的问题的解决方案，请参考更新的片段

标签： javascriptfabricjs

Answer 1

我的问题的解决方案在更新的片段中