Showing
1 changed file
with
36 additions
and
2 deletions
| ... | @@ -952,7 +952,38 @@ export default { | ... | @@ -952,7 +952,38 @@ export default { |
| 952 | flowData.value = { nodes, edges }; // 获取已存在的数据 | 952 | flowData.value = { nodes, edges }; // 获取已存在的数据 |
| 953 | // 内部刷新graph数据 | 953 | // 内部刷新graph数据 |
| 954 | nextTick(() => { | 954 | nextTick(() => { |
| 955 | - editor.editorState.graph.read(flowData.value) | 955 | + editor.editorState.graph.read(flowData.value); |
| 956 | + // TAG: 自动位移中心点位置 | ||
| 957 | + const point = { | ||
| 958 | + x: 600, | ||
| 959 | + y: 400 | ||
| 960 | + }; | ||
| 961 | + const width = editor.editorState.graph.get('width'); | ||
| 962 | + const height = editor.editorState.graph.get('height'); | ||
| 963 | + // 找到视口中心 | ||
| 964 | + const viewCenter = { | ||
| 965 | + x: width / 2, | ||
| 966 | + y: height / 2 | ||
| 967 | + }; | ||
| 968 | + const modelCenter = editor.editorState.graph.getPointByCanvas(viewCenter.x, viewCenter.y); | ||
| 969 | + const viewportMatrix = editor.editorState.graph.get('group').getMatrix(); | ||
| 970 | + // 画布平移的目标位置,最终目标是graph.translate(dx, dy); | ||
| 971 | + const dx = (modelCenter.x - point.x) * viewportMatrix[0]; | ||
| 972 | + const dy = (modelCenter.y - point.y) * viewportMatrix[4]; | ||
| 973 | + let lastX = 0; | ||
| 974 | + let lastY = 0; | ||
| 975 | + let newX = void 0; | ||
| 976 | + let newY = void 0; | ||
| 977 | + // 动画每次平移一点,直到目标位置 | ||
| 978 | + editor.editorState.graph.get('canvas').animate({ | ||
| 979 | + onFrame: function onFrame(ratio) { | ||
| 980 | + newX = dx * ratio; | ||
| 981 | + newY = dy * ratio; | ||
| 982 | + editor.editorState.graph.translate(newX - lastX, newY - lastY); | ||
| 983 | + lastX = newX; | ||
| 984 | + lastY = newY; | ||
| 985 | + } | ||
| 986 | + }, 100, 'easeCubic'); | ||
| 956 | }); | 987 | }); |
| 957 | } | 988 | } |
| 958 | 989 | ||
| ... | @@ -1622,7 +1653,10 @@ export default { | ... | @@ -1622,7 +1653,10 @@ export default { |
| 1622 | addItem: any | 1653 | addItem: any |
| 1623 | removeItem: any | 1654 | removeItem: any |
| 1624 | save: () => { nodes: any; edges: any } | 1655 | save: () => { nodes: any; edges: any } |
| 1625 | - read: any | 1656 | + read: any, |
| 1657 | + get: any, | ||
| 1658 | + getPointByCanvas: any, | ||
| 1659 | + translate: any, | ||
| 1626 | } | 1660 | } |
| 1627 | } | 1661 | } |
| 1628 | } | 1662 | } | ... | ... |
-
Please register or login to post a comment