关于fabricjs常用 – 源码巴士

private init () {
    this.canvas = new fabric.Canvas(this.$refs.canvas, {
      // isDrawingMode: this.editable,
    });
    this.canvas.on('mouse:down', this.mouseDown);
    this.canvas.on('mouse:move', this.mouseMove);
    this.canvas.on('mouse:up', this.mouseUp);
    this.canvas.on('mouse:dblclick', this.onPolygonDrawEnd);
    this.canvas.on('selection:updated', e => {
      this.edit(e.target);
    });
    this.canvas.on('selection:created', e => {
      this.edit(e.target);
    });
    this.canvas.on('object:modified', this.onChange);
    this.canvas.on('object:moving', this.mouseMoving); // 阻止对象移动到画布外面
  }
  
private mounted () {
    this.init();
  }

获得画布上的所有对象：
let itemList = this.canvas.getObjects();
禁止元素移动但是响应单击事件
{lockMovementX: true, lockMovementY: true}
禁止元素缩放,依然显示点
依然显示点：{lockScalingX: true,lockScalingY:true}
不显示点：{hasControls:false}
常用的设置
selectable:false, //禁止选中当前元素
hasBorders: false, //不显示选中时的边
hasControls:false, //不显示控制的那9个按钮
层级
bringToFrontI() 移至顶层
sendToBack() 移至底层
bringForward(). 上移一层
sendBackwards下移一层
moveTo() 自定义层级

https://blog.csdn.net/weixin_39415598/article/details/125388939

对象常用属性

属性	作用
left	横坐标
top	纵坐标
width	宽度
height	高度
originX	对象转换的水平原点(‘left’，’right’，’center’)
originY	对象转换的垂直原点(‘left’，’right’，’center’)
angle	偏转角度
snapAngle	设置对象在旋转时锁定的角度。比如设置值为45则对象在旋转时只能以45度为一个单位
fill	对象的填充色
backgroundColor	对象的背景色
hasControls	值为false时无法对对象进行旋转和拉伸
selectable	对象是否可选中，false时无法选中
lockRotation	true时无法旋转对象
lockMovementX	true时对象无法水平移动
lockScalingX	true时对象无法水平缩放
lockMovementY	true时对象无法垂直移动
lockScalingY	true时对象无法垂直缩放
scaleX	水平方向缩放倍数
scaleY	垂直方向缩放倍数
stroke	线颜色
strokeWidth	字体
fontSize	字号
type	标记对象类型

对象常用方法

方法	作用
object.set()	设置对象属性，如rect.set({top: 50,left:100})
object.scale()	缩放对象
object.rotate()	旋转对象
object.getBoundingRect()	返回对象的边界矩形（左，顶部，宽度，高度）的坐标
object.setCoords()	当对象修改了坐标、长宽、缩放、角度、倾斜程度等可能改变对象位置的属性时需要通过该方法重新计算位置
object.intersectsWithObject(other)	检查对象是否与另一个对象相交

画布方法

方法	作用
canvas.setActiveObject(obj)	将给定对象设置为画布上唯一的活动对象
canvas.getObjects()	获取画布上的所有实例对象
canvas.add(obj)	添加实例对象
canvas.remove(obj)	移除对象
canvas.renderAll()	重新渲染画布
canvas.sendToBack(o)	将对象或多个选择的对象移动到绘制对象堆栈的底部
canvas.discardActiveObject()	丢弃当前的活动对象
canvas.clear()	清除实例的所有上下文
canvas.dispose()	清除canvas元素并删除所有事件侦听器
canvas.backgroundColor	设置画布背景色

https://blog.csdn.net/daicooper/article/details/79800718

原文链接：https://blog.csdn.net/weixin_43957384/article/details/120958947