圆角盒 / 圆柱 · 纯 SVG

水平圆角立方体与竖直圆柱(含椭圆柱),正交投影 + 贝塞尔仿射不变。 可调顶面高光、侧面高光、AO、描边、发光、斜切;锚点 11 种样式。全矢量,无 Canvas / WebGL。

参数调试

几何
外观
表面
深色 · 本影
浅色 · 半影
装饰
锚点

声明式用法 · <iso-rounded-cube> / <iso-cylinder> / 道具

<iso-rounded-cube width="130" height="130" depth="44" radius="40"
  color="#ef5510" material="plastic" shadow top-color="#1c1626"
  show-anchors anchor-style="ring">
</iso-rounded-cube>
<iso-cylinder radius="48" depth="110" rings="2"
  color="#4fa8c4" material="plastic" shadow
  show-anchors anchor-style="double">
</iso-cylinder>

组合场景 · 用引擎 API 生成的架构图

节点由 renderRoundedBox() / renderCylinder() 生成, 通过 projectPoint() 摆放世界坐标、 viewDepth() 做遮挡排序,连线由 renderIsoLink() 画正交折线,可切 style: 'pipe' 变成体积管道。

0
9