Fabric.js Circle 类完整参考

概述

fabric.Circle 是 Fabric.js 库中的一个圆形类，用于绘制和操作圆形形状。

构造函数

new fabric.Circle([options])

• options：一个包含所有圆形属性的对象。可选。

下面列出了可选属性：

| 属性名 | 类型 | 默认值 | 说明 | | ------------- | ------------ | ------- | ---- | | radius | Number | 0 | 圆形半径 | | startAngle | Number | 0 | 开始角度 | | endAngle | Number | Math.PI | 结束角度 | | left | Number | 0 | X轴位置 | | top | Number | 0 | Y轴位置 | | angle | Number | 0 | 顺时针旋转角度 | | fill | String/Brush | 'black' | 填充色 | | opacity | Number | 1 | 不透明度 | | stroke | String/Brush | null | 线条颜色 | | strokeWidth | Number | 1 | 线条宽度 | | shadow | Object | null | 阴影效果 |

实例方法

toObject

circle.toObject(propertiesToInclude)

将圆形转换成一个对象。可选参数 propertiesToInclude 是一个数组，指定了要转换成对象的属性名。

toSVG

circle.toSVG()

将圆形转换成 SVG 格式的字符串。

render

circle.render(ctx)

在指定上下文中渲染圆形。

使用示例

创建一个圆形

const circle = new fabric.Circle({
  radius: 50,
  left: 100,
  top: 100,
  fill: 'red'
});

上述代码会创建一个半径为 50，红色填充的圆形，位置位于画布中心。

获取圆形的半径

console.log(circle.radius);

上述代码会打印圆形的半径，即 50。

将圆形转换成对象

const circleObject = circle.toObject(['radius', 'left', 'top']);
console.log(circleObject);

上述代码会打印包含圆形指定属性的对象，即 { radius: 50, left: 100, top: 100 }。

渲染圆形

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
circle.render(ctx);

上述代码会在指定的画布上下文中渲染圆形。