Fabricjs 遇到的一些tips画布缩放还原缩放移动后的画布记录操作只有对象完成当前操作才会算做一次操作中心

画布缩放

setZoom(2);
zoomToPoint({x: 0, y: 0}, 2);

还原缩放移动后的画布

canvas.absolutePan({ x: 0, y: 0 });
canvas.setZoom(1);

记录操作

只有对象完成当前操作才会算做一次操作

canvas.on('object:modified', () => {})

中心缩放

添加对象的时候添加三个属性

 {
     originX: 'center',
     originY: 'center',
     centeredScaling: true,
 }

中心旋转

如果使用set('angle', val)会以左上角旋转，应该使用

const activeObject = canvas.getActiveObjects()[0];
if (!activeObject) {
    return;
}
activeObject.rotate(val);

文字的描边重叠解决

{
    paintFirst: 'stroke',
}

监听字体加载完成

import FontFaceObserver from 'fontfaceobserver';
const font = new FontFaceObserver(['font1', 'font2']);
await font.load();

图片保存质量

只有选择jpeg的时候，质量才生效，0.92就是最高质量

canvas.toDataURL({
   format: 'jpeg',
   multiplier: scale,
   quality: 0.92
});

完整的选择j监听事件

canvas.on('selection:created', (e) => this._selected(e));
canvas.on('selection:updated', (e) => this._selected(e));
canvas.on('selection:cleared', (e) => this._selected(e));

画布信息保存

如果有自定义字段需要一起保存

canvas.toJSON(['id', 'tag']);

json回填后生成图片bug

具体原因不太清楚(有知道的大佬可以说一下)，但是最好是加一个延迟，否则生成的图片内容可能会缺失一些图片元素

    canvas.loadFromJSON(json, () => {
      canvas.renderAll()

      setTimeout(() => {
        const base64 = canvas.toDataURL({
          format: 'jpeg',
          multiplier: 1,
        })
        resolve(base64)
      }, 300)
    })

修改一个组里的图片的src，刷新后视图没有变化

因为创建的组默认是带缓存的，所以即使更新了子元素的贴图，依旧显示的缓存，解决方法

// 设置组不带缓存
const activeObj = this.canvas.c.getActiveObject();
const group = activeObj.toGroup();
group.objectCaching = false;

一些操作需调用setCoords()才能重新计算控制位置(改变Object状态)

object.set('left', 123)
object.setTop(456)
object.set('width', 100)
object.set('height', 100)
object.set('scaleX', 1.5)
object.set('scaleY', 1.5)
object.set('skewX', 20)
object.set('skewY', 20)
object.set('padding', 10)
object.set('angle', 45)
object.set('strokeWidth', 12)
object.center() 
object.centerH()
object.centerV()
canvas.zoomToPoint(...)

object.setCoords()

画布如果有`setZoom`,图层的操作得用zoom之前的值

移动端`setSrc`后丢失了高度和宽度

必须使用地址，不能用base64，并且设置了新地址之后直接用.src获取的还是初始地址，需要使用getSrc获取当前地址

移动端锁屏bug

移动端给body设置overflow:hidden会失效，最稳妥的做法是

html,
body {
    height: 100%;
    overflow: hidden;
}

Fabricjs 遇到的一些tips