Fabric.js | Polygon lockUniScaling 属性

Fabric.js是一款基于Canvas API的Javascript 库，可以帮助开发者轻松地创建交互性较强的canvas应用。其中Polygon是Fabric.js库中的一个类别，可用于绘制多边形。lockUniScaling是Polygon类中的一个属性，可以限制未选择的顶点不能被缩放，而可以旋转和移动。

使用方法

var polygon = new fabric.Polygon(points, options);
polygon.lockUniScaling = true;

在这里，points 参数是一个坐标数组，而 options 参数是一个包含多边形各项属性的类，例如是否填充颜色、边框宽度、是否虚线等等。polygon.lockUniScaling = true; 将启用 lockUniScaling 属性，并限制多边形未选择的顶点不能被缩放。

示例代码

var canvas = new fabric.Canvas('canvas');

var points = [
  {x: 20, y: 30},
  {x: 50, y: 0},
  {x: 100, y: 70},
  {x: 60, y: 120},
  {x: 20, y: 100},
];
var hexagon = new fabric.Polygon(points, {
  fill: '#ff0000',
  stroke: '#000000',
  strokeWidth: 2,
  lockUniScaling: true,
});

canvas.add(hexagon);

在上面的示例中，我们定义了一个名为 hexagon 的多边形对象，使用 fill 参数设置填充颜色，使用 stroke 参数设置边框颜色，使用 strokeWidth 参数设置边框宽度，并启用了 lockUniScaling 属性。最后，将多边形添加到了名为 canvas 的画布中。

总结

本文介绍了 Fabric.js 库中的 Polygon 类，以及 lockUniScaling 属性的使用方法。在书写更为复杂的多边形时，可以通过启用该属性来避免因不小心缩放而导致多边形形状和比例的变化。