介绍FabricJS
FabricJS是一个非常流行的开源JavaScript库，用于创建交互式的Web应用程序中的绘图和图形设计。它可以轻松的管理多个对象（HTML5画布上的点、线、框、图案等），并且还提供了许多接口，可以让开发者进行自定义的编辑和操作。
Triangle的垂直缩放
很多时候，我们希望一些对象在进行缩放操作时只限制在一个维度上。JavaScript的Canvas元素提供了两种缩放方式：垂直和水平方向上的缩放。如果要对三角形进行垂直缩放，就需要实现一些专门的代码。在这篇文章中，我们将使用FabricJS的JavaScript库，来实现对三角形的垂直缩放。
步骤一：创建Canvas和三角形
首先，我们需要创建一个Canvas元素，并在其上创建一个三角形对象。接下来我们可以使用FabricJS提供的Triangle实例，来创建三角形。在代码中添加以下代码：
var canvas = new fabric.Canvas('canvas');
var triangle = new fabric.Triangle({
width: 100,
height: 100,
fill: '#c22',
left: 100,
top: 50
});
canvas.add(triangle);
在这段代码中，我们首先创建了一个新的Canvas对象，并将其存储在变量canvas中。接下来，我们使用fabric.Triangle实例创建了一个名为triangle的三角形对象。我们可以使用这个对象来进行后续的操作。最后，我们把这个三角形对象添加到Canvas上，这样我们就可以在上面进行操作了。
步骤二：实现垂直缩放的功能
现在，我们需要一种方法来让Triangle只在垂直方向上缩放。我们可以使用FabricJS提供的基于鼠标位置的缩放操作，shape.scaleToHeight()方法实现垂直缩放。在代码中添加以下代码：
canvas.on('mouse:down', function(options) {
var object = canvas.getActiveObject();
var pointer = canvas.getPointer(options.e);
var points = object.get('points');
var height = points[2].y - points[0].y;
if (height != 0) {
var scale = (pointer.y - points[0].y) / height;
object.scaleToHeight(height * scale, false);
canvas.renderAll();
}
});
这段代码中，我们在mousedown事件中编写了一段代码，它判断了当前选择的物体是否是三角形，如果是三角形，那么就将这个物体缩放到鼠标位置的高度。
步骤三：锁定垂直缩放
现在我们已经实现了垂直缩放，但是它没有锁定，可以进行任何方向的缩放。我们需要添加一些代码来锁定该三角形只能在垂直方向上缩放。在代码中添加以下代码：
triangle.lockScalingX = true;
triangle.setControlsVisibility({
mt: false,
mb: false,
ml: false,
mr: false
});
这段代码会关闭x缩放，同时关闭mt、mb、ml和mr的四个控制点（分别控制上、下、左、右的缩放）。
总结
在这篇文章中，我们学习了如何使用FabricJS来实现对三角形的垂直缩放。我们使用了fabric.Triangle实例来创建三角形，并在Canvas上进行了垂直方向的缩放。为了锁定垂直缩放，我们添加了一些代码来关闭x缩放并关闭控制点。FabricJS是一个非常强大的JavaScript库，提供了许多接口，可用于创建复杂的Web应用程序。如果你需要在应用程序中创建绘图和图形设计功能，那么FabricJS将是一个不错的选择。