Skip to main content

ICEComponent 参考

ICEComponent 是所有图元的基类(1400+ 行),定义了通用 props、交互开关与坐标/包围盒方法。

实例属性

属性说明
ice所属 ICE 实例
root场景树根
ctxCanvas 2D 上下文
evtBus事件总线
parentNode父组件
props / state声明式配置 / 运行时状态

通用 props

位置与尺寸

prop默认值说明
left / top / width / height0局部坐标位置与尺寸

样式(style)

字段默认值说明
fillStyle'red'填充色
strokeStyle'blue'描边色
lineWidth1线宽
fillGradient / strokeGradient声明式可序列化渐变
shadow阴影预设 'sm' / 'md' / 'lg'
textAlign / textBaseline / fontSize / fontFamily / fontWeight文本相关(文本类组件)
paddingTop ~ paddingRight内边距

顶层还有 fill: true / stroke: true 开关控制是否绘制填充/描边。

描边进阶

prop说明
lineDash: []虚线段
lineDashOffset虚线偏移
lineDashFlow: false蚂蚁线流动动画
lineDashFlowSpeed: 60流速(px/s)
lineBorder / lineBorderWidth / lineBorderColor水管壁外描边

变换

prop默认值说明
transform.translate[0, 0]平移
transform.scale[1, 1]缩放
transform.skew[0, 0]斜切
transform.rotate0旋转(度)
origin'localCenter'变换原点,配合 originX/originY 自定义
linearMatrix / composedMatrix底层矩阵

显隐与交互

prop默认值说明
displaytruefalse整树隐藏
draggabletrue可拖拽
transformabletrue显示变换手柄(缩放/旋转)
interactivetrue可交互
linkabletrue可作为连线端点
showMinBoundingBox / showMaxBoundingBox调试:显示包围盒

其他

prop说明
animations: {}动画配置(详见动画

主要方法

状态与渲染

方法说明
setState(newState)更新 state(自动标脏)
render()渲染自身
renderTo(targetCtx, baseMatrix?)渲染到外部上下文
isEffectivelyVisible()整链可见性(父链上 display 全为 true)
measure() / refreshParams()度量与参数刷新

坐标与变换

方法说明
setPosition(left, top, evt?)设定局部坐标
moveGlobalPosition(tx, ty)按全局位移移动
setGlobalPosition(left, top)按全局坐标放置
setGlobalRotate(angle)按全局角度旋转
localToGlobal(x, y) / globalToLocal(x, y)坐标换算
calcAbsoluteOrigin() / calcAbsoluteLinearMatrix()绝对原点/矩阵计算
getRotateAngle()累计旋转角
getLocalLeftTop()局部左上角

包围盒与命中

方法说明
getMinBoundingBox(refresh?)自身几何包围盒
getMaxBoundingBox(refresh?)仿射变换后的包围盒
containsPoint(x, y)点是否在组件内

事件与销毁

方法说明
on / off / once / trigger事件订阅(详见事件系统
destroy()销毁组件