如何使用 FabricJS 设置三角形的高度？

一、什么是 FabricJS

FabricJS是一个强大的Javascript库，可用于创建和操作HTML5的canvas元素。它是一个优秀的图像处理库，提供了诸多便利的接口，能够实现图形的绘制、编辑、拖拽、复制、删除等功能。FabricJS提供了丰富的API，方便开发人员轻松实现图形操作的交互效果。

二、创建三角形

创建一个三角形非常简单，只需设置三个点，然后绘制即可，如下代码所示：

var canvas = new fabric.Canvas('canvas');
var triangle = new fabric.Triangle({
       width: 100 ,
       height : 100,
       fill: 'red',
       left: 100,
       top: 100,
       angle: 30
 });
canvas.add(triangle);

上述代码中，我们使用FabricJS的Triangle对象创建了一个红色的三角形，并将其放置在画布的（100,100）位置上。在这里要注意的是，Triangle对象需要设置三角形的宽度和高度属性，而不是设置三角形的底部和高度属性。我们也可以通过设置angle属性旋转三角形的角度。

三、设置三角形的高度

在FabricJS中，我们可以通过改变三角形的高度来改变三角形的形状。具体来说，我们可以通过改变三角形的scaleY属性来改变三角形的高度，代码如下：

triangle.set({ scaleY: 2 });
canvas.renderAll();

在上述代码中，我们将三角形的 scaleY 设置为2，这意味着我们将三角形的高度放大到原来的两倍。

1. 注意事项

虽然我们可以通过设置scaleY来改变三角形的高度，但要注意以下几点：

1.1 如果我们只想改变三角形的高度，而不改变三角形的形状，我们需要同步调整三角形的宽度，代码如下：

triangle.set({ scaleY: 2, scaleX: 0.5 }); // 将 scale X 设置为 0.5
canvas.renderAll();

1.2 由于三角形是由三个点组成的，如果我们只改变三角形的高度而不改变三角形的形状，可能会出现点被拉伸或压缩的情况。因此，我们应该根据需要重新计算新的三角形顶点的位置，代码如下：

var oldHeight = triangle.getHeight(); // 获取原始高度
var scaleY = 2;
var newHeight = oldHeight * scaleY;
var ratio = newHeight / oldHeight;
var oldPoint1 = triangle.getPointByOrigin('left', 'top');
var newPoint1 = new fabric.Point(oldPoint1.x, oldPoint1.y * ratio);
var oldPoint2 = triangle.getPointByOrigin('left', 'bottom');
var newPoint2 = new fabric.Point(oldPoint2.x, oldPoint2.y * ratio);
var oldPoint3 = triangle.getPointByOrigin('right', 'top');
var newPoint3 = new fabric.Point(oldPoint3.x * ratio, oldPoint3.y);
triangle.set({
    top: newPoint1.y,
    left: newPoint1.x,
    height: newHeight,
    scaleY: 1,
    scaleX: 1
});
triangle.path[0][1] = newPoint2;
triangle.path[1][1] = newPoint3;
triangle.path[2][1] = newPoint1;
canvas.renderAll();

上述代码中，我们首先获取原始高度，然后计算新高度，接着计算新的三角形顶点的位置，并更新三角形的顶点位置。由于我们已经手动更新三角形顶点的位置，因此我们需要将三角形的scaleX和scaleY设置为1，以避免对顶点位置的影响。

2. 动态改变三角形的高度

如果我们需要动态地改变三角形的高度，可以使用FabricJS中提供的on方法来监听slider的滑动事件，代码如下：

$(document).on('input', '#slider', function(e) {
    var height = $(this).val();
    var oldHeight = triangle.getHeight();
    var scaleY = height / oldHeight;
    var newHeight = height;
    var ratio = newHeight / oldHeight;
    var oldPoint1 = triangle.getPointByOrigin('left', 'top');
    var newPoint1 = new fabric.Point(oldPoint1.x, oldPoint1.y * ratio);
    var oldPoint2 = triangle.getPointByOrigin('left', 'bottom');
    var newPoint2 = new fabric.Point(oldPoint2.x, oldPoint2.y * ratio);
    var oldPoint3 = triangle.getPointByOrigin('right', 'top');
    var newPoint3 = new fabric.Point(oldPoint3.x * ratio, oldPoint3.y);
    triangle.set({
        top: newPoint1.y,
        left: newPoint1.x,
        height: newHeight,
        scaleY: 1,
        scaleX: 1
    });
    triangle.path[0][1] = newPoint2;
    triangle.path[1][1] = newPoint3;
    triangle.path[2][1] = newPoint1;
    canvas.renderAll();
});

上述代码中，我们使用$(document).on绑定了input事件，当slider的值发生变化时触发。在事件处理程序中，我们首先获取slider的值，并计算出新的scaleY值和新的高度。接着，我们计算新的三角形顶点位置，并更新三角形。注意，我们使用了relativeTo属性来获取三角形顶点的原始位置，这样我们就可以避免手动输入三角形的原始位置。

四、总结

FabricJS提供了简单易用的API，可以方便地创建和操作图形对象。通过改变三角形的scaleY属性，我们可以方便地改变三角形的高度。如果需要动态地改变三角形的高度，我们可以使用on方法监听slider的滑动事件，并根据需要更新三角形的顶点位置。此外，我们还需要注意可能出现的点被拉伸或压缩的情况，需要根据需要重新计算新的三角形顶点的位置。