推薦閱讀: 沒做過流程圖可視化,又突然接到神奇需求的選手~
最近公司需要做一個內部使用的機器學習平臺,
看了一下需求,有類似單向無環圖的內容
img1.jpg
參考了一下國內外大廠的成品,
自己嘗試做了一下,
教程1講解節點實現, 節點連線實現, 節點拖動模擬,連線拖動模擬教程2預計實現右鍵菜單,節點增刪,連線增刪.教程3預計實現繪圖板放縮,重定位,橡皮筋選框,最后給出完成代碼.教程一實現結果圖:
一期模擬.gif
點擊藍字跳轉github地址''https://github.com/murongqimiao/DAGBoard
現在教程已更新到新版, 完整demo點我
一、節點的實現
靈魂繪圖師上線 ~~~因為svg的事件操作比canvas的事件實現起來更直觀、簡潔,所以整體使用了svg,
{
name: "name1",
description: "description1",
id: 1,
parentNode: 0,
childNode: 2,
imgContent: "",
parentDetails: {
a: "",
b: ""
},
linkTo: [{ id: 2 }, { id: 3 }],
translate: {
left: 100,
top: 20
}
}
此為初版的節點數據結構, 利用translate定位每個節點的位置.step5后替換為
{
name: "name2",
id: 2,
imgContent: "",
pos_x: 300,
pos_y: 400,
type: 'constant',
in_ports: [0, 1, 2, 3, 4],
out_ports: [0, 1, 2, 3, 4]
}
二、節點連線的實現
節點間的連接線.png
<path
class="connector"
v-for="(each, n) in item.linkTo" :key="n"
:d="computedLink(i, each, n)"></path>
基于vue實現所以直接用了:d 動態計算貝塞爾曲線,
點擊->關于貝塞爾曲線可參考https://brucewar.gitbooks.io/svg-tutorial/15.SVG-path%E5%85%83%E7%B4%A0.html
三、節點拖拽的實現
具體建議在github clone一下代碼查看, 注釋非常詳細.
dragPre(e, i) {
// 準備拖動節點
this.setInitRect(); // 初始化畫板坐標
this.currentEvent = "dragPane"; // 修正行為
this.choice.index = i;
this.setDragFramePosition(e);
},
mousedown時獲取拖拽元素的下標,修正坐標
<g
:transform="`translate(${dragFrame.posX}, ${dragFrame.posY})`"
class="dragFrame">
<foreignObject width="180" height="30" >
<body xmlns="http://www.w3.org/1999/xhtml">
<div
v-show="currentEvent === 'dragPane'"
class="dragFrameArea">
</div>
</body>
</foreignObject>
</g>
dragIng(e) {
if (this.currentEvent === "dragPane") {
this.setDragFramePosition(e);
// 模擬框隨動
}
},
setDragFramePosition(e) {
const x = e.x - this.initPos.left; // 修正拖動元素坐標
const y = e.y - this.initPos.top;
this.dragFrame = { posX: x - 90, posY: y - 15 };
}
拖動時給模擬拖動的元素賦值位置
dragEnd(e) {
// 拖動結束
if (this.currentEvent === "dragPane") {
this.dragFrame = { dragFrame: false, posX: 0, posY: 0 };
this.setPanePosition(e); // 設定拖動后的位置
}
this.currentEvent = null; // 清空事件行為
},
setPanePosition(e) {
const x = e.x - this.initPos.left - 90;
const y = e.y - this.initPos.top - 15;
const i = this.choice.index;
this.DataAll[i].translate = { left: x, top: y };
},
拖動結束把新的位置賦值給對應元素
當然在實際項目中, 每次變更需要跟后臺交互這些數據, 不需要前端模擬數據變更的,直接請求整張圖的接口重新渲染就好了,更easy
四、節點連線拖拽的實現
和step3類似,在step4中我們也是通過監聽mousedown mousemove 與 mouseup這些事件.來實現節點間連線的拖拽效果.
<g>
<path
class="connector"
:d="dragLinkPath()"
></path>
</g>
首先來個path
setInitRect() {
let { left, top } = document
.getElementById("svgContent")
.getBoundingClientRect();
this.initPos = { left, top }; // 修正坐標
},
linkPre(e, i) {
this.setInitRect();
this.currentEvent = "dragLink";
this.choice.index = i;
this.setDragLinkPostion(e, true);
e.preventDefault();
e.stopPropagation();
},
mousedown修正坐標
dragIng(e) {
if (this.currentEvent === "dragLink") {
this.setDragLinkPostion(e);
}
},
mousemove的時候確定位置
linkEnd(e, i) {
if (this.currentEvent === "dragLink") {
this.DataAll[this.choice.index].linkTo.push({ id: i });
this.DataAll.find(item => item.id === i).parentNode = 1;
}
this.currentEvent = null;
},
setDragLinkPostion(e, init) {
// 定位連線
const x = e.x - this.initPos.left;
const y = e.y - this.initPos.top;
if (init) {
this.dragLink = Object.assign({}, this.dragLink, {
fromX: x,
fromY: y
});
}
this.dragLink = Object.assign({}, this.dragLink, { toX: x, toY: y });
},
mouseup的時候判斷連入了哪個元素
五、整合以上步驟, 組件抽離
隨著內容的增多,我們需要把所有內容整合, 基于耦合內容對組件進行分割,具體可看目錄結構
step目錄結構.png
所有的連線變成arrow組件,只繼承坐標位置用以渲染simulateFrame和simulateArrow只動態繼承拖拽時的坐標,用以模擬拖拽效果
