ICanvas - 图形系统

警告

此图形是所有图形的继承类，不能创建和使用，只能继承本图形使用（即自定义图形）

Shape

这是所有图形的基类，所有的元素都会继承本元素属性及方法。 其中IShape为底层图形接口，外部实际使用不到。如果你要自定义图形，只要继承Shape即可。

属性

警告

下面除了基础属性，其它所有特定的属性只有对应的图形才会起效，每一个图形有它特定对应指定相同下面的属性。

基础属性

属性名	类型	默认值	说明
x	number	0	X坐标位置
y	number	0	Y坐标位置
width	number	0	图形宽度
height	number	0	图形高度
fill	string	""	填充颜色
stroke	string	""	描边颜色
strokeWidth	number	0	描边宽度
opacity	number	1	透明度 (0-1)
visible	boolean	true	是否可见
rotation	number	0	旋转角度（度）
scaleX	number	1	X轴缩放比例
scaleY	number	1	Y轴缩放比例
offsetX	number	0	X轴偏移量
offsetY	number	0	Y轴偏移量
draggable	boolean	false	是否可拖拽
draggableing	boolean	false	是否正在拖拽
bubbleEvent	boolean	false	是否允许事件冒泡
toggleStatus	boolean	false	切换状态
zIndex	number	0	层级索引
clip	boolean	false	是否裁剪
id	string	"shape-" + random	唯一标识符
type	string	""	图形类型
rotateCenter	string	"topLeft"	旋转中心点
needsUpdate	boolean	false	是否需要更新

线条样式属性

属性名	类型	默认值	说明
lineJoin	string	"round"	线条连接方式
lineDashOffset	number	0	虚线偏移量
lineDash	number[]	[]	虚线样式数组
lineCap	string	"butt"	线条端点样式

文本属性

属性名	类型	默认值	说明
text	string	""	文本内容
fontSize	number	12	字体大小
fontFamily	string	"Arial"	字体族
textAlign	string	"left"	文本对齐方式
textBaseline	string	"top"	文本基线
padding	number	0	内边距
lineHeight	number	1.2	行高
textBgColor	string	""	文本背景色

图形特定属性

属性名	类型	默认值	说明
radius	number	0	半径
radiusX	number	20	水平半径
radiusY	number	80	垂直半径
innerRadius	number	10	内圆半径
outerRadius	number	20	外圆半径
startAngle	number	0	起始角度
endAngle	number	360	结束角度
sides	number	3	边数
numPoints	number	5	星形角数
points	number[]	[]	点坐标数组
closed	boolean	true	是否闭合
tension	number	0	线条张力
bezier	boolean	false	是否使用贝塞尔曲线
pointStart	object	{x: 0, y: 0}	起点坐标
pointEnd	object	{x: 0, y: 0}	终点坐标
strokeGradient	string[]	[]	描边渐变色数组
fillGradient	string[]	[]	填充渐变色数组

方法

构造函数

constructor(config: IShapeOptional, canvas: ICanvas)

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

绘制方法

draw(ctx: CanvasRenderingContext2D): void

绘制图形到画布上下文

• ctx: Canvas 2D 渲染上下文

isPointInPath(x: number, y: number, shapeId: string): boolean

检测点是否在图形内

• x: 点的X坐标
• y: 点的Y坐标
• shapeId: 图形ID（可选）
• 返回值: 是否在图形内

设置方法

元素迭代

• clone(count: number,actions:null|(el:Shape,index:number) => void): Shape[]

位置和尺寸

• setX(value: number): Shape
• setY(value: number): Shape
• setWidth(value: number): Shape
• setHeight(value: number): Shape

样式设置

• setFill(value: string): Shape
• setStroke(value: string): Shape
• setStrokeWidth(value: number): Shape
• setOpacity(value: number): Shape
• setVisible(value: boolean): Shape

变换设置

• setRotation(value: number): Shape
• setScaleX(value: number): Shape
• setScaleY(value: number): Shape
• setOffsetX(value: number): Shape
• setOffsetY(value: number): Shape
• setRotateCenter(center: CanvasRotateCenter): Shape

交互设置

• setDraggable(value: boolean): Shape
• setBubbleEvent(value: boolean): Shape
• setZindex(value: number): Shape
• setClip(value: boolean): Shape

线条样式

• setLineDash(value: number[]): Shape

事件方法

addEventListener(eventName: CanvasEventType, listener: IEventShapeListener): Shape

添加事件监听器

• eventName: 事件类型
• listener: 事件处理函数
• 返回值: 当前Shape实例

removeEventListener(eventName: CanvasEventType, listener: IEventShapeListener): Shape

移除事件监听器

• eventName: 事件类型
• listener: 事件处理函数
• 返回值: 当前Shape实例

toggle(call: (status: boolean, target: any) => void): void

设置切换回调函数

• call: 切换状态回调函数

工具方法

setAttr(key: string, value: any): void

设置属性值

• key: 属性名
• value: 属性值

getAttr(key: string): any | null

获取属性值

• key: 属性名
• 返回值: 属性值

getBoundRect(): IShapeBoundRect

获取边界矩形

• 返回值: 边界矩形对象

update(): Shape

更新图形状态

• 返回值: 当前Shape实例

使用示例

// 创建基础图形配置
const config = {
    x: 100,
    y: 100,
    width: 200,
    height: 150,
    fill: "#ff0000",
    stroke: "#000000",
    strokeWidth: 2,
    opacity: 0.8,
    rotation: 45,
    draggable: true
};

// 创建图形实例
const shape = new Shape(config, canvas);

// 添加事件监听
shape.addEventListener('click', (event) => {
    console.log('图形被点击了', event);
});

// 设置切换回调
shape.toggle((status, target) => {
    console.log('图形状态切换:', status);
});

// 修改图形属性
shape.setFill("#00ff00")
    .setRotation(90)
    .setOpacity(0.5);

注意事项

1. 所有图形类都继承自Shape基类
2. 支持链式调用设置属性
3. 事件系统支持冒泡机制
4. 支持多种变换操作（旋转、缩放、偏移）
5. 渐变效果通过数组配置
6. 自定义图形需要继承Shape并实现draw方法
7. 点击检测需要考虑旋转和缩放变换
8. 边界矩形计算基于实际绘制区域