Fabric.js 避坑指南（持续更新中）

Posted 2021-10-11 Paisynah-

1. group 中 add(), addWithUpdate(), setCoords() 的区别

使用过程中发现，addWithUpdate()会把组当前 scale 设为 1，angle 设为 0。
例如当前组大小为初始组的 0.6 倍（即 scale=0.6），执行 addWithUpdate() 之后，组将视当前大小为 scale=1的大小。
所以，如果你希望组 scale=1, angle=0的显示效果固定，请慎重使用 addWithUpdate()。

下面的解释参考 Fabric.js: what is the difference between add() and addWithUpdate() ?
add()只是把新对象加入组，
addWithUpdate()是把组解散再重组，重新获取组边框/规模/角度等，
setCoords() 是更新组坐标，
建议使用顺序为 add(object)，不带参数的 addWithUpdate()，不带参数的 setCoords()，再 renderAll()。
（实际上只有最后一步渲染是必要的，前面三步视情况选择）

2. fabric 的 this 或外部的 this 冲突

加指向外部this的指针，本文使用：

var gpoint = this

3. 重新设置 group 内图片路径 / group 内 IText 文字后，画布不渲染 / 需要其它操作才能渲染

重新设置组的scaleX，scaleY，例如

.set({scale加一})
.setCoords(),
.renderAll(),
.set({scale减一})
.setCoords(),
.renderAll(),

你对组的设置就可以渲染成功了，而且换成改angle也不行，很魔幻。

4. 如何修改组内的图片url地址？

var img = new Image()
var gpoint = this //vue的this和fabric里指向对象的this冲突（见问题2）
img.onload = function() {
gpoint.group._objects[0].setElement(img)
    // 可以使用 addWithUpdate() 但会重置 scale 和 angle（见问题1）
    // 自己写的渲染函数（见问题3）
    gpoint.canvas_real_render() 
}
img.src = src

5. 明明先定义了对象，后面的语句引用它的时候显示没有这个对象

在同一个 function() 中，fabric的语句会在最后执行，可能是由于异步的关系。