ICanvas - 图形系统

ILinePolygon

线条多边形图形类，用于绘制由多个点连接而成的线条多边形。

属性

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

属性名	类型	默认值	说明
points	number[]	[]	多边形顶点坐标数组 [x1, y1, x2, y2, ...]
closed	boolean	true	多边形是否自动闭合
tension	number	0	线条张力，用于平滑曲线
bezier	boolean	false	是否使用贝塞尔曲线
type	string	"ILinePolygon"	图形类型标识

方法

构造函数

constructor(config: IShapeOptional, canvas: ICanvas)

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

继承方法

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

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

使用示例

// 创建一个线条多边形
const linePolygon = new ILinePolygon({
    points: [0, 0, 100, 50, 80, 150, 20, 150],
    closed: true,
    tension: 0.3,
    stroke: "#000000",
    strokeWidth: 2,
    fill: "#ff0000"
}, canvas);

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

// 修改多边形属性
linePolygon.setAttr('points', [0, 0, 120, 60, 100, 180, 10, 180])
    .setAttr('tension', 0.5)
    .setFill("#00ff00");

注意事项

1. points 数组必须包含偶数个数值，每两个数值表示一个点的坐标
2. 支持平滑曲线绘制（通过 tension 参数）
3. 支持贝塞尔曲线绘制（通过 bezier 参数）
4. 可以设置为开放或闭合的多边形
5. 点击检测基于边界矩形范围
6. 支持填充和描边两种渲染模式