# 必看教程:

# 功能介绍

整体界面

模块介绍

zk-view 整个编辑器界面分为6个功能模块,分别对应不同的功能实现,具体内容如下:

# ① 辅助工具

辅助工具

模块介绍

  • 工具模块主要对应图纸的基础功能以及全局的常用功能 保存、撤销、恢复
  • 分别对应图纸的保存、撤销上一步操作和恢复下一步操作

格式刷

  • 针对元素的颜色、边框、文字、背景等基础样式进行复制操作

排列对齐

  • 排列对齐功能可对单个或多个元素进行快捷对齐操作
    排列对齐

# ② 素材区

通过点击不同的单选按钮,进行元素和图纸的切换

素材区

模块介绍

素材区管理用户的所有元素和图纸资源,是用户重要的素材管理模块,在此实现对素材的使用、分享、保存等操作

元素和图纸都具有相似的功能特性,都具有文件夹、共享、保存等通用功能

  • 元素:是指图纸中的每一个图片、模型素材,是图纸的组成部分
  • 图纸:是指用户的网页、原型设计的最终展示页面部分

# 文件夹功能

  1. 创建文件夹
    创建文件夹

  2. 文件夹右键

  • 通过右键文件夹名称,可实现如下功能
    文件夹右键菜单
  • 删除文件夹:将连同文件夹内的资源一起删除
  • 重命名:重命名文件夹名称
  • 全部分享: 将文件夹中所有的个人元素全部批量分享
  • 全部取消分享: 将文件夹中所有个人分享的元素全部批量取消分享
  1. 文件夹搜索
    通过点击搜索框或输入文件夹名称进行选择,快捷定位到目录
    文件夹搜索功能

  2. 文件夹排序
    通过 长按 ctrl 键,使用鼠标拖拽文件夹,实现对文件夹的排序功能

# 素材管理功能

素材管理功能

  1. 素材筛选
    素材管理中可通过点击 我的、收藏、私有、共享快速筛选资源类型
    素材从所属用户角度可分为我的(个人上传、制作素材)和收藏(他人共享素材)
  • 我的素材:以紫色文字背景标识,并具有共享按钮(白色为私有模式,绿色为共享模式)
  • 收藏素材:以白色半透明文字背景标识,不具有共享按钮

素材从类型角度可以分为图片素材和模型素材

  • 图片素材:用户上传的png、jpg、svg等格式的图片文件,无法进行素材的编辑,以白色文字标识
  • 模型素材:用户通过图纸中绘制的元素保存的模型文件,可进行编辑操作,以绿色文字标识
  1. 素材预览
    左键单击素材,实现素材的预览
    素材预览
    如果是用户个人的素材,可在预览页面对素材的名称、标签、描述、分享等 各项信息进行修改
    重要:可通过点击预览页面作者右侧的放大镜搜索按钮,搜索该用户共享的所有素材

用户共享素材

  1. 素材右键菜单
    素材右键菜单
  • 设置画布背景:可将元素设置为画布的背景
  • 设置元素背景:在图纸中选中元素后,可将该元素设置为选中元素的背景
  • 复制图片标识:复制图片在平台中的地址,配置项中使用
  • 复制图片base64编码:复制图片的base64编码,vue组件配置项中使用
  • 删除元素:删除元素,删除的元素可在回收站中进行恢复
  • 移动到:可将素材移动到其他文件夹,也可拖动元素到对应文件夹实现相同功能
  1. 素材排序
    通过 长按 ctrl 键,使用鼠标拖拽元素,实现对元素的排序功能

  2. 素材广场:获取局域用户的共享素材

  3. 网络资源:获取互联网端用户的共享素材

# ③ 主功能区

主功能区

可通过点击菜单项 或 鼠标放置在功能项中通过 ctrl + 鼠标滚轮 进行快速功能栏切换

模块介绍

主功能区主要包含:

  • 开始:对元素的快捷操作以及部分拓展功能
  • 插入:插入基础的图形和其他相关组件
  • 绘图:通过画笔,绘制自由的线条
  • 图表:集成Echarts图表组件
  • vue组件:集成vue、ElementUI的自定义Vue组件
  • 帮助:集成回收站、教程文档等各项功能
  • 导出:包含图纸的工程文件导出以及图片素材导出功能
  • 下载:提供构建工具(nginx、vue工程模板)和数据源下载的功能

# ④ 管理栏

管理栏

模块介绍

  • 用户管理

  • 资源回收站

  • 文档教程

  • 云部署管理

  • 云分享管理

  • 数据源管理

  • 注销登录

  • 实时预览:实时显示画布的预览演示图,当用户保存图纸时,实时预览页面将进行实时热更新 实时预览的快速更新技巧: 打开实时预览窗口,无需关闭 编辑图纸内容后,通过ctrl + s 保存图纸后,预览窗口实时自动热更新

# ⑤ 配置区

配置区

模块介绍

配置区主要包含图纸的配置栏和元素的配置栏

当用户选中空白区域时,显示图纸配置栏,当选中元素后,将显示元素配置栏

图纸配置栏:

  • 图纸配置栏包含画布、数据源、节点树三个功能面板
  1. 画布:对画布进行样式的修改
  2. 数据源:对画布的数据源进行添加和管理
  3. 节点数:显示用户添加的所有元素,可通过点击节点选中图纸中对应的元素

元素配置栏: 元素配置栏的信息与被选中元素的类型有不同的显示面板和对应功能

  1. 样式:对选中元素进行样式的修改
  2. 动画:对选中元素进行动画配置
  3. 数据:对选中元素进行数据绑定的配置
  4. 配置:对选中元素进行个性化配置

# ⑥ 图纸工作区

图纸工作区

图纸工作区

图纸工作区是用户的主要操作区,包含右键菜单和较多快捷键使用

  • 右键菜单
  1. 右键空白区域时,包含以下菜单

右键空白区域时

  1. 右键图形时,根据不同的图形类型,菜单如下所示

右键图形时

  • 底部图纸栏

可通过鼠标滚轮切换不同的图纸

右键图形时

  • 调整缩放大小
  1. 通过 ctrl + 鼠标滚轮 缩放
  2. 通过底部滑块进行缩放
  3. 通过 ctrl + 空格键 自动缩放到合适大小
  • 调整图纸的位置
  1. 通过长按鼠标右键拖动,进行图纸可视区域位置的调整
  2. 通过鼠标滚轮进行上下位置的调整
  3. 通过 shift + 鼠标滚轮 进行左右位置的调整