本文简介
点赞 + 关注 + 珍藏 = 学会了
应用 fabric.js 创立的图形，默认的缩放原点是元素操作点的对角点。
如下图所示：
如果按住 alt 键 操作会把原点挪动到元素核心。
如下图所示：
如果想将默认缩放操作设置为“核心缩放”，只需将 centeredScaling 属性设置为 true 即可。
设置核心缩放
尽管只有将 `centeredScaling 设置为 true` 就行了，但还能再细分成2种状况。
一个是全局设置，一个是只设置指定元素。
在实际操作之前，我先创立画布，并在画布上增加2个元素，一个矩形，一个圆形。
<canvas id="canvasBox" width="600" height="400" style="border: 1px solid #ccc;"></canvas><script> // 初始化画布 let canvas = new fabric.Canvas('canvasBox') // 矩形元素 let rect = new fabric.Rect({ width: 100, height: 60, left: 100, top: 100, fill: 'pink' }) // 将矩形增加到画布里 canvas.add(rect) // 圆形元素 let circle = new fabric.Circle({ radius: 50, left: 300, top: 80, fill: 'green' }) // 将圆形增加到画布里 canvas.add(circle)</script>全局设置
全局设置的话，画布上所有元素都会失效。
只需在创立画布时将 centeredScaling 设为 true 即可。
// 省略局部代码.// 形式1let canvas = new fabric.Canvas('canvasBox', { centeredScaling: true // 全局所有元素都失效})// 形式2let canvas = new fabric.Canvas('canvasBox')canvas.centeredScaling = true从上图中能够看到，不论是圆形还是矩形都是以中心点为缩放原点。因为在 new fabric.Canvas 时或者其返回的实例对象上设置 centeredScaling 都是全局失效的。
独自设置指定元素
如果只是设置指定元素以中心点为缩放原点，那么被设置的元素会失效，其余元素不会失效。
本例只将矩形设置成以中心点为缩放原点，圆形还是默认的操作。
// 省略局部代码// 矩形let rect = new fabric.Rect({ width: 100, height: 60, left: 100, top: 100, fill: 'pink', centeredScaling: true // 单个元素失效})// 将矩形增加到画布里canvas.add(rect)下面的代码只设置了矩形的 centeredScaling ，圆形还是默认值。
所以在操作矩形缩放时是以中心点为原点，圆形还是默认值。
同样，也反对在创立元素后再设置。
// 省略局部代码let rect = new fabric.Rect({...})rect.centeredScaling = true代码仓库
⭐ Fabric.js 核心缩放
举荐浏览
《Fabric.js 从入门到 _ _》
《Fabric.js IText 手动设置斜体》
《Fabric.js 动静设置字号大小》
《Fabric.js 锁定背景图，不受缩放和拖拽的影响》
《Fabric.js 自在绘制椭圆》
《Fabric.js 橡皮擦的用法（蕴含复原性能）》
点赞 + 关注 + 珍藏 = 学会了
代码仓库