前端桌面应用AI 应用MCP 服务【免费下载链接】open-pencilAI-native design editor. Open-source Figma alternative.项目地址https://gitcode.com/gh_mirrors/op/open-pencil点击查看免费下载本文围绕 Open-PencilAI 原生设计编辑器底部的绘图工具栏系统讲解矩形、椭圆、线条、画框Frame与区块Section的创建方式、快捷键、等比约束操作以及填充、描边、圆角与效果等属性面板的核心设置项。读完本文你将能够在 Open-Pencil 中熟练绘制基础矢量形状理解画框与区块的容器语义差异并能结合场景图数据结构精确控制每个图形的渲染细节。绘图工具总览从哪里找到这些工具Open-Pencil 的图形绘制入口集中在界面底部工具栏。选中其中任意一个工具后在画布上按住鼠标拖动即可创建对应形状松开鼠标完成绘制。底栏除了形状工具还包含画框与区块两类容器工具所有工具与快捷键对应关系如下工具快捷键结果矩形RectangleR矩形椭圆EllipseO椭圆线条LineL直线段画框FrameF其他对象的容器区块SectionS顶层容器多边形Polygon与星形Star不在底栏直接显示需要通过形状Shapes菜单进入选择。从源码实现看多边形与星形在创建时带有各自的默认几何参数创建形状的默认参数 中多边形默认pointCount 3即三角形星形默认pointCount 5且starInnerRadius 0.38五角星内径比例说明两者是同一套参数化多边形体系下的不同配置。保持比例的修饰键按住Shift键拖动即可约束形状的比例矩形拖出正方形椭圆拖出正圆线条吸附到0°、45°、90°方向。这是绘图工具类应用中最常见的等比约束行为便于快速绘制对称图形与正交辅助线。形状属性详解选中任意形状后可在属性面板中配置以下四大类属性。填充Relleno / Fill填充支持以下类型纯色Solid单一颜色实心填充线性渐变Linear沿一条直线方向渐变过渡径向渐变Radial从中心向四周扩散的渐变角向渐变Angular围绕中心点按角度旋转的渐变菱形渐变Diamond以菱形形态分布的渐变图像Image以图片作为填充内容。在场景图的数据模型中填充由Fill结构表达核心字段包括type填充类型、colorRGBA 颜色、opacity不透明度与visible可见性参见 场景图类型定义 中Fill相关字段。不同形状使用不同的默认填充常量定义 中矩形、椭圆、多边形、星形默认使用浅灰色DEFAULT_SHAPE_FILLRGB 0.83约 83% 灰线条默认使用纯黑色填充画框默认使用纯白色DEFAULT_FRAME_FILL区块则使用深灰色SECTION_DEFAULT_FILLRGB 0.37。这意味着新建一个矩形会立刻得到一个可见的浅灰底而画框则是白底容器方便直接放入内容。描边Contorno / Stroke描边属性提供完整的矢量轮廓控制粗细可设置统一粗细也可按四条边分别设置不同粗细颜色轮廓颜色对齐方式内对齐INSIDE、居中对齐CENTER、外对齐OUTSIDE三种对应场景图中的StrokeAlign类型见 StrokeAlign 定义端点Cap线条端点样式连接Join折线拐角处的连接样式虚线Dash通过dashPattern数组定义实虚交替的线段模式参见 dashPattern 字段。描边同样通过Stroke结构表达包含color、weight粗细、opacity、visible等字段。区块类型在创建时会自动附带一条默认描边SECTION_DEFAULT_STROKE浅灰色、1px用于勾勒出区块边界见 区块默认描边。圆角半径Radio de esquina / Corner Radius圆角半径支持两种模式统一圆角四个角使用同一个半径值独立圆角分别设置左上、右上、右下、左下四个角。该属性适用于矩形、画框、组件Component与实例Instance。在场景图数据中cornerRadius字段承载圆角数值见 cornerRadius 定义区块创建时默认写入cornerRadius 5见 区块创建逻辑。效果Efectos / Effects效果面板提供以下选项外阴影Drop Shadow对象向外投射的阴影内阴影Inner Shadow对象内部边缘的阴影图层模糊Layer Blur整层模糊背景模糊Background Blur对层内背景模糊前景模糊Foreground Blur对层内前景模糊。阴影类效果通常需要配合颜色、透明度、偏移与模糊半径参数使用模糊类效果则主要控制半径大小。画框与区块两种容器语义画框与区块都是容器但语义定位不同理解这一点对组织文档结构至关重要。画框Frame画框是普通容器将其他对象拖入画框内部这些对象会成为画框的子对象次级节点裁剪默认关闭即子对象可以溢出画框边界而不被隐藏画框支持自动布局Auto Layout可以启用弹性布局让子对象按规则排列。从场景图实现看画框通过reparentNode操作实现子对象的归属变更所有父-子关系都记录在图结构中参见 编辑器的结构操作。画框默认白色填充、无描边配合自动布局后即可搭建界面原型。区块Section区块是顶层容器绘制区块时与之重叠的对象会被自动收编为区块的子对象adopt 语义区块用于把画布上的零散对象归组为一个逻辑区域常用于组织页面分区。区块的自动收编逻辑在 区块收养实现 中遍历区块所在页面的所有同级对象凡是完整位于区块边界矩形内x/y/width/height完全被区块包围的对象都会被重新挂载到区块下并将其坐标从页面坐标系转换为区块的局部坐标系newX node.x - sx。该操作同时被记录为一条可撤销的Adopt into section操作方便回退见 收养流程。区块创建时带有默认深灰填充与浅灰描边、5px 圆角视觉上形成明显的分组区域标识这与画框白底无描边形成对比。从源码理解形状创建的底层流程形状创建的底层入口统一由createShapeActions提供参见 形状动作实现。其核心流程如下根据节点类型RECTANGLE、ELLIPSE、POLYGON、STAR、LINE、FRAME、SECTION、TEXT等查询对应的默认填充构建覆盖字段x、y、width、height、fills并为区块追加描边与圆角、为多边形/星形追加pointCount与starInnerRadius调用ctx.graph.createNode(type, parentId, overrides)在当前页面创建节点压入一条可撤销操作Create type撤销时删除节点并清理选中状态重做时按快照重新创建。这说明所有图形类型共用一套创建管线差异仅体现在默认覆盖字段上。因此当你绘制不同形状时属性面板中出现的默认值如星形的内径比例 0.38都来自这一统一入口可以预期地通过属性面板调整。与自动布局的衔接画框作为容器的一个重要能力是支持自动布局。启用自动布局后画框内的子对象不再依赖手动坐标而是按主轴与交叉轴规则自动排列。相关机制在 自动布局指南 中有完整说明本文不再展开。需要提醒的是自动布局只对画框生效区块与普通形状不参与布局计算因此规划界面结构时应优先使用画框。结语通过底栏的五个核心工具与形状菜单Open-Pencil 覆盖了从基础矢量图形到结构化容器画框、区块的全部绘制需求。绘制时善用Shift等比约束创建后利用属性面板的填充、描边、圆角与效果四项能力精细控制外观再通过画框的自动布局组织界面层级——这三步即可完成绝大多数界面原型的基础搭建。更深层的场景图数据模型Fill、Stroke、cornerRadius、dashPattern等字段为属性面板的每一项操作提供了可编程的底层支撑你也可以在 场景图类型定义 与 形状创建实现 中继续探索。赞分享前端桌面应用AI 应用MCP 服务【免费下载链接】open-pencilAI-native design editor. Open-source Figma alternative.项目地址https://gitcode.com/gh_mirrors/op/open-pencil点击查看免费下载相关推荐CommandlineConfig性能优化让你的配置读写速度快10倍的秘诀CommandlineConfig性能优化让你的配置读写速度快10倍的秘诀 CommandlineConfig是一个供用户以Python Dict或JSON格gg库绘图函数大全圆形、矩形、椭圆和多边形的终极指南gg库绘图函数大全圆形、矩形、椭圆和多边形的终极指南 想要在Go语言中轻松实现2D图形渲染吗gg库是您的完美选择作为纯Go语言编写的2D图形库gg提供简图形学CADmium草图功能详解线条/矩形/圆形/圆弧绘制技巧CADmium草图功能详解线条/矩形/圆形/圆弧绘制技巧 概述 CADmium是一款基于浏览器的现代CAD计算机辅助设计程序其草图功能是构建3D模型的基3D建模前端图形学WebAssembly桌面应用上一篇DeepTutor让AI成为你的私人学习导师智能问答与个性化辅导体验下一篇【免费下载】 调用百度网盘接口进行文件下载上传创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考