資訊專欄INFORMATION COLUMN
這個項目采用的是G6（阿里開源），由于現(xiàn)在已經(jīng)沒有維護了，導(dǎo)致很多的配置，參數(shù)，方法示例demo等都是自己摸索的，大概介紹下本案例中使用到的以及一些后續(xù)維護可能會用到的。
Editor 該類是整個編輯器的主控類，其主要職責(zé)是將編輯器的各個組件協(xié)同起來。
//實例化：
import G6Editor from "@antv/g6-editor"
const editor = new G6Editor()
//實例方法：
add // 可以理解為vue的添加組件
editor.add(this.flow)
save // 保存數(shù)據(jù)（Object類型，里面存放nodes以及edges，對應(yīng)節(jié)點和連線）
let data = this.flow.save()
read // 讀取數(shù)據(jù)
this.data && this.flow.read(this.data)
getGraph // 獲取流圖示例
this.graph = this.flow.getGraph()
getCurrentPage // 獲取當(dāng)前頁面
this.page = editor.getCurrentPage()
hideGrid // 背景以網(wǎng)格的形式呈現(xiàn)
this.page.hideGrid()
on // 事件監(jiān)聽
this.page.on("afteritemselected", e => { //處理數(shù)據(jù) })
Destory // 銷毀（相當(dāng)于vue的destoryed生命周期）
this.page.destory()
Flow 繼承自Editor的page，專用于構(gòu)建有向流程圖編輯器。
實例化：
new Editor.flow()
配置項
主要介紹下配置項，也是項目中用到最多的。
Graph G6圖的配置項，語雀上可以搜到。
Align 文本對齊。
Grid 網(wǎng)格線的配置
Shortcut 快捷鍵的配置
this.flow = new G6Editor.Flow({
graph: { container: this.$refs.flow },
align: { grid: true },// 網(wǎng)格對齊
grid: { cell: 10 },// 網(wǎng)孔尺寸
shortcut: {
zoomIn: true, // 開啟放大快捷鍵
zoomOut: true // 開啟視口縮小快捷鍵
}
})
節(jié)點的配置項
this.graph.node({
id: "node1", // id 必須唯一
color: "#333", // 顏色
size: 10 || [10, 10], // 尺寸 || [寬, 高]
shape: "circle", // 所用圖形
style: { // 關(guān)鍵形樣式（優(yōu)先級高于color）
fill: "red",
stroke: "blue"
},
label: "文本標簽" || { // 文本標簽 || 文本圖形配置
text: "文本標簽",
fill: "green"
},
parent: "group1", // 所屬組
index: 1, // 渲染層級
})
線的配置項
this.graph.edge({ id: "edge1", // id 必須唯一
source: "node1", // 源節(jié)點 id
target: "node2", // 目標節(jié)點 id
controlPoints: [{ // 控制點
x: 10, y: 10
}],
sourceAnchor: 0, // 源節(jié)點錨點
targetAnchor: 2, // 目標節(jié)點錨點
shape: "line", // 所用圖形
style: { // 關(guān)鍵形樣式（優(yōu)先級高于color）
fill: "red",
stroke: "blue"
},
label: "文本標簽" || { // 文本標簽 || 文本圖形配置
text: "文本標簽",
fill: "green"
},
labelRectStyle: { // 文本矩形底的樣式
fill: "blue"
},
parent: "group1", // 所屬組
index: 1, // 渲染層級
}),
狀態(tài)改變觸發(fā)的事件
flow.on("beforeitemselected", e=>{}); // 選中前
flow.on("afteritemselected", e=>{}); // 選中后
flow.on("beforeitemunselected", e=>{}); // 取消選中前
flow.on("afteritemunselected", e=>{}); // 取消選中后
數(shù)據(jù)改變觸發(fā)的事件
flow.on("beforechange", e=>{}); // 圖數(shù)據(jù)變更前
flow.on("afterchange", e=>{}); // 圖數(shù)據(jù)變更后
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/110015.html
摘要：的插件系統(tǒng)做的相當(dāng)完善可惜文檔沒有具體說到這里整理一下的插件插件大致分為四種類型行為可以理解為事件處理的插件就是和的樣式同樣是插件插件的布局之類這部分涉及的算法比較多插件就是自定義工具函數(shù)將其內(nèi)置中這四種插件都有各自的寫法以及但是文檔中沒有 G6的插件系統(tǒng)做的相當(dāng)完善, 可惜文檔沒有具體說到. 這里整理一下g6的插件. 插件大致分為四種類型: behaviour 行為, 可以理解為事...
摘要：準備好數(shù)據(jù)節(jié)點節(jié)點節(jié)點坐標節(jié)點坐標邊節(jié)點，從哪里出發(fā)節(jié)點，到哪里結(jié)束初始化對象容器渲染位置，表示渲染到圖表的中間位置畫布高渲染數(shù)據(jù)這是渲染出來的效果。鏈接線會以元素為基準。繪制元素時，需要在初始化對象的時候，指定。 hello world // 1. 準備好數(shù)據(jù) // node(節(jié)點) let nodes = [ { id: 1, // 節(jié)點 id ...
原文首發(fā)于我的博客，歡迎點擊查看獲得更好的閱讀體驗~ 更新內(nèi)容 最新版本 請關(guān)注G6官方的github倉庫https://github.com/antvis/g6 2.x版本后,可以通過npm install直接安裝使用了 相關(guān)資源下載 antV G6( v1.2.8) 字體圖標 最近我司項目中需要加入流程圖制作功能，于是乎百度各種找可視化繪制拓撲圖的輪子，大部分都是國外的，看...
原文首發(fā)于我的博客，歡迎點擊查看獲得更好的閱讀體驗~ 更新內(nèi)容 最新版本 請關(guān)注G6官方的github倉庫https://github.com/antvis/g6 2.x版本后,可以通過npm install直接安裝使用了 相關(guān)資源下載 antV G6( v1.2.8) 字體圖標 最近我司項目中需要加入流程圖制作功能，于是乎百度各種找可視化繪制拓撲圖的輪子，大部分都是國外的，看...
閱讀 2081·2021-11-02 14:48
閱讀 2760·2019-08-30 14:19
閱讀 2929·2019-08-30 13:19
閱讀 1296·2019-08-29 16:17
閱讀 3230·2019-08-26 14:05
閱讀 2986·2019-08-26 13:58
閱讀 3075·2019-08-23 18:10
閱讀 1102·2019-08-23 18:04
