阅读 326

[day3] 用X6搭建一个简单的图形编辑器吧~

这是我参与更文挑战的第 3 天,活动详情查看:更文挑战


本期我们开始搭建一个简单的图形编辑器。

图形编辑和预览是组态软件必要的一部分,一个好的编辑器可以大幅减少自动化工程师的工作量。

开发环境配置

本项目前端部分使用 Vue.js 3.x + TypeScript + Vite,绘图引擎部分使用蚂蚁可视化团队的 X6

这里先简单介绍一下 X6:

X6 是图编辑引擎,特点是节点、边、等元素的定制能力非常强,经常用来构建流程图、ER 图、DAG 图、脑图等应用。

下图是 X6 的一个简单示例,以点线两种基本元件组成。 image.png 这正与组态软件绘图模块的核心组成不谋而合。

想看 le5le 搭建图形编辑器的同学,可以关注 alsmile核心库也是一个很优秀的绘图引擎。

使用上面提到的技术栈组合,最低支持的浏览器到 Edge。如果有对 IE11 的兼容需求,建议使用 Vue.js 2.x 版本

绘图引擎 X6 支持 IE11,但需要进行特殊配置。具体可参考:怎么兼容 IE

基础环境搭建这部分的实现比较简单,可以查看搭建第一个 Vite 项目X6 快速上手

X6 画布配置

这里给出一套完整的配置信息,想用的同学直接复制过去就好。

const graph = new Graph({
  panning: true, //画布拖拽
  grid: true,  //背景网格
  keyboard: true, //键盘事件
  background: false, //背景图片、背景颜色
  clipboard: true, // 剪贴板能力,开启后支持复制粘贴,并支持跨画布的复制粘贴
  history: true, //历史操作记录能力,开启后支持撤销和重做
  selecting: true, //点选/框选能力
  snapline: true, //对齐线,辅助节点排版
  mousewheel: true //滚轮缩放
})
复制代码

更详细的配置信息,可参考官方文档基础教程部分。

X6 功能实现代码片段

键盘快捷键

X6 自带了一个 Keyboard 配置,可以在创建画布时通过以下配置启用。

const graph = new Graph({
  keyboard: true,
})

// 等同于
const graph = new Graph({
  keyboard: {
    enabled: true,
  },
})
复制代码

也可以在创建画布后,调用 graph.enableKeyboard()graph.disableKeyboard() 来启用和禁用键盘事件。

if (graph.isKeyboardEnabled()) {
  graph.disableKeyboard()
} else {
  graph.enableKeyboard()
}
复制代码
全选(Ctrl+A)
graph.bindKey('ctrl+a', () => {
  const cells = graph.getCells(); // 先获取画布内全部节点和连线
  graph.select(cells); // 选中他们
})
复制代码
复制(Ctrl+C)

前提条件:启用 clipboard 配置

graph.bindKey('ctrl+c', () => {
  const cells = graph.getSelectedCells();
  graph.copy(cells)
})
复制代码
剪切(Ctrl+X)

前提条件:启用 clipboard 配置

graph.bindKey('ctrl+c', () => {
  const cells = graph.getSelectedCells();
  graph.copy(cells)
})
复制代码
粘贴(Ctrl+V)

前提条件:启用 clipboard 配置

graph.bindKey('ctrl+v', () => {
  graph.paste();
})
复制代码
撤销(Ctrl+Z)

前提条件:启用 history 配置

graph.bindKey('ctrl+z', () => {
  if(graph.canUndo()){
    graph.undo();
  }
})
复制代码
重做(Ctrl+Y)

前提条件:启用 history 配置

graph.bindKey('ctrl+y', () => {
  if(graph.canRedo()){
    graph.redo();
  }
})
复制代码
删除(Delete)
graph.bindKey('delete', () => {
  const cells = graph.getSelectedCells(); //先获取选中的节点和连线
  if (cells.length) {
    graph.removeCells(cells); //删掉选中的这些
    graph.resetSelection(); //清空选中节点列表,其实可能没必要
  }
})
复制代码
文章分类
前端
文章标签