# 功能介绍

### 画布功能

**画布属性：尺寸、预设大小、背景色。** 支持修改画布尺寸，也有预常用预设的画布尺寸，可以便捷设置，有背景色修改属性，同时提供常用颜色的快捷修改。&#x20;

<figure><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/044e2d09049f489f9341263862674fb9~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp" alt=""><figcaption></figcaption></figure>

**画布缩放：放大、缩小、自动适应、鼠标滚轮缩放。** 支持画布放大缩小操作，可按照1:1尺寸展示或自适应展示，页面窗口改变时会根据窗口大小自适应展示；滑动鼠标滚轮时可快捷缩放画布。

![20230415121804\_rec\_.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6950ef15074c494e9d277a5b46c2c9f2~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp)

![20230415122049\_rec\_.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/570f0c1bb2434593949b65234972f1b4~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp)

**其他细节：拖拽画布、画布区域外显示控制条。** 画布支持拖拽操作，按住alt快捷键，可以拖动画布；当元素拖拽到画布外区域时，仍然展示控制条，但元素并不会被展示出来，所见即所得。&#x20;

<figure><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9b050ef702a4449dbce41b27a525a7e2~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp" alt=""><figcaption></figcaption></figure>

### 辅助功能

**控制条：** 在满足元素缩放、旋转的基础上尽量让其简洁，提供了2种样式。&#x20;

<figure><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/69bba9a276e24db99653513bafb23f75~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp" alt=""><figcaption></figcaption></figure>

**标尺：** 标尺与辅助线可以满足我们更高要求的设计场景。&#x20;

<figure><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3489af30b75e4ecdbd037f7dddfbd10a~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp" alt=""><figcaption></figcaption></figure>

**快捷调整：** 图层管理、右键菜单、快捷键。 图层可以直观的定位元素的层级顺序，右键菜单提供了常用的快捷功能，还支持复制、删除等快捷键操作，提高操作效率。&#x20;

<figure><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/559b2176cb3e4ce0bc973d27cd58d705~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp" alt=""><figcaption></figcaption></figure>

### 基础元素

**字体元素：** 字体元素有普通字体、框字体，框字体可调整外边框，自动换行。&#x20;

<figure><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8b2dd53747534bbba5273787cced287a~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp" alt=""><figcaption></figcaption></figure>

**基础形状：** 有矩形、圆形、三角形、多边形，可直接点击或拖拽添加到画布。&#x20;

<figure><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cafa5a10f62049cdbd7a6f0d10760e29~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp" alt=""><figcaption></figcaption></figure>

**线条元素：** 支持箭头、线条元素绘制。&#x20;

<figure><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1209cdaee70b4f38b7eef8987d6d676d~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp" alt=""><figcaption></figcaption></figure>

**插入元素：** 支持插入多种图片类型，图片图片、SVG元素、SVG字符串。&#x20;

<figure><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ba18715bb24d46719d8883a90d127152~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp" alt=""><figcaption></figcaption></figure>

**自定义素材：** 素材在左侧分类展示，可定义图片素材、字体样式素材。&#x20;

<figure><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c97231aaa1f145f1965c1a7ee935e442~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp" alt=""><figcaption></figcaption></figure>

### 文件功能

**数据保存：** 支持导出/导出JSON文件方便存储数据，可自定义设计模板。&#x20;

<figure><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7ff449fe3b9b4f08b5e51f5072b164ae~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp" alt=""><figcaption></figcaption></figure>

**图片保存：** 可清空画布、预览图片、保存图片文件。&#x20;

<figure><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dd9b6eef8f2d46a284acccaa15710f39~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp" alt=""><figcaption></figcaption></figure>

### 属性设置

**基础操作：** 所有元素都可以在属性面板调整透明度、坐标、旋转角度。&#x20;

<figure><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/457b96af734d4a03bfeb003de4d04865~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp" alt=""><figcaption></figcaption></figure>

**锁定与组合：** 锁定元素后元素将不会收到其他操作影响；可将多个元素组合为一个组元素，也可以将组元素拆分为多个元素。&#x20;

<figure><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ed1d836659d849d0ba115a5ec2e3b959~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp" alt=""><figcaption></figcaption></figure>

**元素对齐：** 单个元素支持相对于画布的水平、垂直、水平垂直居中，多个元素支持上、下、左、右对齐，水平居中、垂直居中、垂直平均分布、水平平均分布功能。  \*\*自定义字体：\*\*可自定义字体、对齐方式、行高、背景色、下划线、删除线等信息。&#x20;

<figure><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4eae4c5d03474d28b25fa64e82ef87e4~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp" alt=""><figcaption></figcaption></figure>

<figure><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b71eae7cab77489d8ffb51edb3c66f11~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp" alt=""><figcaption></figcaption></figure>

**渐变配置：** 渐变是设计的重要形式之一，支持为元素、字体设置渐变颜色。&#x20;

<figure><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/daf12add8983481cb2a11bcd0a33614e~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp" alt=""><figcaption></figcaption></figure>

**边框设置：** 支持为元素增加边框样式。&#x20;

<figure><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/349ce94cbc0f4aae99ec59d72ea73346~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp" alt=""><figcaption></figcaption></figure>

**图片操作：** 快捷替换、简单滤镜、复杂滤镜。&#x20;

<figure><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4998294d7f11404fad58321bfb4f22ae~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp" alt=""><figcaption></figcaption></figure>

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f21f01ec7ccd40458693d0e0b8cb43a7~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp)

###


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://nihaojob.gitbook.io/editor/gong-neng-jie-shao.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
