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