Fabric.js | 三角形 skewX 属性

在 Fabric.js 中，我们可以使用 skewX 属性来控制三角形对象的斜切程度。斜切是一种使对象在水平方向上倾斜的效果。使用 skewX 属性可以实现这种效果。

用法

var triangle = new fabric.Triangle({
  width: 100, 
  height: 100, 
  fill: 'red',
  angle: 30,
  skewX: 20
});

在上面的代码中，我们创建了一个宽度和高度均为 100 像素的三角形，并设置了填充色为红色。我们还使用了 angle 属性将其旋转了 30 度，并使用 skewX 属性使其在水平方向上倾斜了 20 度。

效果

下面是使用 skewX 属性后三角形对象的效果：

如图所示，三角形对象已经在水平方向上倾斜了 20 度。

注意事项

• skewX 属性的值为角度值，单位为度。正的值会使对象倾斜向右，而负的值会使对象倾斜向左。
• 斜切效果只在水平方向上生效。要想在垂直方向上实现倾斜效果，可以使用 skewY 属性。
• skewX 属性可以和其他的变换属性一起使用，例如旋转、缩放、移动等。

以上就是 Fabric.js 中使用 skewX 属性控制三角形对象倾斜的介绍。