时间戳

首页 > 解决方案 > FabricJS 对象在左上角不可选择/可点击/调整大小（React + FabricJs）

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

问题描述

我有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()为对象会有所帮助，但在这种情况下，我不明白该放在哪里。

标签： reactjsfabricjs

解决方案

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

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

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

推荐阅读