Toggle navigation
Toggle navigation
This project
Loading...
Sign in
Hooke
/
mlaj
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Pipelines
Graphs
Issues
0
Merge Requests
0
Wiki
Snippets
Network
Create a new issue
Builds
Commits
Issue Boards
Authored by
hookehuyr
2025-03-28 14:16:48 +0800
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
11e3a8c0b8cb39754463b3082ec5dcb9daa3cfc0
11e3a8c0
1 parent
2ff0713e
refactor(animation): 调整SVG视图框高度并移除节点点击事件
调整SVG视图框的高度以适配更多内容,并移除不再需要的节点点击事件处理函数,以简化代码逻辑。
Show whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
16 additions
and
17 deletions
src/views/animation.vue
src/views/animation.vue
View file @
11e3a8c
<!--
* @Date: 2025-03-28 09:23:04
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-03-28 1
3:44:59
* @LastEditTime: 2025-03-28 1
4:16:41
* @FilePath: /mlaj/src/views/animation.vue
* @Description: 贝塞尔曲线动画路径组件
*
...
...
@@ -17,7 +17,7 @@
<div style="position: fixed; top: 0; right: 0;">
<button class="next-button" @click="nextStep" :disabled="activeNodeIndex >= points.length - 1">下一步</button>
</div>
<svg width="100%" height="100%" viewBox="0 0 1000 1
0
00" class="animation-svg">
<svg width="100%" height="100%" viewBox="0 0 1000 1
2
00" class="animation-svg">
<!-- 定义箭头标记 -->
<defs>
<marker
...
...
@@ -78,7 +78,6 @@
:cy="point.y"
r="12"
:class="['node', { 'node-active': activeNodeIndex >= index - 1 }]"
@click="activateNode(index)"
/>
</template>
</svg>
...
...
@@ -169,20 +168,20 @@ const pathColor = computed(() => {
// 处理节点点击事件,激活指定节点并更新路径
// @param index - 被点击节点的索引
// 点击节点时会激活该节点及其之前的所有节点和路径
const activateNode = (index) => {
activeNodeIndex.value = index;
activePathSegments.value = [];
// 重新计算所有激活的路径段
for (let i = 0; i < index; i++) {
const startPoint = points.value[i];
const endPoint = points.value[i + 1];
if (endPoint) {
const segment = calculatePathSegment(startPoint, endPoint);
activePathSegments.value.push(segment);
}
}
};
//
const activateNode = (index) => {
//
activeNodeIndex.value = index;
//
activePathSegments.value = [];
//
// 重新计算所有激活的路径段
//
for (let i = 0; i < index; i++) {
//
const startPoint = points.value[i];
//
const endPoint = points.value[i + 1];
//
if (endPoint) {
//
const segment = calculatePathSegment(startPoint, endPoint);
//
activePathSegments.value.push(segment);
//
}
//
}
//
};
// 处理下一步按钮点击事件
// 激活下一个节点并创建新的高亮路径段
...
...
Please
register
or
login
to post a comment