# 绘图设计页面

来源快照：`result_data_new_260518.json`

- 来源 ID：`1180704565771649133`
- 模块：绘图
- 目录：未分组
- space ID：`1175397201831559192`
- 原文链接：未提供
- 产品基线：未提供

## 正文

## 一、功能概述

绘图，即运用图文并重的技巧绘制架构图、流程图等图形，是一款无需花时间学习即可轻松制作出精美导图的应用。用户可以直接在线创建，保存并分享自己的思路。绘图文件是由各种图形元素组成，设计页面即提供一个可视化页面供用户更方便的去操作设计这些图形元素。

## 二、功能使用说明

进入“绘图设计页面”，功能区主要分为四部分（如图1）：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1180706305239244810&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

图1

### 2.1  顶部操作按钮区域

包含顶部最左侧、中间偏左和最右侧的操作按钮。依次可分为：

**2.1.1   最左侧的保存、素材库、快捷键、退出按钮（如图2）：**

![](https://weapp.eteams.cn/papi/file/preview?fileId=1180706301011886084&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

图2

**2.1.2   中间偏左的撤销、重做、刷新、图层置顶、图层置底、组合、取消组合、对齐方式、等距分布、格式刷、删除按钮（如图3）：**

撤销：支持撤销上一步操作

重做：支持将撤销过的操作重新恢复

刷新：重新加载当前页面

图层置顶：可在图形堆叠时，设置图形的图层顺序为最顶层

图层置底：可在图形堆叠时，设置图形的图层顺序为最顶层置底

组合：支持将多个图形设为组合

取消组合：可将已设为组合的元素取消组合

对齐：多选图形后，可设置图形以“左对齐”、“水平居中”、“右对齐”、“水平居中”、“垂直居中”、“底部对齐”的方式对齐

等距分布：多选图形后，支持一键自动调整多个图形的间距，实现等距分布

格式刷：复制所选内容的格式，应用到不同位置的内容中

删除：支持一键删除选中的所有图形

![](https://weapp.eteams.cn/papi/file/preview?fileId=1180706292304510980&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

图3

**2.1.3   最右侧的保存、预览、点击查看帮助按钮（如图4）：**

![](https://weapp.eteams.cn/papi/file/preview?fileId=1180706296682864643&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

图4

保存后页面配置固定，提示“保存成功”，预览会跳转到预览页面（如图5）：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1180706296708530181&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

图5

 

### 2.2  左侧功能面板区域

**2.2.1   ****包含基础常用的元素列表，可拖拽到画布区域中使用****（如图6）：**

![](https://weapp.eteams.cn/papi/file/preview?fileId=1180706305221935108&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

图6

**2.2.1.1   ****元素类型**

① 基础图形：即一般的矩形框图片框等（如图7）：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1180706296682864641&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

图7

② 连接图形：即常用的线条箭头等（如图8）：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1180706313854345221&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

图8

③ 高级图形：即一些特殊的符号比如网云图、括号、矩形矩阵等（如图9）：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1180706305239244800&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

图9

**2.2.2   ****绘图页面和画布大纲等功能面板****（如图10）：**

![](https://weapp.eteams.cn/papi/file/preview?fileId=1180706305221935110&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

图10

### 2.3  中间画布区域

画布显示参考线和网格，允许用户自由拖拽组件位置，调整组件宽高，且可以实时预览。

**2.3.1   选中单个元素**

元素边框高亮，自适应显示连接点、连接箭头、旋转箭头（如图11）：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1180706296824938503&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

图11

点击元素连接箭头，可复制组件（如图12）：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1180706309585043465&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

图12

长按组件连接箭头拖出连接线，支持连接到其他组件的连接点；拖动被链接的组件，连接箭头会跟随组件（如图13）：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1180706296612929536&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

图13

**2.3.1   选中多个元素**

可设置组合/取消组合，组合后整体边框高亮，自适应显示连接点、连接箭头、旋转箭头（如图14）：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1180706313979641861&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

图14

### 2.4  右侧属性面板

在画布内选中画布或者元素后，右侧属性面板可以调整相关属性配置、样式及交互效果。

**2.4.1   ****选中画布****（如图15）：**

![](https://weapp.eteams.cn/papi/file/preview?fileId=1180706301119905811&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

图15

**2.4.1   ****选中元素****（如图16）：**

![](https://weapp.eteams.cn/papi/file/preview?fileId=1180706305328693259&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

图16

## 三、使用注意点

如有，包括针对可能与上下游功能的联动、针对性能安全方面等

## 四、上下游关联功能点

如有，可以挂标题及其对应的简要说明、链接地址
