Fabric.js | Ellipse centeredScaling 属性

简介

Fabric.js 是一个用于创建交互式的 Canvas 应用的 JavaScript 库。它提供了一个简单的 API，用于绘制基本的形状，如圆形、矩形和直线，以及高级形状，如曲线和多边形。其中，Ellipse 是一种基本形状之一，而 centeredScaling 则是一种用于调整椭圆大小的属性。

什么是 Ellipse？

Ellipse 是一个由中心点、横轴半径和纵轴半径构成的形状。它可以被用于绘制椭圆和圆形。

在 Fabric.js 中，我们可以使用 fabric.Ellipse 类来创建 Ellipse 对象。

var ellipse = new fabric.Ellipse({
  left: 100,
  top: 100,
  rx: 50,
  ry: 30,
  fill: 'red'
});

canvas.add(ellipse);

上面的代码创建了一个中心坐标为 (100, 100)，横轴半径为 50，纵轴半径为 30 的红色椭圆。

什么是 centeredScaling？

centeredScaling 是一个用于控制 Ellipse 缩放行为的属性。当 centeredScaling 为 true 时，我们可以通过鼠标拖拽椭圆的四个角来同时调整横轴和纵轴半径，而不会改变椭圆的中心点位置。

在 Fabric.js 中，默认情况下，centeredScaling 是 false，这意味着在调整椭圆大小时，中心点位置也会随着改变。而当 centeredScaling 设置为 true 时，椭圆的大小调整不会影响中心点位置。

可以使用以下代码设置 centeredScaling 属性：

ellipse.set({
  centeredScaling: true
});

总结

在 Fabric.js 中，Ellipse 是一种基本形状，可以用于绘制椭圆和圆形。而 centeredScaling 是一个用于控制 Ellipse 缩放行为的属性。当 centeredScaling 为 true 时，调整椭圆大小不会影响其中心点位置。