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

48次阅读

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

正文完
 0