编辑组件

组件添加与编辑

添加组件

在编辑区左侧的状态栏，素材板块内有「组件」、「图标」、「图片」和「页面」，您可以点击打开对应的素材面板，添加您需要的组件。

重命名组件

• 选中组件后，可以在右侧的外观设置面板中双击组件名称修改组件命名。

• 也可以在左侧目录中，打开图层，找到您需要修改的组件，双击进行重命名。

显示/隐藏组件

选中组件，可以在编辑区右侧的外观设置面板中点击「小眼睛」图标设置显示或隐藏组件。您也可以使用快捷方式操作：显示与隐藏组件快捷键 - Ctrl+Shift+H

注：隐藏组件后需要在左侧图层位置选中元素后才可以显示组件。

锁定/解锁组件

选中组件后，可以在页面编辑区顶部工具栏或者右侧的外观设置面板中点击「小锁」图标来锁定或解锁组件。

组合/打散组件

多选组件后，可以在编辑区的顶部工具栏中对它们进行打散和组合。您也可以使用快捷方式操作：

• 组合 Mac：Cmd+G （group） Windows：Ctrl+G（group）
• 取消组合 Mac：Command+Shift+G（Group） Windows：Ctrl+Shift+G（Group）

整理组件

使用智能间距整理组件

使用智能间距整理组件，可以快速整理两个及以上的元素之间的排列。还能一键调整间距。

智能排列中的元素不需要相同的大小，如果元素之间的间距不相同，可以先使用整理功能重新排列元素的统一间距。

手动整理组件

目前整理功能的逻辑是根据最左侧元素与下一个元素的间距为准，调整其他元素之间的间距。

选中元素后，将鼠标hover到选区上将会出现一个整理图标。

您可以整理水平间距、整理垂直间距、整理水平&垂直间距

调整元素之间的间距

将元素整理好后，可以拖拽每个元素之间垂直或水平间距来进行调整。

1.将鼠标悬停在元素之间的线条上；

2.光标所在位置会出现一个方向箭头（上下方向调整垂直间距，左右方向调整水平间距），单击并拖动鼠标即可调整间距。

向上减少元素间的垂直间距，向下则增加元素间的垂直间距 向左减少元素间的水平间距，向右则增加元素间的水平间距

等比例缩放组件

选中组件或组合后，按住shift拖动四角端点即可等比例缩放。

注：目前文字组件不支持等比例缩放，需要单独修改。

智能填充

墨刀支持对组件进行文字和图片内容的智能填充，不必费心搜集、上传资源内容，点击即可生成随机内容，有效提高工作效率，丰富您的原型文件。

智能填充入口

打开智能填充面板的方式有两个：

1. 更多->编辑->智能填充

2. 选中包含文本/图片元素-＞右键->智能填充

智能填充面板打开后会常驻在工作区，可以在面板右上角选择关闭。

已有组件的内容填充

在画布中选中能够承载文字/图片的组件，并在智能填充面板上点击需要的内容分类，即可随机生成内容。

如果首次填充的内容无法满足您的需求，可以多次点击某个分类进行切换。

在文字填充板块，点击分类右侧的【更多】按钮，能够筛选填充的具体形式，如「姓名」可筛选「中文、英文、昵称」等。根据您的使用记录，会自动记录保存设置项，方便后续直接使用。

内置组件的内容填充

针对墨刀内置的部分特殊组件，如下拉菜单、单选/多选等，使用智能填充后会自动随机填充所有选项内容；

表格/单独选择表格里的内容也能够使用智能填充；

轮播图组件则会随机填充N张图片（根据目前的图片数量确定）。

内容直接置入

不选中任何组件时，双击智能填充中的资源分类，即可直接将文字/图片内容作为一个新的组件置入页面，继续点击也能够切换填充的具体内容。

使用属性复制编辑组件

属性复制功能可以理解为格式刷，可以快速复制某一元素的属性粘贴到另一元素中。

比如我们想要把画布内矩形的属性直接复制到圆形内，可以通过快捷键Ctrl+C（Mac： conmand+C）复制后，再Ctrl+alt+V（Mac：conmand+option+V）粘贴属性即可。

