Fabric.js | 椭圆可选属性

简介

Fabric.js 是一个使用 HTML5 canvas 实现的开源 JavaScript 库，集成了基本的绘图、动画和交互能力，为用户提供了强大的可视化编辑工具。

椭圆是 Fabric.js 中的基本图形之一，可以通过设置各种可选属性自定义椭圆的外观和交互特性。

可选属性

以下是椭圆的可选属性列表：

1. left

椭圆的左侧位置，单位为像素（px）。默认为 0。

var ellipse = new fabric.Ellipse({
  left: 100,
  // other properties
});

2. top

椭圆的顶部位置，单位为像素（px）。默认为 0。

var ellipse = new fabric.Ellipse({
  top: 50,
  // other properties
});

3. originX

椭圆变形的基准点的 X 坐标。可以是 "left", "center" 或 "right"。默认为 "center"。

var ellipse = new fabric.Ellipse({
  originX: 'left',
  // other properties
});

4. originY

椭圆变形的基准点的 Y 坐标。可以是 "top", "center" 或 "bottom"。默认为 "center"。

var ellipse = new fabric.Ellipse({
  originY: 'top',
  // other properties
});

5. rx

椭圆水平方向半径的长度，单位为像素（px）。默认为 0。

var ellipse = new fabric.Ellipse({
  rx: 50,
  // other properties
});

6. ry

椭圆垂直方向半径的长度，单位为像素（px）。默认为 0。

var ellipse = new fabric.Ellipse({
  ry: 30,
  // other properties
});

7. angle

椭圆旋转的角度，单位为度数。默认为 0。

var ellipse = new fabric.Ellipse({
  angle: 45,
  // other properties
});

8. scaleX

椭圆水平方向的缩放比例。默认为 1。

var ellipse = new fabric.Ellipse({
  scaleX: 2,
  // other properties
});

9. scaleY

椭圆垂直方向的缩放比例。默认为 1。

var ellipse = new fabric.Ellipse({
  scaleY: 0.5,
  // other properties
});

10. fill

椭圆填充颜色。可以是颜色字符串或 CanvasGradient 对象。默认为 "rgb(0,0,0)"。

var ellipse = new fabric.Ellipse({
  fill: 'red',
  // other properties
});

11. stroke

椭圆描边颜色。可以是颜色字符串或 CanvasGradient 对象。默认为 "rgb(0,0,0)"。

var ellipse = new fabric.Ellipse({
  stroke: '#00FF00',
  // other properties
});

12. strokeWidth

椭圆描边的宽度，单位为像素（px）。默认为 1。

var ellipse = new fabric.Ellipse({
  strokeWidth: 5,
  // other properties
});

13. strokeDashArray

椭圆描边的虚线样式，数组中的每个元素表示每个实线段的长度。默认为 null。

var ellipse = new fabric.Ellipse({
  strokeDashArray: [5, 5],
  // other properties
});

14. strokeLineCap

椭圆描边端点的样式，可以是 "butt", "round" 或 "square"。默认为 "butt"。

var ellipse = new fabric.Ellipse({
  strokeLineCap: 'round',
  // other properties
});

15. strokeLineJoin

椭圆描边的连接点样式，可以是 "bevel", "miter" 或 "round"。默认为 "miter"。

var ellipse = new fabric.Ellipse({
  strokeLineJoin: 'bevel',
  // other properties
});

参考链接

• Fabric.js 官方文档
• Fabric.js 示例演示