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