关于前端:Fabricjs-避坑指南持续更新中

58次阅读

共计 1002 个字符，预计需要花费 3 分钟才能阅读完成。

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