1. 前言
FabricJS 是一个用于创建交互式 Canvas 的绘图库，它是基于 HTML5 Canvas API 构建的。使用 FabricJS，开发者可以轻松地在网页中创建各种形状的对象，这包括三角形、矩形、圆形等等。
本篇文章将着重介绍如何使用 FabricJS 锁定三角形的垂直倾斜。在了解如何锁定三角形的垂直倾斜之前，我们需要先了解一下 FabricJS 中的一些基本概念。
2. FabricJS 概念介绍
2.1 Canvas
Canvas 是 HTML5 中的一项重要功能，它允许在浏览器中通过 JavaScript 来绘制图形。Canvas 可以看做是一个空白的画布，你可以在上面绘制图形，并在网页中展示出来。
2.2 FabricJS
FabricJS 是基于 Canvas API 构建的 JavaScript 库，用于在网页中创建各种绘图对象。它提供了各种各样的形状可供选择（矩形、圆形、三角形等等），并且可以对这些对象进行缩放、旋转、移动等操作。
2.3 Object
FabricJS 中的所有绘图对象都是 Object 类型对象。这些对象可以是简单的形状，如矩形、圆形等，在绘制之后也可以被拖动、旋转、缩放、填充等等。你可以分别设置对象的样式属性，如 fill、stroke、opacity、shadow 等等。
2.4 Group
Group（组）是 FabricJS 中一种特殊的 Object，它可以将多个对象组合成一个整体，方便一起进行操作。Group 对象可以包含其他 Group 和 Object 对象，所以可以将多层对象包装在一个 Group 中。
3. 如何锁定三角形的垂直倾斜
3.1 创建一个三角形
我们先来看一下如何使用 FabricJS 创建一个三角形：
const triangle = new fabric.Triangle({
left: 100,
top: 100,
width: 50,
height: 50,
fill: 'red',
angle: 45
});
canvas.add(triangle);
上面的代码创建了一个红色的等边三角形，并将其添加到了 Canvas 中。triangle 对象是一个继承自 Object 的实例，所以它可以被拖动、缩放、旋转等操作。
下面是三角形的效果图：
3.2 对三角形进行锁定
我们可以使用 FabricJS 提供的 angle 控制属性来对三角形进行旋转。但是这种方式不太好掌控，用户可能会无意中显示的旋转三角形而不是垂直倾斜。
更好的方式是使用 FabricJS 提供的 lockScalingX 和 lockScalingY 控制属性。这将确保在用户拖动三角形时不会更改其形状。
下面是一段代码，可以将三角形的垂直倾斜锁定:
const triangle = new fabric.Triangle({
left: 100,
top: 100,
width: 50,
height: 50,
fill: 'red',
angle: 45,
lockScalingX: true,
lockScalingY: true
});
canvas.add(triangle);
设置 lockScalingX 和 lockScalingY 后，用户就无法更改三角形的形状。只能通过更改 width 或 height 属性来更改三角形的大小，并且它的垂直倾斜将始终保持不变。
4. 总结
在本篇文章中，我们介绍了 FabricJS 中一些基本概念：Canvas、FabricJS、Object 和 Group。随后，我们详细讲述了如何使用 FabricJS 锁定三角形的垂直倾斜。
通过 lockScalingX 和 lockScalingY 控制属性，我们可以轻松控制三角形的垂直倾斜，确保用户不会无意中更改其形状。
希望这篇文章对您有所帮助。FabricJS 的文档非常丰富，您可以在这里查找更多关于 FabricJS 的信息。