fabric 对象缩放

属性

水平缩放属性是 scaleX
垂直缩放属性是 scaleY

可用于创建对象时指定缩放,动态设置缩放,获取缩放

拖拽

文字控件

类似 Textbox 等文字控件,拖拽时,改变的是 宽高

形状控件

类似 矩形、圆 等形状控件,拖拽时,改变的是 缩放

缩放参考点

默认的缩放参考点是 左上角,即缩放时,左上角 不变

alt 键

按住 alt 键,缩放参考点是 水平居中、垂直居中 的点,即: 中心点,缩放时,中心点 不变

设置缩放点为中心点

创建对象时,加上下面配置,缩放参考点是 中心点:

centeredScaling:true

全局设置

创建 fabric Canvas 时,加上下面配置,全局设置缩放参考点是 中心点:

方式1

let canvas = new fabric.Canvas('canvasBox', {
  centeredScaling: true // 全局所有元素都生效
})

方式2:

let canvas = new fabric.Canvas('canvasBox')
canvas.centeredScaling = true

边框

缩放时,边框宽度也会跟着缩放,创建对象时,加上下面配置可禁止边框缩放

strokeUniform:true,

禁止缩放

创建对象时,加上下面配置,可禁止 水平方向缩放、垂直方向缩放:

lockScalingX:true,
lockScalingY:true,

参考:
https://segmentfault.com/a/1190000043143818?utm_source=sf-similar-article