fabric 对象缩放 作者：马育民 • 2024-10-03 16:31 • 阅读：10004 # 属性 水平缩放属性是 `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 原文出处：http://malaoshi.top/show_1IX8XVFGOJ7K.html