React+FabricJS场景下画布左上角对象无法选中点击调整大小问题

问题根因 #

FabricJS 内部会为每个可交互对象缓存一套用于碰撞检测的坐标值，当你通过代码修改对象的left/top/scale等属性时，这套缓存坐标不会自动更新，导致实际渲染位置和碰撞检测位置不匹配，所以在左上角区域会出现点不中、无法操作的问题。

修正方案 #

你需要在修改完图片对象的所有属性后、添加到画布前，调用setCoords()方法更新缓存坐标，同时修正原有代码中renderAll调用的错误（bind仅绑定上下文不会执行方法，实际没有触发画布重绘）。

修正后的代码片段 #

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}`;
    // fromURL是静态方法，不需要加new关键字
    fabric.Image.fromURL(imageUrl, img => {
        let scale = 1;      
        if (img.width > 100) {
          scale = 100/img.width;
        }
        const oImg = img.set({
          left:  state.width / 2 - img.width * scale, 
          top:  state.height / 2 - img.height * scale, 
          angle: 0
        }).scale(scale);
        // 新增：更新对象碰撞检测坐标缓存
        oImg.setCoords();
        // 修正renderAll调用，无需bind直接执行
        canvas.add(oImg).renderAll();
        canvas.setActiveObject(oImg);
    });
};
// ...
<div              
    key={img.name}
    onClick={(e) => handleElementAdd(e, img)}
    className={buttonClass}
>

补充说明 #

如果后续你通过代码动态修改已经添加到画布的对象的位置、缩放、旋转等属性，修改完成后都需要调用一次对应对象的setCoords()，避免出现同样的交互失效问题。

内容的提问来源于stack exchange，提问作者renathy