Fabric.js |三角形 strokeDashArray 属性

本文将介绍Fabric.js中三角形的strokeDashArray属性。

简介

strokeDashArray是指线段的虚线样式数组。在三角形中，我们可以设置边框的虚线样式，从而使三角形边框带有虚线效果。

代码示例

const canvas = new fabric.Canvas('canvas');

const triangle = new fabric.Triangle({
  width: 100,
  height: 100,
  fill: 'transparent',
  stroke: 'blue',
  strokeWidth: 5,
  left: 50,
  top: 50,
  strokeDashArray: [10, 5]
});

canvas.add(triangle);

上述代码创建了一个边长为100，填充颜色为透明，边框颜色为蓝色，边框宽度为5的三角形，并且设置了虚线样式：第一段为10个像素，第二段为5个像素。

效果预览

参数说明

strokeDashArray是一个数组，其中每个成员对应着一个虚线段的像素长度，数组长度成员个数为偶数时，交替显示每个虚线段，奇数时则可以保证最后一个虚线段为实线段，虚线段的颜色与边框的颜色一致。

备注

本属性不仅适用于三角形，也适用于其他形状对象。虚线样式对于设计师来说，是一种比较实用的装饰效果，使得图形更加美观和多样化。

参考链接

Fabric.js官网