ICanvas - 图形系统

ImageShape

图像图形类，用于在画布上显示图片。

属性

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

属性名	类型	默认值	说明
src	string	""	图片源路径
loaded	boolean	false	图片是否已加载完成
type	string	"ImageShape"	图形类型标识

方法

构造函数

constructor(config: IShapeOptional, canvas: ICanvas)

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

设置方法

setSrc(src: string): ImageShape

设置图片源路径并加载图片

• src: 图片源路径
• 返回值: 当前ImageShape实例

crop(x: number, y: number, width: number, height: number): ImageShape

设置图片裁剪区域

• x: 裁剪起始X坐标
• y: 裁剪起始Y坐标
• width: 裁剪宽度
• height: 裁剪高度
• 返回值: 当前ImageShape实例

resetCrop(): ImageShape

重置裁剪设置，显示完整图片

• 返回值: 当前ImageShape实例

继承方法

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

• draw(ctx: CanvasRenderingContext2D): 绘制图片
• isPointInPath(x: number, y: number, shapeId: string): boolean: 检测点是否在图片内
• getAttr(key: string): 获取属性值

使用示例

// 创建一个图片图形
const imageShape = new ImageShape({
	src:"path/to/image.jpg",
    x: 100,
    y: 100,
    width: 200,
    height: 150
}, canvas);

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

// 设置新的图片源
imageShape.setSrc("path/to/new-image.jpg");

// 裁剪图片
imageShape.crop(10, 10, 100, 100);

// 重置裁剪
imageShape.resetCrop();

注意事项

1. 图片加载是异步的，需要等待 loaded 属性为 true 后才能正确显示
2. 支持图片裁剪功能，可以显示图片的指定区域
3. 支持所有平台（APP、WEB、小程序）
4. 图片加载完成后会自动更新画布
5. 点击检测基于图片的显示区域