這篇文章主要介紹“如何利用vue3.x繪制流程圖”的相關(guān)知識(shí)，小編通過(guò)實(shí)際案例向大家展示操作過(guò)程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“如何利用vue3.x繪制流程圖”文章能幫助大家解決問(wèn)題。
在北塔等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場(chǎng)前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作 網(wǎng)站設(shè)計(jì)制作按需求定制開(kāi)發(fā),公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),成都品牌網(wǎng)站建設(shè),成都營(yíng)銷網(wǎng)站建設(shè),外貿(mào)網(wǎng)站制作,北塔網(wǎng)站建設(shè)費(fèi)用合理。
下面是效果圖：
整體結(jié)構(gòu)布局：
需要實(shí)現(xiàn)的功能列表：
節(jié)點(diǎn)與連接線的可配置
[
{
'id': '', // 每次渲染會(huì)生成一個(gè)新的id
'name': 'start', // 節(jié)點(diǎn)名稱，也就是類型
'label': '開(kāi)始', // 左側(cè)列表節(jié)點(diǎn)的名稱
'displayName': '開(kāi)始', // 渲染節(jié)點(diǎn)的顯示名稱（可修改）
'className': 'icon-circle start', // 節(jié)點(diǎn)在渲染時(shí)候的class，可用于自定義節(jié)點(diǎn)的樣式
'attr': { // 節(jié)點(diǎn)的屬性
'x': 0, // 節(jié)點(diǎn)相對(duì)于畫(huà)布的 x 位置
'y': 0, // 節(jié)點(diǎn)相對(duì)于畫(huà)布的 y 位置
'w': 70, // 節(jié)點(diǎn)的初始寬度
'h': 70 // 節(jié)點(diǎn)的初始高度
},
'next': [], // 節(jié)點(diǎn)出度的線
'props': [] // 節(jié)點(diǎn)可配置的業(yè)務(wù)屬性
},
// ...
]// next
[
{
// 連接線的id
'id': 'ee1c5fa3-f822-40f1-98a1-f76db6a2362b',
// 連接線的結(jié)束節(jié)點(diǎn)id
'targetComponentId': 'fa7fbbfa-fc43-4ac8-8911-451d0098d0cb',
// 連接線在起始節(jié)點(diǎn)的方向
'directionStart': 'right',
// 連接線在結(jié)束節(jié)點(diǎn)的方向
'directionEnd': 'left',
// 線的類型（直線、折線、曲線）
'lineType': 'straight',
// 顯示在連接線中點(diǎn)的標(biāo)識(shí)信息
'extra': '',
// 連接線在起始節(jié)點(diǎn)的id
'componentId': 'fde2a040-3795-4443-a57b-af412d06c023'
},
// ...
]// props
[
{
// 表單的字段
name: 'displayName',
// 表單的標(biāo)簽
label: '顯示名稱',
// 字段的值
value: '旅客運(yùn)輸',
// 編輯的類型
type: 'input',
// 屬性的必填字段
required: true,
// 表單組件的其它屬性
props: {
placeholder: 'xxx'
}
},
// ...
]對(duì)于下拉選擇的數(shù)據(jù)，如果下拉的數(shù)據(jù)非常多，那么配置保存的數(shù)據(jù)量也會(huì)很大，所以可以把所有的下拉數(shù)據(jù)統(tǒng)一管理，在獲取左側(cè)的配置節(jié)點(diǎn)的信息時(shí)，將所有的下拉數(shù)據(jù)提取出來(lái)，以 props 的 name 值為 key 保存起來(lái)，在用的時(shí)候用 props.name 來(lái)取對(duì)應(yīng)的下拉數(shù)據(jù)。
另外還需要配置連接線的屬性，相對(duì)于節(jié)點(diǎn)的屬性，每一個(gè)節(jié)點(diǎn)的屬性都有可能不一樣，但是連接線在沒(méi)有節(jié)點(diǎn)的時(shí)候是沒(méi)有的，所以我們要先準(zhǔn)備好連接線的屬性，在連接線生成的時(shí)候，在加到連接線的屬性里去。當(dāng)然我們可以把連接線的屬性設(shè)置為一樣的，也可以根據(jù)節(jié)點(diǎn)的不同來(lái)設(shè)置不同連接線的屬性。
最后使用的方式：
import { ref } from 'vue'
import Workflow from '@/components/workflow'
import { commonRequest } from '@/utils/common'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRoute } from 'vue-router'
const route = useRoute()
const processId = route.query.processId // || 'testca08c433c34046e4bb2a8d3ce3ebc'
const processType = route.query.processType
// 切換的當(dāng)前節(jié)點(diǎn)
const getActiveComponent = (component: Record) => {
console.log('active component', component)
}
// 切換的當(dāng)前連接線
const getActiveLine = (line: Record) => {
console.log('active line', line)
}
const workflowRef = ref>()
// 獲取配置的節(jié)點(diǎn)列表
const getConfig = () => {
commonRequest(`/workflow/getWorkflowConfig?processType=${processType}`).then((res: Record) => {
// 需要把所有的屬性根據(jù)name轉(zhuǎn)換成 key - value 形式
const props: Record = {}
transferOptions(res.result.nodes, props)
// 設(shè)置左側(cè)配置的節(jié)點(diǎn)數(shù)據(jù)
workflowRef.value?.setConfig(res.result)
getData(props)
})
}
// 獲取之前已經(jīng)配置好的數(shù)據(jù)
const getData = (props: Record) => {
commonRequest(`/workflow/getWfProcess/${processId}`).then((res: Record) => {
// 調(diào)整屬性，這里是為了當(dāng)配置列表的節(jié)點(diǎn)或者屬性有更新，從而更新已配置的節(jié)點(diǎn)的屬性
adjustProps(props, res.result.processJson)
// 設(shè)置已配置好的數(shù)據(jù)，并渲染
workflowRef.value?.setData(res.result.processJson, res.result.type || 'add')
})
}
const init = () => {
if (!processId) {
ElMessageBox.alert('當(dāng)前沒(méi)有流程id')
return
}
getConfig()
}
init()
const transferOptions = (nodes: Record[], props: Record) => {
nodes?.forEach((node: Record) => {
props[node.name] = node.props
})
}
const adjustProps = (props: Record, nodes: Record[]) => {
nodes.forEach((node: Record) => {
const oldProp: Record[] = node.props
const res = transferKV(oldProp)
node.props = JSON.parse(JSON.stringify(props[node.name]))
node.props.forEach((prop: Record) => {
prop.value = res[prop.name]
})
})
}
const transferKV = (props: Record[]) => {
const res: Record = {}
props.forEach((prop: Record) => {
res[prop.name] = prop.value
})
return res
}
節(jié)點(diǎn)的拖拽與渲染及連接線的繪制
關(guān)于節(jié)點(diǎn)的拖拽就不多說(shuō)了，就是 drag 相關(guān)的用法，主要是渲染區(qū)域的節(jié)點(diǎn)和連接線的設(shè)計(jì)。
這里的渲染區(qū)域的思路是：以 canvas 元素作為畫(huà)布背景，節(jié)點(diǎn)是以 div 的方式渲染拖拽進(jìn)去的節(jié)點(diǎn)，拖拽的位置將是以 canvas 的相對(duì)位置來(lái)移動(dòng)，大概的結(jié)構(gòu)如下：
而連接線的繪制是根據(jù) next 字段的信息，查找到 targetComponentId 組件的位置，然后在canvas上做兩點(diǎn)間的 線條繪制。
鏈接的類型分為3種： 直線，折線，曲線
直線的繪制最為簡(jiǎn)單，取兩個(gè)點(diǎn)連接就行。
// 繪制直線
const drawStraightLine = (
ctx: CanvasRenderingContext2D,
points: [number, number][],
highlight?: boolean
) => {
ctx.beginPath()
ctx.moveTo(points[0][0], points[0][1])
ctx.lineTo(points[1][0], points[1][1])
// 是否是當(dāng)前選中的連接線，當(dāng)前連接線高亮
shadowLine(ctx, highlight)
ctx.stroke()
ctx.restore()
ctx.closePath()
}
折線的方式比較復(fù)雜，因?yàn)檎劬€需要盡可能的不要把連接線和節(jié)點(diǎn)重合，所以它要判斷每一種連接線的場(chǎng)景，還有兩個(gè)節(jié)點(diǎn)的寬度和高度也需要考慮計(jì)算。如下：
起始節(jié)點(diǎn)有四個(gè)方向，目標(biāo)節(jié)點(diǎn)也有四個(gè)方向，還有目標(biāo)節(jié)點(diǎn)相對(duì)于起始節(jié)點(diǎn)有四個(gè)象限，所以嚴(yán)格來(lái)說(shuō)，總共有 4 * 4 * 4 = 64 種場(chǎng)景。這些場(chǎng)景中的折線點(diǎn)也不一樣，最多的有 4 次， 最少的折 0 次，單求出這 64 種坐標(biāo)點(diǎn)就用了 700 行代碼。
最后的繪制方法與直線一樣：
// 繪制折線
const drawBrokenLine = ({ ctx, points }: WF.DrawLineType, highlight?: boolean) => {
ctx.beginPath()
ctx.moveTo(points[0][0], points[0][1])
for (let i = 1; i < points.length; i++) {
ctx.lineTo(points[i][0], points[i][1])
}
shadowLine(ctx, highlight)
ctx.stroke()
ctx.restore()
ctx.closePath()
}曲線相對(duì)于折線來(lái)說(shuō)，思路會(huì)簡(jiǎn)單很多，不需要考慮折線這么多場(chǎng)景。
這里的折線是用三階的貝塞爾曲線來(lái)繪制的，固定的取四個(gè)點(diǎn)，兩個(gè)起止點(diǎn)，兩個(gè)控制點(diǎn)，其中兩個(gè)起止點(diǎn)是固定的，我們只需要求出兩個(gè)控制點(diǎn)的坐標(biāo)即可。這里代碼不多，可以直接貼出來(lái)：
/**
* Description: 計(jì)算三階貝塞爾曲線的坐標(biāo)
*/
import WF from '../type'
const coeff = 0.5
export default function calcBezierPoints({ startDire, startx, starty, destDire, destx, desty }: WF.CalcBezierType,
points: [number, number][]) {
const p = Math.max(Math.abs(destx - startx), Math.abs(desty - starty)) * coeff
switch (startDire) {
case 'down':
points.push([startx, starty + p])
break
case 'up':
points.push([startx, starty - p])
break
case 'left':
points.push([startx - p, starty])
break
case 'right':
points.push([startx + p, starty])
break
// no default
}
switch (destDire) {
case 'down':
points.push([destx, desty + p])
break
case 'up':
points.push([destx, desty - p])
break
case 'left':
points.push([destx - p, desty])
break
case 'right':
points.push([destx + p, desty])
break
// no default
}
}簡(jiǎn)單一點(diǎn)來(lái)說(shuō)，第一個(gè)控制點(diǎn)是根據(jù)起始點(diǎn)來(lái)算的，第二個(gè)控制點(diǎn)是跟根據(jù)結(jié)束點(diǎn)來(lái)算的。算的方式是根據(jù)當(dāng)前點(diǎn)相對(duì)于節(jié)點(diǎn)的方向，繼續(xù)往前算一段距離，而這段距離是根據(jù)起止兩個(gè)點(diǎn)的最大相對(duì)距離的一半（可能有點(diǎn)繞...）。
繪制方法：
// 繪制貝塞爾曲線
const drawBezier = ({ ctx, points }: WF.DrawLineType, highlight?: boolean) => {
ctx.beginPath()
ctx.moveTo(points[0][0], points[0][1])
ctx.bezierCurveTo(
points[1][0], points[1][1], points[2][0], points[2][1], points[3][0], points[3][1]
)
shadowLine(ctx, highlight)
ctx.stroke()
ctx.restore()
ctx.globalCompositeOperation = 'source-over' //目標(biāo)圖像上顯示源圖像
}節(jié)點(diǎn)與連接線的選擇
節(jié)點(diǎn)是用 div 來(lái)渲染的，所以節(jié)點(diǎn)的選擇可以忽略，然后就是連接點(diǎn)的選擇，首先第一點(diǎn)是鼠標(biāo)在移動(dòng)的時(shí)候都要判斷鼠標(biāo)的當(dāng)前位置下面是否有連接線，所以這里就有 3 種判斷方法，呃... 嚴(yán)格來(lái)說(shuō)是兩種，因?yàn)檎劬€是多條直線，所以是按直線的判斷方法來(lái)。
// 判斷當(dāng)前鼠標(biāo)位置是否有線
export const isAboveLine = (offsetX: number, offsetY: number, points: WF.LineInfo[]) => {
for (let i = points.length - 1; i >= 0; --i) {
const innerPonints = points[i].points
let pre: [number, number], cur: [number, number]
// 非曲線判斷方法
if (points[i].type !== 'bezier') {
for (let j = 1; j < innerPonints.length; j++) {
pre = innerPonints[j - 1]
cur = innerPonints[j]
if (getDistance([offsetX, offsetY], pre, cur) < 20) {
return points[i]
}
}
} else {
// 先用 x 求出對(duì)應(yīng)的 t，用 t 求相應(yīng)位置的 y，再比較得出的 y 與 offsetY 之間的差值
const tsx = getBezierT(innerPonints[0][0], innerPonints[1][0], innerPonints[2][0], innerPonints[3][0], offsetX)
for (let x = 0; x < 3; x++) {
if (tsx[x] <= 1 && tsx[x] >= 0) {
const ny = getThreeBezierPoint(tsx[x], innerPonints[0], innerPonints[1], innerPonints[2], innerPonints[3])
if (Math.abs(ny[1] - offsetY) < 8) {
return points[i]
}
}
}
// 如果上述沒(méi)有結(jié)果，則用 y 求出對(duì)應(yīng)的 t，再用 t 求出對(duì)應(yīng)的 x，與 offsetX 進(jìn)行匹配
const tsy = getBezierT(innerPonints[0][1], innerPonints[1][1], innerPonints[2][1], innerPonints[3][1], offsetY)
for (let y = 0; y < 3; y++) {
if (tsy[y] <= 1 && tsy[y] >= 0) {
const nx = getThreeBezierPoint(tsy[y], innerPonints[0], innerPonints[1], innerPonints[2], innerPonints[3])
if (Math.abs(nx[0] - offsetX) < 8) {
return points[i]
}
}
}
}
}
return false
}直線的判斷方法是點(diǎn)到線段的距離：
/**
* 求點(diǎn)到線段的距離
* @param {number} pt 直線外的點(diǎn)
* @param {number} p 直線內(nèi)的點(diǎn)1
* @param {number} q 直線內(nèi)的點(diǎn)2
* @returns {number} 距離
*/
function getDistance(pt: [number, number], p: [number, number], q: [number, number]) {
const pqx = q[0] - p[0]
const pqy = q[1] - p[1]
let dx = pt[0] - p[0]
let dy = pt[1] - p[1]
const d = pqx * pqx + pqy * pqy // qp線段長(zhǎng)度的平方
let t = pqx * dx + pqy * dy // p pt向量 點(diǎn)積 pq 向量（p相當(dāng)于A點(diǎn)，q相當(dāng)于B點(diǎn)，pt相當(dāng)于P點(diǎn)）
if (d > 0) { // 除數(shù)不能為0; 如果為零 t應(yīng)該也為零。下面計(jì)算結(jié)果仍然成立。
t /= d // 此時(shí)t 相當(dāng)于 上述推導(dǎo)中的 r。
}
if (t < 0) { // 當(dāng)t（r）< 0時(shí)，最短距離即為 pt點(diǎn) 和 p點(diǎn)（A點(diǎn)和P點(diǎn)）之間的距離。
t = 0
} else if (t > 1) { // 當(dāng)t（r）> 1時(shí)，最短距離即為 pt點(diǎn) 和 q點(diǎn)（B點(diǎn)和P點(diǎn)）之間的距離。
t = 1
}
// t = 0，計(jì)算 pt點(diǎn) 和 p點(diǎn)的距離; t = 1, 計(jì)算 pt點(diǎn) 和 q點(diǎn) 的距離; 否則計(jì)算 pt點(diǎn) 和 投影點(diǎn) 的距離。
dx = p[0] + t * pqx - pt[0]
dy = p[1] + t * pqy - pt[1]
return dx * dx + dy * dy
}關(guān)于曲線的判斷方法比較復(fù)雜，這里就不多介紹， 想了解的可以去看這篇：如何判斷一個(gè)坐標(biāo)點(diǎn)是否在三階貝塞爾曲線附近
連接線還有一個(gè)功能就是雙擊連接線后可以編輯這條連接線的備注信息。這個(gè)備注信息的位置是在當(dāng)前連接線的中心點(diǎn)位置。所以我們需要求出中心點(diǎn)，這個(gè)相對(duì)簡(jiǎn)單。
// 獲取一條直線的中點(diǎn)坐標(biāo)
const getStraightLineCenterPoint = ([[x1, y1], [x2, y2]]: [number, number][]): [number, number] => {
return [(x1 + x2) / 2, (y1 + y2) / 2]
}
// 獲取一條折線的中點(diǎn)坐標(biāo)
const getBrokenCenterPoint = (points: [number, number][]): [number, number] => {
const lineDistancehalf = getLineDistance(points) >> 1
let distanceSum = 0, pre = 0, tp: [number, number][] = [], distance = 0
for (let i = 1; i < points.length; i++) {
pre = getTwoPointDistance(points[i - 1], points[i])
if (distanceSum + pre > lineDistancehalf) {
tp = [points[i - 1], points[i]]
distance = lineDistancehalf - distanceSum
break
}
distanceSum += pre
}
if (!tp.length) {
return [0, 0]
}
let x = tp[0][0], y = tp[0][1]
if (tp[0][0] === tp[1][0]) {
if (tp[0][1] > tp[1][1]) {
y -= distance
} else {
y += distance
}
} else {
if (tp[0][0] > tp[1][0]) {
x -= distance
} else {
x += distance
}
}
return [x, y]
}曲線的中心點(diǎn)位置，可以直接拿三階貝塞爾曲線公式求出
// 獲取三階貝塞爾曲線的中點(diǎn)坐標(biāo)
const getBezierCenterPoint = (points: [number, number][]) => {
return getThreeBezierPoint(
0.5, points[0], points[1], points[2], points[3]
)
}
/**
* @desc 獲取三階貝塞爾曲線的線上坐標(biāo)
* @param {number} t 當(dāng)前百分比
* @param {Array} p1 起點(diǎn)坐標(biāo)
* @param {Array} p2 終點(diǎn)坐標(biāo)
* @param {Array} cp1 控制點(diǎn)1
* @param {Array} cp2 控制點(diǎn)2
*/
export const getThreeBezierPoint = (
t: number,
p1: [number, number],
cp1: [number, number],
cp2: [number, number],
p2: [number, number]
): [number, number] => {
const [x1, y1] = p1
const [x2, y2] = p2
const [cx1, cy1] = cp1
const [cx2, cy2] = cp2
const x =
x1 * (1 - t) * (1 - t) * (1 - t) +
3 * cx1 * t * (1 - t) * (1 - t) +
3 * cx2 * t * t * (1 - t) +
x2 * t * t * t
const y =
y1 * (1 - t) * (1 - t) * (1 - t) +
3 * cy1 * t * (1 - t) * (1 - t) +
3 * cy2 * t * t * (1 - t) +
y2 * t * t * t
return [x | 0, y | 0]
}在算出每一條的中心點(diǎn)位置后，在目標(biāo)位置添加備注信息即可：
節(jié)點(diǎn)的樣式調(diào)整
節(jié)點(diǎn)的樣式調(diào)整主要是位置及大小，而這些屬性就是節(jié)點(diǎn)里面的 attr，在相應(yīng)的事件下根據(jù)鼠標(biāo)移動(dòng)的方向及位置，來(lái)調(diào)整節(jié)點(diǎn)的樣式。
還有批量操作也是同樣，不過(guò)批量操作是要先計(jì)算出哪些節(jié)點(diǎn)的范圍。
// 獲取范圍選中內(nèi)的組件
export const getSelectedComponent = (componentList: WF.ComponentType[], areaPosi: WF.Attr) => {
let selectedArea: WF.Attr | null = null
let minx = Infinity, miny = Infinity, maxx = -Infinity, maxy = -Infinity
const selectedComponents = componentList.filter((component: WF.ComponentType) => {
const res = areaPosi.x <= component.attr.x &&
areaPosi.y <= component.attr.y &&
areaPosi.x + areaPosi.w >= component.attr.x + component.attr.w &&
areaPosi.y + areaPosi.h >= component.attr.y + component.attr.h
if (res) {
minx = Math.min(minx, component.attr.x)
miny = Math.min(miny, component.attr.y)
maxx = Math.max(maxx, component.attr.x + component.attr.w)
maxy = Math.max(maxy, component.attr.y + component.attr.h)
}
return res
})
if (selectedComponents.length) {
selectedArea = {
x: minx,
y: miny,
w: maxx - minx,
h: maxy - miny
}
return {
selectedArea, selectedComponents
}
}
return null
}
這個(gè)有個(gè)小功能沒(méi)有做，就是在批量調(diào)整大小的時(shí)候，節(jié)點(diǎn)間的相對(duì)距離應(yīng)該是不動(dòng)的，這里忽略了。
節(jié)點(diǎn)移動(dòng)時(shí)的吸附
這里的吸附功能其實(shí)是做了一個(gè)簡(jiǎn)單版的，就是 x 和 y 軸都只有一條校準(zhǔn)線，且校準(zhǔn)的優(yōu)先級(jí)是從左至右，從上至下。
.jpg)
這里吸附的標(biāo)準(zhǔn)是節(jié)點(diǎn)的 6 個(gè)點(diǎn)：X 軸的左中右，Y 軸的上中下，當(dāng)前節(jié)點(diǎn)在移動(dòng)的時(shí)候，會(huì)用當(dāng)前節(jié)點(diǎn)的 6 個(gè)點(diǎn)，一一去與其它節(jié)點(diǎn)的 6 個(gè)點(diǎn)做比較，在誤差正負(fù) 2px 的情況，自動(dòng)更新為0，即自定對(duì)齊。
因?yàn)橐苿?dòng)當(dāng)前節(jié)點(diǎn)時(shí)候，其它的節(jié)點(diǎn)是不動(dòng)的，所以這里是做了一步預(yù)處理，即在鼠標(biāo)按下去的時(shí)候，把其它的節(jié)點(diǎn)的 6 個(gè)點(diǎn)都線算出來(lái)，用 Set 結(jié)構(gòu)保存，在移動(dòng)的過(guò)程的比較中，計(jì)算量會(huì)相對(duì)較少。
// 計(jì)算其它節(jié)點(diǎn)的所有點(diǎn)位置
export const clearupPostions = (componentList: WF.ComponentType[], currId: string) => {
// x 坐標(biāo)集合
const coordx = new Set()
// y 坐標(biāo)集合
const coordy = new Set()
componentList.forEach((component: WF.ComponentType) => {
if (component.id === currId) {
return
}
const { x, y, w, h } = component.attr
coordx.add(x)
coordx.add(x + (w >> 1))
coordx.add(x + w)
coordy.add(y)
coordy.add(y + (h >> 1))
coordy.add(y + h)
})
return [coordx, coordy]
}判讀是否有可吸附的點(diǎn)
// 可吸附范圍
const ADSORBRANGE = 2
// 查詢是否有可吸附坐標(biāo)
const hasAdsorbable = (
coords: Set[], x: number, y: number, w: number, h: number
) => {
// x, y, w, h, w/2, h/2
const coord: (number | null)[] = [null, null, null, null, null, null]
// 查詢 x 坐標(biāo)
for (let i = 0; i <= ADSORBRANGE; i++) {
if (coords[0].has(x + i)) {
coord[0] = i
break
}
if (coords[0].has(x - i)) {
coord[0] = -i
break
}
}
// 查詢 y 坐標(biāo)
for (let i = 0; i <= ADSORBRANGE; i++) {
if (coords[1].has(y + i)) {
coord[1] = i
break
}
if (coords[1].has(y - i)) {
coord[1] = -i
break
}
}
// 查詢 x + w 坐標(biāo)
for (let i = 0; i <= ADSORBRANGE; i++) {
if (coords[0].has(x + w + i)) {
coord[2] = i
break
}
if (coords[0].has(x + w - i)) {
coord[2] = -i
break
}
}
// 查詢 y + h 坐標(biāo)
for (let i = 0; i <= ADSORBRANGE; i++) {
if (coords[1].has(y + h + i)) {
coord[3] = i
break
}
if (coords[1].has(y + h - i)) {
coord[3] = -i
break
}
}
// 查詢 x + w/2 坐標(biāo)
for (let i = 0; i <= ADSORBRANGE; i++) {
if (coords[0].has(x + (w >> 1) + i)) {
coord[4] = i
break
}
if (coords[0].has(x + (w >> 1) - i)) {
coord[4] = -i
break
}
}
// 查詢 y + h/2 坐標(biāo)
for (let i = 0; i <= ADSORBRANGE; i++) {
if (coords[1].has(y + (h >> 1) + i)) {
coord[5] = i
break
}
if (coords[1].has(y + (h >> 1) - i)) {
coord[5] = -i
break
}
}
return coord
}
最后更新?tīng)顟B(tài)。
// 獲取修正后的 x, y，還有吸附線的狀態(tài)
export const getAdsordXY = (
coords: Set[], x: number, y: number, w: number, h: number
) => {
const vals = hasAdsorbable(
coords, x, y, w, h
)
let linex = null
let liney = null
if (vals[0] !== null) { // x
x += vals[0]
linex = x
} else if (vals[2] !== null) { // x + w
x += vals[2]
linex = x + w
} else if (vals[4] !== null) { // x + w/2
x += vals[4]
linex = x + (w >> 1)
}
if (vals[1] !== null) { // y
y += vals[1]
liney = y
} else if (vals[3] !== null) { // y + h
y += vals[3]
liney = y + h
} else if (vals[5] !== null) { // y + h/2
y += vals[5]
liney = y + (h >> 1)
}
return {
x, y, linex, liney
}
}
撤銷和恢復(fù)
撤銷和恢復(fù)的功能是比較簡(jiǎn)單的，其實(shí)就是用棧來(lái)保存每一次需要保存的配置結(jié)構(gòu)，就是要考慮哪些操作是可以撤銷和恢復(fù)的，就是像節(jié)點(diǎn)移動(dòng)，節(jié)點(diǎn)的新增和刪除，連接線的連接，連接線的備注新增和編輯等等，在相關(guān)的操作下面入棧即可。
// 撤銷和恢復(fù)操作
const cacheComponentList = ref([])
const currentComponentIndex = ref(-1)
// 撤銷
const undo = () => {
componentRenderList.value = JSON.parse(JSON.stringify(cacheComponentList.value[--currentComponentIndex.value]))
// 更新視圖
updateCanvas(true)
cancelSelected()
}
// 恢復(fù)
const redo = () => {
componentRenderList.value = JSON.parse(JSON.stringify(cacheComponentList.value[++currentComponentIndex.value]))
// 更新視圖
updateCanvas(true)
cancelSelected()
}
// 緩存入棧
const chacheStack = () => {
if (cacheComponentList.value.length - 1 > currentComponentIndex.value) {
cacheComponentList.value.length = currentComponentIndex.value + 1
}
cacheComponentList.value.push(JSON.parse(JSON.stringify(componentRenderList.value)))
currentComponentIndex.value++
}
.jpg)
關(guān)于“如何利用vue3.x繪制流程圖”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。
網(wǎng)頁(yè)題目：如何利用vue3.x繪制流程圖
本文路徑：
http://weahome.cn/article/gigjeo.html
重慶分公司
重慶分公司
