「这是我参与2022首次更文挑战的第4天，活动详情查看：2022首次更文挑战」
系列文章
前言
通过前几天的学习，我们已经实现了Antv X6 流程在线编辑器的大致流程，今天我们把右侧编辑栏来实现了吧！
官网：Antv/X6
项目代码: vue-antvx6
右侧编辑栏
右侧编辑栏使用了ViewUI框架，来实现右侧操作栏的简单操作。
// 安装
npm install view-design --save
在main.js内引入：
import ViewUI from 'view-design';
import 'view-design/dist/styles/iview.css';
Vue.use(ViewUI);
新建一个vue文件：RightDrawer.vue 存放右侧编辑栏内容
<template>
<div class="drawer_container">
<div v-if="drawerType === 'grid'">
<div class="drawer_title">画布背景设置</div>
<div class="drawer_wrap">
<Form label-position="left" :label-width="85">
<FormItem label="是否显示网格" :label-width="100">
<i-switch v-model="showGrid" @on-change="changeGrid" />
</FormItem>
<div v-show="showGrid">
<FormItem label="网格类型">
<RadioGroup v-model="grid.type" @on-change="changeGridType">
<Radio v-for="item in gridTypeList" :label="item.value" :key="item.value">
<span>{{item.label}}</span>
</Radio>
</RadioGroup>
</FormItem>
<FormItem label="网格大小">
<Slider v-model="grid.size" :min="0" :max="30" @on-change="changeGrid"></Slider>
</FormItem>
<FormItem label="网格颜色">
<ColorPicker v-model="grid.args.color" @on-change="changeGrid"/>
</FormItem>
<FormItem label="网格线宽度">
<Slider v-model="grid.args.thickness" :min="0" :max="20" @on-change="changeGrid"></Slider>
</FormItem>
</div>
</Form>
</div>
</div>
</template>
根据自己的需求定制编辑栏内容，这里只提供了画布设置的示例。
相关配置
-
网格类型
| 类型 | 描述 |
|---|---|
| dot | 点状网格 |
| fixedDot | 固定网点大小的点状网格 |
| mesh | 网状网格 |
| doubleMesh | 双线网状网格 |
用法示例：(以dot类型为例)
new Graph({
container: this.container,
grid: {
visible: true,
type: 'dot',
args: {
color: '#a0a0a0', // 网格线/点颜色
thickness: 1, // 网格线宽度/网点大小
},
},
})
-
网格大小
创建画布时，通过size来设置网格大小。
用法示例：
const graph = new Graph({
grid: {
size: 10,
},
})
创建画布后，使用setGridSize()方法修改网格大小并触发网格重绘。
graph.setGridSize(30)
结语
编辑器系列就全部完毕啦，写的不够详细，还有许多细节仍需补充和学习，让我们在使用的时候自行查看文档吧！
