hookehuyr

refactor(animation): 调整SVG视图框高度并移除节点点击事件

调整SVG视图框的高度以适配更多内容,并移除不再需要的节点点击事件处理函数,以简化代码逻辑。
<!--
* @Date: 2025-03-28 09:23:04
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-03-28 13:44:59
* @LastEditTime: 2025-03-28 14: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 1000" class="animation-svg">
<svg width="100%" height="100%" viewBox="0 0 1000 1200" 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);
// }
// }
// };
// 处理下一步按钮点击事件
// 激活下一个节点并创建新的高亮路径段
......