FabricJS 对象在左上角不可选择/可点击/调整大小（React + FabricJs）答案

【问题标题】：FabricJS object is not selectable/clickable/resizable in top left corner (React + FabricJs)FabricJS 对象在左上角不可选择/可点击/调整大小（React + FabricJs）
【发布时间】：2021-12-03 21:13:28
【问题描述】：

我有FabricJs 画布。我在画布外有多个对象。当我单击对象时，它会出现在 Canvas 中。我没有以编程方式对这个对象做任何其他事情。

这是将图像添加到 Canvas 的部分代码（它是 React 代码）：

const { state, setState } = React.useContext(Context);
const { canvas } = state;
...
const handleElementAdd = (event, image) => {     
    const imageSize = event.target.childNodes[0].getBoundingClientRect();
    const imageUrl = `/storage/${image.src}`;
    new fabric.Image.fromURL(imageUrl, img => {
        var scale = 1;      
    if (img.width > 100) {
      scale = 100/img.width;
    }
    var oImg = img.set({
      left:  state.width / 2 - img.width * scale, 
      top:  state.height / 2 - img.height * scale, 
      angle: 0})
    .scale(scale);       
   
    canvas.add(oImg).renderAll.bind(canvas);
    canvas.setActiveObject(oImg);
  });
  };
      ...       
  <div              
          key={img.name}
          onClick={(e) => handleElementAdd(e, img)}
          className={buttonClass}
        >

它出现了，我可以拖放、调整大小、选择它。但是，当我的对象放置在画布的左上角时，它是不可点击的，不可调整大小等。我可以选择更大的区域然后选择对象，但它不会响应任何事件，如调整大小、选择等。

不知道在哪里看。我读到如果以编程方式将坐标object.setCoord() 更改为对象会有所帮助，但在这种情况下，我不明白该放在哪里。

【问题讨论】：

标签： reactjs fabricjs

【解决方案1】：

每次修改对象或移动对象时，都必须放置（调用）object.setCoords()。因此，您可以在画布的 mouseUp 事件中调用它。

您可以编写一个名为“moveObject”的函数，在该函数中获取您尝试移动/移动/更新的对象。然后就是 selectedObject.setCoords()。

然后在 canvas.on('selection:updated', e => {----}) 中调用该函数

【讨论】：