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的语句会在最初执行,可能是因为异步的关系。