ICanvas - 图形系统

Path2DShape

Path2D图形类，用于绘制复杂的路径图形，支持SVG路径语法。

属性

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

属性名	类型	默认值	说明
pathData	string	""	SVG路径数据字符串
type	string	"Path2DShape"	图形类型标识

方法

构造函数

constructor(config: IShapeOptional, canvas: ICanvas)

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

设置方法

setPathData(pathData: string): Path2DShape

设置路径数据

• pathData: SVG路径数据字符串
• 返回值: 当前Path2DShape实例

继承方法

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

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

使用示例

// 创建一个路径图形
const path2D = new Path2DShape({
    pathData: "M 10 10 L 100 10 L 100 100 L 10 100 Z",
    fill: "#ff0000",
    stroke: "#000000",
    strokeWidth: 2
}, canvas);

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

// 修改路径数据
path2D.setPathData("M 20 20 Q 50 10 80 20 T 140 20");

// 复杂路径示例
const complexPath = new Path2DShape({
    pathData: "M 10 10 C 20 0, 40 0, 50 10 S 70 20, 80 10",
    fill: "#00ff00",
    stroke: "#ff0000",
    strokeWidth: 3
}, canvas);

注意事项

1. 支持完整的SVG路径语法
2. 路径命令包括：M、L、H、V、C、S、Q、T、A、Z等
3. 支持填充和描边两种渲染模式
4. 点击检测基于路径的几何形状
5. 边界矩形会根据路径自动计算
6. 适合绘制复杂的自定义图形