利用 Vue.js 构建可视化肌肉标签卡片

应用场景

本代码旨在创建一个交互式的肌肉标签卡片，允许用户在人体图像上选择和查看特定肌肉。该卡片适用于健身、健康和教育领域，为用户提供了一种直观的方式来了解和识别不同肌肉群。

基本功能

该肌肉标签卡片提供以下功能：

• **肌肉选择：**用户可以通过单击图像上的特定区域来选择肌肉。
• **肌肉名称显示：**当选择肌肉时，其名称将显示在标签中。
• **多个肌肉选择：**用户可以同时选择多个肌肉，从而更全面地了解肌肉群。

功能实现步骤

1. 初始化 Vue 组件

<template>
  <div class="page">
    <div class="header">
      <div class="title">Involved muscles</div>
    </div>
    <div class="body">
      <div class="image">
        <img src="https://source.unsplash.com/random/300x300" alt="" />
      </div>
      <div class="labels">
        <div class="label">
          <div class="name">Rectus Sheth</div>
        </div>
        <div class="label">
          <div class="name">Rectus Abdominis</div>
        </div>
        <div class="label">
          <div class="name">Tendenous Intersections</div>
        </div>
        <div class="label">
          <div class="name">External Abdominal Oblique</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="tsx" setup>
import { ref } from "vue";

const rectusSheth = ref(false);
const rectusAbdominis = ref(false);
const tendinousIntersections = ref(false);
const externalAbdominalOblique = ref(false);
</script>

2. 使用 Vue Reactivity 来跟踪肌肉选择

我们使用 Vue 的响应式系统来跟踪用户选择的肌肉。当用户单击肌肉时，相应的 ref 值将更新，从而触发 UI 更新。

3. 设置图像上的事件监听器

// 监听图像点击事件
const image = document.querySelector('.image');
image.addEventListener('click', (e) => {
  // 获取点击坐标
  const x = e.clientX;
  const y = e.clientY;

  // 根据坐标确定选中的肌肉
  // ...
});

4. 根据坐标确定选中的肌肉

根据点击坐标，我们使用图像中的预定义区域或像素映射来确定选中的肌肉。

5. 更新响应式状态

一旦确定了选中的肌肉，我们就更新响应式 ref 值，以触发 UI 更新。

6. 显示肌肉名称

当肌肉被选择时，其名称会显示在相应的标签中。

总结与展望

开发这个肌肉标签卡片的过程不仅锻炼了我们的 Vue.js 技能，还加深了我们对人体解剖学的理解。

未来，我们可以对该卡片进行以下扩展和优化：

• **添加肌肉描述：**为每个肌肉提供简短的描述，以便用户了解其功能和位置。
• **提供交互式导览：**允许用户逐步浏览不同的肌肉群，并了解它们在身体中的作用。
• **整合与其他健康应用程序：**将该卡片与健身追踪器或营养应用程序集成，提供更全面的健康体验。