属性
水平缩放属性是 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