或者可以选中元素后右键选择复制属性，在另一元素中右键选择粘贴属性。

修改组件颜色

在原型中可以使用颜色选择器对各类组件进行颜色设置。

颜色填充共有纯色填充、线性渐变、径向渐变三种形式，其中线性渐变和径向渐变仅支持对图形、图标、卡片批注等填充时使用。

填充模式可以在颜色选择器顶部进行切换。

您也可以点击查看视频演示：渐变色教程视频

纯色填充

纯色填充即只支持一种颜色值。

可以通过色板直接选取颜色，还可以在色板右上角切换至【色彩空间】自由取色，或是使用颜色代码获取想要的颜色，并能够修改颜色的透明度。

单击左侧的「吸管」按钮可以进行吸色，支持吸取工作区的任意颜色。

也可以直接使用预设的颜色，点击色板下拉按钮，有多种配色可供使用，也能在这里查看【我的收藏】。

小帖士：不用调起颜色面板，选中元素后，可以直接使用快捷键I（i）启动取色功能，为选中元素填色， 不要太方便！

线性渐变

线性渐变，就是多个颜色以直线的路径进行渐变，可以修改这条直线上任意点的颜色让其进行自然过渡。

1. 调节渐变颜色：选择进入线性渐变后，顶部会出现一个滑动色条，色条上的按钮为渐变中的颜色；
2. 调节渐变范围：显示为蓝色的按钮即为当前选中的按钮，可以左右拖拽以更改这一颜色在渐变中的范围，也能够修改颜色；
3. 调节渐变参数：选中组件，并打开颜色选择器后，能看到组件中出现渐变路径直线，可以拖拽两端，调整路径长度、位置、角度，也可以拖拽路径上的渐变色点，调整其位置。
4. 反向渐变：点击色条右侧的按钮，可以进行反向渐变。

• 在色条任意位置点击，即能添加按钮；
• 在预设颜色中，也提供了线性渐变的色库，可以直接使用。

径向渐变

径向渐变，即多个颜色以圆形从圆心到边缘扩散的渐变效果，可以修改圆（或椭圆）的半径、偏心率与圆心的位置控制渐变效果，可以实现类似光源的视觉效果。

选中组件，并打开颜色选择器后，能看到组件中出现渐变路径，共有三点可以调整渐变的路径效果，它们分别确定圆（或椭圆）的圆心位置、半径及偏心率。

在预设颜色中，也提供了径向渐变的色库，可以直接使用。

我的收藏

当需要多次复用某一颜色时，可以打开颜色选择器，切换至【我的收藏】，点击右侧的「加号」按钮，即可将当前的颜色（包括渐变色）保存，跨文件也能复用哦～

安装取色器插件

在Windows浏览器中使用取色器时，需要先安装插件才可以取色，安装方法如下：

1. 下载取色器插件并解压安装包

2. 在Chrome/Edge浏览器右上角点击 “更多” > 扩展程序 > 管理扩展程序

（QQ浏览器：“更多” > 应用中心，360极速浏览器：拓展程序 > 添加更多拓展程序 > 头像 > 我的拓展 ）

3. 打开右上角的 “开发者模式”，点击“加载已解压的扩展程序”，选择已解压的文件夹，即可安装完成

调整图片组件

当需要对图片组件的模糊、亮度、饱和度等内容进行调整时，选中图片，右上角工具栏会出现图片相关设置栏。

点击设置栏，在【滤镜】内就能对图片组件进行相关设置。

快捷键

1.快速复制组件的快捷操作：

Windows：Alt+鼠标拖拽
Mac：Option+鼠标拖拽

2.全选当前页面所有组件的快捷键：

Windows：单击页面内某一元素+Ctrl+A （all）
Mac：单击页面内某一元素+Command+A（all）

3.多选组件的快捷操作有两种：

Shift+鼠标点选
S +鼠标拖动框选

选中被盖住的组件

如果组件被盖住了，可以在要选择的组件位置点击鼠标右键，然后在弹出的面板中点击「选择图层」，选择相应的组件。

同时，您可以在编辑区左侧的元素列表中直接选中组件。