Penrose Path 形状详解：用 `d` 属性绘制 SVG 折线、弧线与插值曲线

开发工具数据可视化【免费下载链接】penroseCreate beautiful diagrams just by typing notation in plain text.项目地址https://gitcode.com/gh_mirrors/pe/penrose点击查看免费下载Path 是 Penrose 样式程序Style中最灵活的基础形状之一它允许你以 SVG 路径命令的形式描述任意折线、椭圆弧与二次插值曲线从而实现多边形边框、连边曲线、箭头引导线等复杂几何元素。本文以 packages/docs-site/docs/ref/style/shapes/path.md 为骨架结合 packages/core/src/shapes/Path.ts 与 packages/core/src/lib/Functions.ts 的源码实现完整讲解Path的属性、三种d构造函数的参数语义与底层渲染原理并给出可直接套用的 Style 示例。Path 形状的完整属性在 Style 程序中Path与Circle、Rectangle等形状一样通过shape声明并赋属性。它的形状描述在 packages/core/src/shapes/Path.ts 中定义除了所有形状共有的描边Stroke、填充Fill、箭头Arrow与命名属性外Path独有的核心属性是d类型为PathDataV以及控制端点线帽的strokeLinecap。从samplePath的默认值packages/core/src/shapes/Path.ts可以整理出如下属性表属性类型默认值说明dPathData[]空路径SVG 路径数据由下文三个构造函数之一生成strokeWidthnumber1描边宽度strokeStylestringsolid描边样式如solid、dashed等strokeColorcolorblack描边颜色strokeDasharraystring虚线数组形如4 2strokeLinecapstringbutt端点线帽可选butt/round/squarefillColorcolor无填充noPaint填充颜色默认不填充startArrowheadstringnone起点箭头样式startArrowheadSizenumber1起点箭头大小flipStartArrowheadbooleanfalse是否翻转起点箭头endArrowheadstringnone终点箭头样式endArrowheadSizenumber1终点箭头大小namestringdefaultPath形状名称ensureOnCanvasbooleantrue是否确保路径落在画布内值得注意的是strokeLinecap只对path、polyline、line等少数 SVG 元素生效packages/core/src/shapes/Path.ts 中的注释即引用了该约束。文档页中的属性表由 packages/docs-site/src/components/ShapeProps.vue 组件从shapedefs.json动态渲染而上述默认值则直接来自形状采样器源码两者保持一致。使用d定义 SVG 路径Path的形状体完全由d属性决定。Penrose 目前支持 SVG 的直线段命令M/L/Z与椭圆弧命令ASVG 命令的详细语义可参考 MDN 的d属性文档原文档引用此处不展开外部链接。在 Style 程序中你不需要手工书写 SVG 命令字符串而是把下列三个内置函数的返回值赋给d。折线或连续线段pathFromPointspathFromPoints(complete, [[x1, y1], [x2, y2], ..., [xn, yn]])complete取open保持路径开放不连接首尾或closed从最后一点画一条直线回到第一点并闭合第二个参数是有序点列表构成路径的全部顶点。源码实现位于 packages/core/src/lib/Functions.ts它先用PathBuilder将第一个点作为起点moveTo再对剩余每个点lineTo最后若pathType closed则closePath()。也就是说pathFromPoints生成的等价 SVG 命令序列为M x1 y1 L x2 y2 ... L xn yn闭合时追加Z。PathBuilder的moveTo、lineTo、closePath分别对应 SVG 的M、L、Z命令packages/core/src/renderer/PathBuilder.ts。典型用法来自仓库示例 packages/examples/src/exterior-algebra/exterior-algebra.styled: pathFromPoints(closed, [(0,0), u.p, u.pv.p, v.p])该行用四个点围成一个闭合平行四边形从原点出发沿向量u、uv、v依次连线闭合。pathFromPoints同样被用于绘制箭头引导线等场景如 packages/examples/src/alloy-models/generic/generic.style。椭圆弧arcarc(complete, start, end, radius, rotation, largeArc, arcSweep)各参数含义参数取值说明completeopen/closed同前是否闭合路径start[x, y]弧的起点坐标end[x, y]弧的终点坐标radius[rx, ry]长度为 2 的列表rx为沿 x 方向宽度的椭圆半径ry为沿 y 方向高度的半径rotationnumber椭圆绕自身中心旋转的角度度largeArc0/10画两段弧中较短的一段1画较长的一段arcSweep0/10从start到end逆时针绘制1顺时针绘制实现见 packages/core/src/lib/Functions.ts它调用PathBuilder的moveTo(start).arcTo(radius, end, [rotation, largeArc, arcSweep])arcTo生成 SVG 的A命令packages/core/src/renderer/PathBuilder.ts 起。largeArc与arcSweep两个标志位对应 SVGA命令的large-arc-flag与sweep-flag是决定走哪条弧的关键。相关能力若需要绘制圆心 半径 角度范围定义的圆弧仓库还提供了circularArc(pathType, center, r, theta0, theta1)packages/core/src/lib/Functions.ts其中theta0/theta1为弧度制的起止角并自动根据角度差计算largeArc与arcSweep。此函数不在原文档参数表中但同属arc的补充工具适合表示圆周上的局部弧段。经过三点的曲线interpolateQuadraticFromPointsinterpolateQuadraticFromPoints(pathType, p0, p1, p2)pathTypeopen保持路径开放closed从终点连线回起点p0起点p1中间点——与标准二次贝塞尔曲线不同标准贝塞尔曲线的中间控制点并不落在曲线上这条曲线会精确穿过p1p2终点。实现位于 packages/core/src/lib/Functions.ts。关键在于控制点的换算要让二次贝塞尔曲线穿过中间点p1控制点需取q1 2 * p1 - (p0 p2) / 2源码注释给出了推导思路——该表达式可由二次 Bernstein 基下的插值条件导出。随后调用quadraticCurveTo(q1, p2)生成 SVG 的Q命令packages/core/src/renderer/PathBuilder.ts。由于中间点是插值而非控制这条曲线特别适合绘制经过指定中点的光滑连线。典型用法仓库示例packages/examples/src/Dynamics/LyapunovExp.styled: interpolateQuadraticFromPoints(open, p1.vec, p2.vec, p3.vec)packages/examples/src/alloy-models/generic/generic.styled: interpolateQuadraticFromPoints(open, a, e.midpt, b)这里用边的中点e.midpt作为中间插值点绘制经过两点连线中点的平滑弧线是典型的连边曲线写法。从路径数据到 SVG 输出渲染链路Path形状的渲染实现在 packages/core/src/renderer/Path.ts。核心函数toPathStringpackages/core/src/renderer/Path.ts把PathCmd列表拼接成 SVG 的d字符串坐标类型的子路径CoordV会先经过toScreen做画布坐标换算数值类型的子路径ValueV如弧的半径、旋转角、标志位直接透传最终形如M x1 y1 L x2 y2 ...。渲染时的几个细节描边与填充通过attrStroke/attrFill把strokeColor、strokeWidth、fillColor等属性映射到 SVG 元素上路径默认不填充fillColor为noPaint因此纯d绘制的折线默认呈现为线框箭头支持当startArrowhead或endArrowhead非none时渲染器会创建一个g分组为路径挂上marker-start/marker-endpackages/core/src/renderer/Path.ts因此Path可以直接当作带箭头的连边使用其余属性透传attrAutoFillSvg会把未显式处理的形状属性自动映射为 SVG 属性。测试用例对上述函数的调用也有直接佐证例如 packages/core/src/lib/tests/Queries.test.ts 与 packages/core/src/engine/BBox.test.ts 都以compDict.pathFromPoints.body(context, open, [...])的方式构造路径数据参与断言说明这些构造函数既服务于渲染也参与引擎的包围盒BBox计算与查询。Style 中的综合示例把三个构造函数组合起来即可构造一张闭合多边形 弧线 插值曲线的复合图形。以下代码基于仓库示例的写法整理-- 折线闭合四边形 shape quad Path { d: pathFromPoints(closed, [(0,0), (100,0), (100,80), (0,80)]) strokeColor: #ff0000 strokeWidth: 2.0 fillColor: rgba(255, 0, 0, 0.1) } -- 椭圆弧从 (120, 0) 到 (220, 0)沿半短轴为 40 的椭圆顺时针画短弧 shape halfRing Path { d: arc(open, (120, 0), (220, 0), [50, 40], 0.0, 0, 1) strokeColor: #0000ff strokeWidth: 1.5 } -- 插值曲线精确穿过中间点 (200, 60) shape curve Path { d: interpolateQuadraticFromPoints(open, (120, 0), (200, 60), (220, 0)) strokeColor: #00aa00 endArrowhead: arrow endArrowheadSize: 1.2 }要点总结d只接受pathFromPoints、arc、interpolateQuadraticFromPoints以及仓库中同族的quadraticCurveFromPoints、cubicCurveFromPoints、circularArc等的返回值不要直接传字符串三个构造函数的complete/pathType参数统一取open或closed坐标与半径都可以是 Style 中的表达式如向量运算u.pv.p、e.midptPenrose 会在优化求解后把最终数值写入路径数据如需绘制带箭头的路径如算法示意图中的有向连线组合endArrowhead/startArrowhead即可无需额外声明 marker。延伸阅读形状定义与默认属性packages/core/src/shapes/Path.ts三个构造函数的完整实现packages/core/src/lib/Functions.tsSVG 命令的构建器M/L/Q/C/A等packages/core/src/renderer/PathBuilder.ts路径渲染与d字符串生成packages/core/src/renderer/Path.ts仓库中更多真实用法packages/examples/src/Dynamics/LyapunovExp.style、packages/examples/src/exterior-algebra/exterior-algebra.style、packages/examples/src/alloy-models/generic/generic.style赞分享开发工具数据可视化【免费下载链接】penroseCreate beautiful diagrams just by typing notation in plain text.项目地址https://gitcode.com/gh_mirrors/pe/penrose点击查看免费下载相关推荐BabelDOC路径绘制直线、曲线、矩形等图形BabelDOC路径绘制直线、曲线、矩形等图形 在文档处理过程中图形元素的精确渲染是保证排版质量的关键环节。BabelDOC作为一款功能强大的文档翻译工具人工智能AI 应用NLP计算机视觉CADmium草图功能详解线条/矩形/圆形/圆弧绘制技巧CADmium草图功能详解线条/矩形/圆形/圆弧绘制技巧 概述 CADmium是一款基于浏览器的现代CAD计算机辅助设计程序其草图功能是构建3D模型的基3D建模前端图形学WebAssembly桌面应用Plotly.py 多条曲线平均值绘制指南用 Scatter 叠加原始曲线与平均曲线Plotly.py 多条曲线平均值绘制指南用 Scatter 叠加原始曲线与平均曲线 导读 在数据分析与数学可视化中经常需要把两条或多条函数曲线叠加在同一坐数据可视化数据分析上一篇用 kubequery 将 Kubernetes 集群纳入 Fleet 的 osquery 遥测体系完整部署与查询指南下一篇10万亿 tokens 训练的语言模型Granite-3.0-3B-A800M-Base训练数据大揭秘创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考