📌  相关文章
📜  Fabric.js 路径 centeredScaling 属性(1)

📅  最后修改于: 2023-12-03 14:41:08.911000             🧑  作者: Mango

Fabric.js 路径 centeredScaling 属性

在 Fabric.js 中，路径对象是指代模拟自由绘画的类，它能够绘制任意的图形形状，包括线、多边形和曲线等。Fabric.js 通过路径对象的 centeredScaling 属性为我们提供了更好的缩放方式，让程序员在实现自由绘画时更加方便灵活。

属性介绍

centeredScaling 属性是路径对象的一个布尔类型属性，默认值为 false。该属性用于控制路径的缩放中心，如果该属性值为 true，那么缩放中心将会被定为路径的中心位置，否则缩放中心将会被定位在路径的左上角位置。

使用方法

创建路径对象时，可以通过传入一个对象来指定路径对象的一些属性，其中也包括 centeredScaling 属性。代码如下：

var path = new fabric.Path('M 0 0 L 200 100 L 100 200 z', {
  fill: 'red',
  stroke: 'green',
  strokeWidth: 3,
  centeredScaling: true
});

如上代码所示，当 centeredScaling 属性值为 true 时，路径被缩放时的中心点将会是路径中心的位置。如果 centeredScaling 属性的值为 false 或未设置，则路径缩放时的中心点是路径的左上角。

属性效果展示

以下代码可以通过 Canvas 显示一个路径对象，并提供了两个按钮，用于控制路径的 centeredScaling 属性的值。

<canvas id="canvas" width="400" height="400"></canvas>
<button id="centeredScalingON">Centered Scaling ON</button>
<button id="centeredScalingOFF">Centered Scaling OFF</button>

<script>
var canvas = new fabric.Canvas('canvas');

var path = new fabric.Path('M 0 0 L 200 100 L 100 200 z', {
  fill: 'red',
  stroke: 'green',
  strokeWidth: 3,
  centeredScaling: false
});
canvas.add(path);

document.getElementById('centeredScalingON').addEventListener('click', function(){
  path.set('centeredScaling', true);
  canvas.renderAll();
});

document.getElementById('centeredScalingOFF').addEventListener('click', function(){
  path.set('centeredScaling', false);
  canvas.renderAll();
});
</script>

通过在上述代码中点击两个按钮，可以控制路径对象的 centeredScaling 属性，进而在 Canvas 上观察到路径缩放中心的变化。

参考链接