Fabric.js | Ellipse cornerDashArray 属性

简介

Fabric.js是一个基于HTML5 canvas的Javascript图形库，它为开发者提供了许多便捷的方法用于绘制和操作图形，包括长方形、圆形、文本和路径。

cornerDashArray是Ellipse对象在Fabric.js中的一个属性，用于指定边角虚线的样式。

语法

ellipse.set({
  cornerDashArray: [a, b]
});

a和b均为数字型变量，表示虚线长度及间距。当只有一个值时，为虚线线长及间距均值。不设置时，Ellipse边角不设置虚线。

实例

以Ellipse虚线为主题的实例：

//创建Canvas对象
var canvas = new fabric.Canvas('canvas');

//创建一个Ellipse对象
var ellipse = new fabric.Ellipse({
  rx: 50,
  ry: 80,
  fill: 'white',
  stroke: '#333',
  strokeWidth: 3,
  top: 100,
  left: 100,
  cornerDashArray: [10, 5]
});

//添加Ellipse对象到Canvas中
canvas.add(ellipse);

以上代码创建了一个rx=50,ry=80的Ellipse对象，其中cornerDashArray的值为[10,5]，表示虚线长度为10，间距为5。效果如下：

总结

cornerDashArray属性是Fabric.js中一个常用的属性，它可以让开发人员更灵活地控制Ellipse对象的边角虚线样式。在实际项目开发中，我们可以根据需要进行设置，以达到更好的视觉效果。