fabric 动态修改坐标(top、left)后不能选中(坑)

Textbox、Rect 不能选中

创建 Textbox、Rect 等元素对象时,没有指定 top、left,动态修改坐标后,不能选中刚添加的元素,如下:

// 创建元素对象时,没有指定 top、left
const element = new fabric.Rect({
    fill:'red'
    width:150,
    height:100,
})
canvasFab.add(element)

// 动态修改坐标
element.top = 200
element.left = 200

分析

其实可以选中,但不是在新位置,而是在原位置处是可以选中的

说明 边界、边框、边界点 等没有更新到新位置

解决

增加下面两行代码

// 重新计算边界点坐标
text.setCoords()
// 让fabric Canvas对象重新渲染,让元素出现在新位置
this.canvasFab.renderAll()

完整代码

// 创建元素对象时,没有指定 top、left
const element = new fabric.Rect({
    fill:'red'
    width:150,
    height:100,
})
canvasFab.add(element)

// 动态修改坐标
text.top = 200
text.left = 200
// 重新计算边界点坐标
text.setCoords()
// 让fabric Canvas对象重新渲染,让元素出现在新位置
this.canvasFab.renderAll()

Circle不能选中

对于 Circle 必须指定 半径,否则无法重新计算边界点坐标

代码

const element = new fabric.Circle({
    radius: 70,
})
canvasFab.add(element)
element.top = 200
element.left = 200
element.setCoords()
this.canvasFab.renderAll()

参考:
https://blog.csdn.net/weixin_41514525/article/details/119790613