如何在fabricjs画布对象上触发mousedown事件？答案

【问题标题】：How to trigger mousedown event on fabricjs canvas object?如何在fabricjs画布对象上触发mousedown事件？
【发布时间】：2019-07-31 03:13:22
【问题描述】：

我在画布 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>

我找到了我的问题的解决方案，请参考更新的sn-ps

【问题讨论】：

画布不包含单独的对象。即使您在其上绘制图像或形状，它仍然只是一个没有子对象的大画布。
如果您想知道鼠标点击是否在图像区域内，您必须将点击事件的 x y 坐标与图像坐标进行比较。为了使这更容易，您可以使用 Pixi.js 之类的库
@Kokodoko。我和你的想法一样，但这只是意味着你也没有研究过fabric.js。他们为您构建了它。 fabricjs.com/fabric-intro-part-2#events
@Xris。我是否正确理解您想通过单击按钮而不是图像来触发图像上的鼠标单击？目前，您的代码已经可以通过单击图像本身来运行。
@Aunt Jemima 对不起，你是对的！我没有注意到你已经在使用 fabricjs

标签： javascript fabricjs

【解决方案1】：

我的问题的解决方案在更新的 sn-p 中

【讨论】：

请记住，当您触发此类事件时，不会触发任何内部 fabric.js 逻辑。 IE。您不会触发选择、转换等。