ICanvas - 图形系统

IRect

矩形图形类，用于绘制矩形，支持圆角矩形。

属性

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

属性名	类型	默认值	说明
radius	number	0	圆角半径
type	string	"IRect"	图形类型标识

方法

构造函数

constructor(config: IShapeOptional, canvas: ICanvas)

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

设置方法

setRadius(value: number): IRect

设置圆角半径

• value: 圆角半径值
• 返回值: 当前IRect实例

继承方法

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

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

使用示例

// 创建一个矩形
const rect = new IRect({
    x: 100,
    y: 100,
    width: 200,
    height: 150,
    fill: "#ff0000",
    stroke: "#000000",
    strokeWidth: 2
}, canvas);

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

// 修改矩形属性
rect.setRadius(10)
    .setFill("#00ff00")
    .setStroke("#ff0000")
    .setStrokeWidth(3);

// 创建圆角矩形
const roundedRect = new IRect({
    x: 50,
    y: 50,
    width: 100,
    height: 80,
    radius: 20,
    fill: "#0000ff",
    stroke: "#ffffff",
    strokeWidth: 1
}, canvas);

注意事项

1. 支持圆角矩形绘制
2. 圆角半径不会超过矩形宽度或高度的一半
3. 支持填充和描边两种渲染模式
4. 点击检测基于矩形区域
5. 支持旋转和缩放变换
6. 边界矩形计算基于实际绘制区域