更新记录

1.0.0（2026-03-04） 下载此版本

初版发布

平台兼容性

uni-app

cs-mindmap 微信小程序原生 Canvas 思维导图组件

基于 uni-app 和微信小程序原生 Canvas 2D API 纯手写打造的高性能、轻量级思维导图组件。彻底摆脱臃肿的第三方图表库依赖，解决各类 Webview 和跨端编译带来的兼容性黑盒问题。

✨ 核心特性

• 🚀 极致性能：纯原生 Canvas 2D 绘制，利用 requestAnimationFrame 调度动画帧，拖拽缩放丝滑无卡顿。
• 🎨 动态自适应布局：告别写死的宽高！根据节点文字长度自动计算动态宽度，并支持带有弧度的优雅三次贝塞尔曲线连线。
• 🧭 多排布模式：支持向右排布 (right)、向左排布 (left) 以及居中发散排布 (center)。
• 📱 完善的移动端手势：内置一指拖拽漫游、双指捏合缩放（Pinch-to-zoom）数学模型。
• 🎯 智能初始视角：支持全局自适应缩放（Fit View），自动计算包围盒（Bounding Box），确保初始加载时整棵树完美停靠在视口内；也支持指定初始缩放比例。
• 👆 精准点击拾取：内置逆向坐标系转换与 AABB 碰撞检测，支持精确点击节点并抛出事件。

📦 文件结构

确保以下两个文件在同一个目录下：

• layout.js：底层核心布局算法引擎（纯数学计算，剥离视图）。
• MindMap.vue：视图层组件（负责 Canvas 渲染、手势交互与生命周期）。

🚀 快速上手

1. 引入组件

在你的业务页面中引入并注册组件：

<template>
  <view class="page-container">
    <MindMap
      ref="mindmap"
      mindMapId="mindmap"
      :layoutMode="'right'"
      :fitView="true"
      :rawData="rawData"
      :contentStyle="contentStyle"
      @node-click="handleNodeClick"
    />
  </view>
</template>

<script>
import MindMap from "@/components/MindMap/MindMap.vue"; // 请根据实际路径修改

export default {
  components: { MindMap },
  data() {
    return {
      rawData: {
        id: "root",
        topic: "中心根节点",
        children: [
          {
            id: "sub_1",
            topic: "分支主题1",
            children: [
              {
                id: "sub_1_1",
                topic: "分支主题1-1",
              },
              {
                id: "sub_1_2",
                topic: "分支主题1-2",
              },
            ],
          },
          {
            id: "sub_2",
            topic: "分支主题2",
             children: [
              {
                id: "sub_2_1",
                topic: "分支主题2-1",
              },
              {
                id: "sub_2_2",
                topic: "分支主题2-2",
              },
            ],
          },
        ],
      },
      contentStyle: {
        height: "40vh",
        background: "#f4f4f4",
      },
    };
  },
  methods: {
    handleNodeClick(nodeData) {
      console.log("点击了节点:", nodeData.topic);
      uni.showToast({
        title: `选中: ${nodeData.topic}`,
        icon: "none",
      });
    },
  },
};
</script>

<style>
.page-container {
  width: 100vw;
  height: 100vh;
}
</style>

⚙️ API 参考

Props 配置项

Events 事件

📊 数据结构约定

为了保证布局算法正常运行，Prop传入的数据 rawData 需要严格遵循以下嵌套 JSON 格式：

{
  "id": "root",
  "topic": "中心根节点",
  "children": [
    {
      "id": "sub_1",
      "topic": "分支主题一",
      "children": []
    },
    {
      "id": "sub_2",
      "topic": "分支主题二"
    }
  ]
}

• 核心字段：必须包含唯一的 id 和用于展示文本的 topic。
• 层级字段：子节点必须放在 children 数组中。

⚠️ 注意事项与避坑指南

1. 小程序环境差异：本组件使用了小程序特有的 Canvas 2D 接口 (type="2d") 请勿在普通的 H5 环境下直接运行，如需跨端到 H5，需做环境降级兼容处理。
2. 真机预览：微信开发者工具中的 Canvas 渲染表现（尤其是文字排版和手势事件触发频率）有时与真机不一致。遇到交互问题时，请务必使用真机调试。
3. 性能上限：当前碰撞检测使用的是全量树遍历。如果在极端场景下（如节点数量超过 1000 个），建议对不在视口内的节点开启 Culling（剔除）优化以维持高帧率。