开发工具数据可视化【免费下载链接】penroseCreate beautiful diagrams just by typing notation in plain text.项目地址https://gitcode.com/gh_mirrors/pe/penrose点击查看免费下载在 Penrose 中Circle是 Style 程序里最基础也最常用的形状之一用于把数学对象点、顶点、集合、节点等具象化为可优化、可渲染的圆形图元。本文以官方文档 Circle 参考页 为核心骨架结合penrose/core中 Circle 的类型定义、属性采样器、优化输入与 SVG 渲染实现以及euclidean等真实示例完整讲解 Circle 的全部属性、默认值与采样规则并给出可直接套用的 Style 写法。读完本文你将能够在自己的 Penrose 领域domain/风格style程序中精准地声明和定制圆形理解哪些属性会被优化器调整、哪些属性是写死的默认值以及它们最终如何映射到 SVGcircle元素。Circle 文档页的生成机制属性表从何而来packages/docs-site/docs/ref/style/shapes/circle.md的正文非常精炼核心只有一行组件调用ShapeProps shape-nameCircle /也就是说Circle 的完整属性清单并不是手写维护的而是由 ShapeProps.vue 在构建站点时动态渲染出来的它从../shapedefs.json读取shapeDefs[Circle]渲染一张三列表格PropertyTypeDefault由组件按行输出值的tag字段defaulted 属性显示具体值sampled 属性显示sampled这张表的判定逻辑值得注意shapedefs.json并非手写而是由 shapedefs.js 脚本自动生成。该脚本对每种形状调用两次sampleShape用不同随机种子采样然后逐属性比较两次采样结果若两次采样结果相同例如name、strokeWidth则该属性归入defaulted文档表格中显示其具体默认值若两次采样结果不同例如center、r、fillColor则该属性归入sampled文档表格中显示为斜体的sampled表示它由随机采样产生、并会被后续布局优化调整。站点仓库中对应 npm script 为build-shapedefs见 packages/docs-site/package.jsonbuild-shapedefs: shx rm -f ./src/shapedefs.json node ./scripts/shapedefs.js ./src/shapedefs.json因此读者看到的 Circle 属性表 从penrose/core的sampleCircle采样器实时推导出的权威定义文档与实现天然同步。Circle 的完整属性清单与默认值综合sampleCirclepackages/core/src/shapes/Circle.ts与接口分层packages/core/src/types/shapes.tsCircle 共包含 8 个对外属性属性类型默认 / 采样行为所属接口namestringdefaultCircle固定默认值NamedensureOnCanvasbooleantrue固定默认值NamedstrokeWidthnumber0固定默认值StrokestrokeStylestringsolid固定默认值StrokestrokeColorcolornoPaint()透明固定默认值StrokestrokeDasharraystring固定默认值StrokefillColorcolor采样RGB 各通道uniform(0.1, 0.9)alpha 固定0.5Fillcentervector采样x、y 分别在画布xRange/yRange上均匀随机Centerrnumber采样uniform(3, canvas.width / 6)Circle 独有其中 Circle 独有的属性只有一个r半径其余均来自四组可复用的接口组合Namedname与ensureOnCanvas是否强制保持图形完整位于画布内StrokestrokeWidth、strokeStyle、strokeColor、strokeDasharrayFillfillColorCentercenter即 SVG 语义中的圆心(cx, cy)。makeCirclepackages/core/src/shapes/Circle.ts则把sampleCircle的结果与 Style 匹配规则中显式给定的properties做浅合并并打上shapeType: Circle、空passthrough与默认path。这意味着凡是在 Style 里显式声明的属性都会覆盖上面的采样默认值未声明的属性则保留默认值或采样值。采样属性的底层机制seedrandom 与优化输入文档表格中标注为sampled的属性center、r、fillColor之所以每次渲染都不同是因为它们在采样阶段就被注册为可供布局优化器调节的“输入变量”。理解这一点需要看 Samplers.tssimpleContext(variation)以variation字符串为种子创建seedrandomPRNGSamplers.ts所以同一份 Substance Style 同一个 variation 种子总能复现同一组初始采样值每次makeInput调用都会创建一个ad.Variableinit分为Sampled带采样器与Pending占位两种sampleVector对圆心 x、y 分别使用uniform(...canvas.xRange)/uniform(...canvas.yRange)采样且stages: All——即这些变量在布局优化的所有阶段都参与sampleWidth对半径使用uniform(3, canvas.width / 6)采样最小不低于 3源码注释提醒当画布宽度过小时该采样会出错属已知边界条件sampleColor对 RGB 三通道在[0.1, 0.9]上采样alpha 固定为0.5。因此这些属性在 Style 中被省略时初始值来自随机采样随后由 Penrose 的优化引擎基于自动微分见 packages/core/src/engine/Autodiff.ts在约束满足过程中连续调整若在 Style 里显式赋值为常量如下面示例中的r : const.pointRadius则该属性成为固定常量不再参与优化。ensureOnCanvas: true的默认设置则保证优化器会尽量把圆约束在画布范围内。在 Style 中声明与定制 CirclePenrose 的 Style 匹配规则forallwith负责把 Substance 对象绑定到形状上。以下代码摘自真实示例 euclidean-teaser.style展示了如何在一条规则中同时创建Circle与Equation并把圆心的位置与 Substance 中的向量绑定forall Point p { p.x ? p.y ? p.vec (p.x, p.y) p.color Colors.black p.icon Circle { center: p.vec r : const.pointRadius fillColor : Colors.black strokeWidth : 0.0 strokeColor : Colors.black } p.text Equation { string : p.label fillColor : Colors.black fontSize : const.fontSize } ensure equal(signedDistance(p.text, p.vec), const.textPadding const.pointRadius) }关键要点center: p.vec把圆的圆心绑定到 Substance 对象p的vec向量上这是圆形与数学对象建立几何联系的常用手法r : const.pointRadius显式给定半径来自 style 中的const常量覆盖采样默认值使该圆保持固定大小fillColor、strokeWidth、strokeColor分别显式指定尤其strokeWidth : 0.0可得到无描边的实心圆点该文件同时展示了override p.icon Circle { ... }的用法euclidean-teaser.style即在多条规则间对同一p.icon进行覆盖重定义是 Style 语言实现“分层样式”的重要机制——例如先用默认规则画出所有点再用with条件匹配特殊对象如内心incenterIcon并覆盖其圆形样式。同样的写法还出现在 euclidean.style 与压缩版 euclidean.min.style 中可供对照参考。渲染管线Circle 如何变成 SVGcircleStyle 匹配与布局优化完成后圆形由 renderer/Circle.ts 渲染为原生 SVG 元素document.createElementNS(..., circle)其映射规则如下attrFillfillColor→ SVGfillattrCentercenter→ SVGcx/cy并结合canvasSize进行坐标换算attrStrokestrokeWidth、strokeStyle、strokeColor、strokeDasharray→ SVGstroke系列属性attrTitlename→ SVGtitle用于无障碍与悬停提示半径直接映射elem.setAttribute(r, Math.max(0, shape.r.contents).toString())——渲染层对半径做了Math.max(0, ...)保护避免负半径产生非法 SVG其余未被显式映射的属性如ensureOnCanvas等不会直接写入 SVGpassthrough机制见 types/shapes.ts允许把未知的 SVG 属性透传到最终元素上。ensureOnCanvas的作用发生在优化阶段它为圆心与半径生成约束使得圆在画布边缘不会“出界”。若希望某个圆不受此约束例如刻意画一个超出画布的大圆用于装饰在 Style 中显式写ensureOnCanvas: false即可覆盖默认值。小结Circle 的使用决策要点全部 9 个属性含shapeType由系统固定为Circle对外可配置的是name、ensureOnCanvas、strokeWidth、strokeStyle、strokeColor、strokeDasharray、fillColor、center、r固定默认值name、ensureOnCanvas、strokeWidth、strokeStyle、strokeColor、strokeDasharray六项随机采样值fillColor、center、r三项显式赋值即覆盖Style 中显式给出的属性不再参与采样与优化省略时采样值会在布局阶段被优化器连续调整可复现性同一variation种子下采样结果完全可复现seedrandom驱动渲染安全渲染层对半径做了非负保护center与画布尺寸共同决定cx/cy。在编写自己的 Style 时建议遵循euclidean系列示例的惯例把 Circle 的center与 Substance 向量绑定、r交给const常量统一控制、fillColor/strokeColor从全局调色板取值这样既能得到稳定的几何语义又能保持整套图风格一致。赞分享开发工具数据可视化【免费下载链接】penroseCreate beautiful diagrams just by typing notation in plain text.项目地址https://gitcode.com/gh_mirrors/pe/penrose点击查看免费下载相关推荐Penrose Rectangle 形状完全指南Style 属性、默认值与 SVG 渲染原理Penrose Rectangle 形状完全指南Style 属性、默认值与 SVG 渲染原理 导读 Penrose 允许你通过纯文本符号Substance开发工具数据可视化Automatisch 接入 Salesforce 连接Connected App 创建、OAuth 配置与源码级认证流程解析Automatisch 接入 Salesforce 连接Connected App 创建、OAuth 配置与源码级认证流程解析 本指南完整讲解如何在 Auto开发工具数据可视化Penrose Style 形状系统详解声明语法、画布约束与类型检查机制Penrose Style 形状系统详解声明语法、画布约束与类型检查机制 本篇技术指南以 Penrose 官方文档 形状总览 https://link.git开发工具数据可视化上一篇使用 AWS SDK for PHP 操作 Amazon DynamoDB从建表演示到 PartiQL 批量查询的完整示例指南下一篇如何用Resemble Enhance实现专业级AI音频去噪与增强5分钟快速上手指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考