Skip to main content

图元手册

所有图元共享 ICEComponent 通用 props，下表只列各图元的专有 props。下面每个图元都配有实时示例——画布由 ice-render 内核在浏览器里直接渲染，可拖动试一试。

一览​

图元说明
ICERect矩形
ICECircle圆
ICEEllipse椭圆
ICEStar星形
ICEIsogon等多边形
ICERose玫瑰线（极坐标曲线）
ICEText文本（详见文本）
ICEImage图片
ICEPath / ICEDotPath参数化路径 / 点序列路径
ICEGroup容器（详见分组与布局）
ICEVisioLink / ICEBezier / ICEPolyLine连线（详见连线）

ICERect​

new ICE.ICERect({ left: 0, top: 0, width: 160, height: 90, radius: 8 });
prop默认值说明
left/top/width/height0位置与尺寸
radius—圆角半径（自动钳制到 min(w/2, h/2)，给多大都不会溢出）
圆角矩形（radius 钳制到 min(w/2,h/2)，圆化到一半即两端变半圆）
ice.addChild(new ICERect({
  left: 280, top: 30, width: 200, height: 200, radius: 100,
  fill: false, stroke: true, style: { strokeStyle: '#ff0000', lineWidth: 3 },
}));

ICECircle / ICEEllipse​

new ICE.ICECircle({ left: 100, top: 100, radius: 50 });
new ICE.ICEEllipse({ left: 100, top: 100, radiusX: 80, radiusY: 50 });
  • ICECircle：radius（默认 10），也可由 width/height 推导，内部派生 radiusX/radiusY
  • ICEEllipse：radiusX / radiusY
椭圆 / 矩形 / 圆
const { ICERect, ICECircle, ICEEllipse } = ICE;
ice.addChild(new ICEEllipse({ left: 40, top: 40, width: 200, height: 110, fill: true, stroke: true,
  style: { fillStyle: '#4f8cff', strokeStyle: '#1f4fb0', lineWidth: 2 } }));
ice.addChild(new ICECircle({ left: 500, top: 40, radius: 55, fill: true, stroke: true,
  style: { fillStyle: '#22c55e', strokeStyle: '#15803d', lineWidth: 2 } }));

ICEIsogon（等多边形）​

new ICE.ICEIsogon({ left: 100, top: 100, radius: 50, edges: 6 }); // 六边形
prop默认值说明
radius10外接圆半径，与 width/height 联动重算
edges3边数（≥3）
正 N 边形（edges = 3 / 5 / 7 / 9）
[3, 5, 7, 9].forEach((e, i) => {
  ice.addChild(new ICEIsogon({ left: 50 + i * 175, top: 40, radius: 65, edges: e, startAngle: 90,
    fill: true, stroke: true,
    style: { fillStyle: ['#ef4444', '#f59e0b', '#22c55e', '#3b82f6'][i], strokeStyle: '#111', lineWidth: 2 } }));
});

ICEStar​

new ICE.ICEStar({ left: 100, top: 100, radius: 50, spikes: 5 });
prop默认值说明
radius10半径，与 width/height 联动
spikes5角数
星形（spikes=5）与正 N 边形
const { ICEStar, ICEIsogon } = ICE;
ice.addChild(new ICEStar({ left: 60, top: 30, outerRadius: 70, innerRadius: 30, spikes: 5,
  fill: true, stroke: true, style: { fillStyle: '#f59e0b', strokeStyle: '#b45309', lineWidth: 2 } }));
ice.addChild(new ICEIsogon({ left: 280, top: 30, radius: 70, edges: 6, startAngle: 90,
  fill: true, stroke: true, style: { fillStyle: '#a855f7', strokeStyle: '#7e22ce', lineWidth: 2 } }));

ICERose（玫瑰线）​

极坐标玫瑰线图元，leafNum 即方程 r = cos(kθ) 里的 k：k 偶数出 2k 瓣、奇数出 k 瓣，pointNumber 控制采样密度。

new ICE.ICERose({ left: 100, top: 100, radius: 90, leafNum: 4, pointNumber: 200 });
prop默认值说明
radius10外接圆半径
leafNum—瓣数 k
pointNumber—采样点密度
玫瑰线（leafNum = 4 / 5）
const { ICERose } = ICE;
ice.addChild(new ICERose({ left: 110, top: 40, radius: 90, leafNum: 4, pointNumber: 200,
  stroke: true, fill: false, style: { strokeStyle: '#2563eb', lineWidth: 2 } }));

极坐标曲线（采样点集）​

极坐标曲线本质是「按公式算出一系列点」。除了专用图元（ICERose / ICEIsogon），也常用手算点集喂给 ICEPolyLine / ICEDotPath。下面用阿基米德螺旋 r = a + b·θ 演示采样画法：

阿基米德螺旋（采样点集喂给 ICPolyLine）
const spiral = (origin, angularSpeed, linearSpeed, maxTime, color) => {
  const pts = [];
  for (let t = 0; t < maxTime; t++) {
    const a = t * angularSpeed;
    pts.push([origin[0] + t * linearSpeed * Math.cos(a), origin[1] + t * linearSpeed * Math.sin(a)]);
  }
  ice.addChild(new ICEPolyLine({ points: pts, stroke: true, style: { strokeStyle: color, lineWidth: 1 } }));
};

ICEImage​

const img = new ICE.ICEImage({ left: 100, top: 100, width: 200, height: 150, src: './logo.png' });
ice.addChild(img);

支持 sprite 精灵图与 clip 裁剪（见 examples/image/）。图片经由引擎统一的 ice.imageCache 管理加载。

ICEPath / ICEDotPath​

  • ICEPath：参数化路径图元（含 ICEBezier 的 cubic/quadratic 曲线）
  • ICEDotPath：点序列路径
info

在小程序等无 Path2D 的运行时，引擎自动降级为 PolyfillPath2D（记录路径命令、渲染时重放），渲染结果与原生逐像素一致，业务代码无感知。

样式速查​

所有图元的 style 支持：fillStyle / strokeStyle / lineWidth、fillGradient / strokeGradient（声明式可序列化渐变）、shadow: 'sm' | 'md' | 'lg' 阴影预设、textAlign / textBaseline 等。配合 preset（'card' / 'button' / 'title' 等）可以一行拿到成套样式，详见主题与样式。