ICanvas - 图形系统

IRing

圆环图形类，用于绘制圆环形状。

属性

继承自 Shape 的所有属性，并包含以下特定属性：

属性名	类型	默认值	说明
innerRadius	number	10	内圆半径
outerRadius	number	20	外圆半径
startAngle	number	0	起始角度（度）
endAngle	number	360	结束角度（度）
type	string	"IRing"	图形类型标识

方法

构造函数

constructor(config: IShapeOptional, canvas: ICanvas)

• config: 可选的配置对象
• canvas: 画布实例

设置方法

setInnerRadius(value: number): IRing

设置内圆半径

• value: 内圆半径值
• 返回值: 当前IRing实例

setOuterRadius(value: number): IRing

设置外圆半径

• value: 外圆半径值
• 返回值: 当前IRing实例

setWidth(value: number): IRing

设置宽度（会同时更新外圆半径和高度）

• value: 宽度值
• 返回值: 当前IRing实例

setHeight(value: number): IRing

设置高度（会同时更新外圆半径和宽度）

• value: 高度值
• 返回值: 当前IRing实例

继承方法

继承自 Shape 的所有方法，包括：

• draw(ctx: CanvasRenderingContext2D): 绘制圆环
• isPointInPath(x: number, y: number, shapeId: string): boolean: 检测点是否在圆环内
• getBoundRect(): IShapeBoundRect: 获取边界矩形

使用示例

// 创建一个完整圆环
const ring = new IRing({
    x: 100,
    y: 100,
    innerRadius: 30,
    outerRadius: 60,
    fill: "#ff0000",
    stroke: "#000000",
    strokeWidth: 2
}, canvas);

// 添加到画布
canvas.addShape(ring);

// 修改圆环属性
ring.setInnerRadius(20)
    .setOuterRadius(80)
    .setFill("#00ff00")
    .setStroke("#ff0000");

// 创建部分圆环
const partialRing = new IRing({
    x: 200,
    y: 100,
    innerRadius: 25,
    outerRadius: 50,
    startAngle: 0,
    endAngle: 180,
    fill: "#0000ff",
    stroke: "#ffffff",
    strokeWidth: 1
}, canvas);

注意事项

1. 内圆半径必须小于外圆半径
2. 支持填充和描边两种渲染模式
3. 可以绘制完整的圆环或部分圆环
4. 点击检测基于角度范围和半径范围
5. 支持旋转和缩放变换
6. 边界矩形基于外圆半径计算