uni-app 微信小程序 实现无限缩放(主要是缩小)的横向纵向紧凑型家谱树

实现一个支持无限缩放（主要是缩小）的横向纵向紧凑型家谱树在uni-app微信小程序中，可以通过使用Canvas和一些JavaScript逻辑来绘制和控制缩放。以下是一个简化的代码示例，演示了如何实现这个功能。

1. 初始化项目

首先，确保你已经使用HBuilderX或微信开发者工具创建了一个uni-app项目。

2. 页面结构

在pages/index/index.vue中，添加Canvas元素和一些控制缩放的按钮。

<template>
  <view class="container">
    <button @click="zoomIn">放大</button>
    <button @click="zoomOut">缩小</button>
    <canvas canvas-id="familyTree" style="width: 100%; height: 100%;" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      scale: 1,
      minScale: 0.1, // 最小缩放比例
      maxScale: 3,   // 最大缩放比例
      nodes: [
        // 家谱树节点数据
        { id: 1, x: 100, y: 100, text: '祖先' },
        { id: 2, x: 200, y: 200, text: '后代' },
        // 更多节点...
      ]
    };
  },
  methods: {
    zoomIn() {
      if (this.scale < this.maxScale) this.scale += 0.1;
      this.drawTree();
    },
    zoomOut() {
      if (this.scale > this.minScale) this.scale -= 0.1;
      this.drawTree();
    },
    drawTree() {
      const ctx = uni.createCanvasContext('familyTree');
      ctx.clearRect(0, 0, 375, 667); // 清除画布
      ctx.scale(this.scale, this.scale);
      
      this.nodes.forEach(node => {
        ctx.setFontSize(16 / this.scale); // 根据缩放比例调整字体大小
        ctx.fillText(node.text, node.x, node.y);
      });
      
      ctx.draw();
    }
  },
  onLoad() {
    this.drawTree();
  }
};
</script>

<style>
.container {
  position: relative;
  width: 100%;
  height: 100%;
}
</style>

3. 解释

• Canvas: 用于绘制家谱树。
• 缩放控制: 通过zoomIn和zoomOut方法调整scale属性，并重新绘制Canvas。
• 绘制家谱树: 在drawTree方法中，通过遍历nodes数组，在Canvas上绘制文本节点。注意字体大小需要根据缩放比例进行调整，以保持可读性。
• 节点数据: 示例中nodes数组包含家谱树的节点数据，包括位置（x, y）和文本。

4. 注意事项

• 实际应用中，家谱树的布局和绘制逻辑可能更加复杂，需要处理节点之间的关系、连接线等。
• 性能优化：对于大量节点，可以考虑使用WebGL或其他优化策略来提高渲染性能。
• 用户体验：可以添加手势缩放功能，使缩放操作更加自然。

这个示例提供了一个基础框架，你可以根据具体需求进行扩展和优化。