Fabric.js Polyline lockSkewingY 属性

简介

Polyline 是 Fabric.js 中的一个对象类型，用于绘制由多个节点连接而成的折线或曲线。而 lockSkewingY 是 Polyline 对象中的一个布尔类型属性，用于控制折线节点在 Y 轴上的斜切是否被锁定。

语法

var polyline = new fabric.Polyline(points, {
  lockSkewingY: true // 默认值为 false
});

详解

默认情况下，Polyline 对象的节点可以在 X 和 Y 轴上同时进行斜切，并且都不会被锁定。如果开发者将 lockSkewingY 属性设置为 true，则 Polyline 节点在 Y 轴上的斜切会被锁定，不能进行修改和变形。而在 X 轴上则不受影响。

锁定 Y 轴的斜切可以在一定程度上保持图形的稳定性，避免因误操作而影响到整个折线。但也需要注意，锁定该属性可能会导致某些特殊情况下的变形无法实现。

示例

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

var points = [{x: 50, y: 50}, {x: 100, y: 100}, {x: 150, y: 50}, {x: 200, y: 100}];
var polyline = new fabric.Polyline(points, {
  fill: '',
  stroke: 'black',
  strokeWidth: 2,
  lockSkewingY: true
});

canvas.add(polyline);

以上代码创建了一个简单的折线对象，其中 lockSkewingY 属性被设置为 true。您可以尝试在 Fabric.js 的官方示例中对该折线进行操作，会发现无法对其在 Y 轴上进行斜切。