共计 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
5. 明明先定义了对象,前面的语句援用它的时候显示没有这个对象
在同一个 function() 中,fabric 的语句会在最初执行,可能是因为异步的关系。
正文完