更新一版热力图

src/pages/point-book.vue

@@ -16,7 +16,8 @@ import {
   getPointBookStatisticsAPI,
 } from "@/apis";
 
-import { getElementRect, drawHeatMap } from "@/util";
+import { getElementRect } from "@/util";
+import { generateHeatmapImage } from "@/heatmap";
 
 import useStore from "@/store";
 import { storeToRefs } from "pinia";
@@ -38,6 +39,7 @@ const data = ref({
 const list = ref([]);
 const bowTargetSrc = ref("");
 const heatMapImageSrc = ref(""); // 存储热力图图片地址
+const canvasVisible = ref(false); // 控制canvas显示状态
 
 const toListPage = () => {
   uni.navigateTo({
@@ -59,10 +61,54 @@ const startScoring = () => {
   }
 };
 
+// 生成热力图测试数据
+const generateHeatMapData = (width, height, amount = 100) => {
+  const data = [];
+  const centerX = 0.5; // 中心点X坐标
+  const centerY = 0.5; // 中心点Y坐标
+
+  // 生成500条记录
+  for (let i = 0; i < amount; i++) {
+    let x, y, count;
+
+    // 30%的数据集中在中心区域（高斯分布）
+    if (Math.random() < 0.3) {
+      // 使用正态分布生成中心区域的数据
+      const angle = Math.random() * 2 * Math.PI;
+      const radius = Math.sqrt(-2 * Math.log(Math.random())) * 0.15; // 标准差0.15
+      x = centerX + radius * Math.cos(angle);
+      y = centerY + radius * Math.sin(angle);
+      count = Math.floor(Math.random() * 20);
+    } else {
+      x = Math.random() * 0.8 + 0.1; // 0.1-0.9范围
+      y = Math.random() * 0.8 + 0.1;
+      count = Math.floor(Math.random() * 20);
+    }
+
+    // 确保坐标在0-1范围内
+    x = Math.max(0.05, Math.min(0.95, x));
+    y = Math.max(0.05, Math.min(0.95, y));
+
+    data.push({
+      x: parseFloat(x.toFixed(3)),
+      y: parseFloat(y.toFixed(3)),
+      ring: Math.floor(Math.random() * 5) + 6, // 6-10环
+      count: count,
+    });
+  }
+
+  return data;
+};
+
 const loadData = async () => {
   const result = await getPointBookListAPI(1);
   list.value = result.slice(0, 3);
   const result2 = await getPointBookStatisticsAPI();
+
+  const rect = await getElementRect(".heat-map");
+  // const testWeekArrows = generateHeatMapData(rect.width, rect.height);
+  // result2.weekArrows = testWeekArrows;
+  // console.log(result2.weekArrows)
   data.value = result2;
   let hot = 0;
   if (result2.checkInCount > -3 && result2.checkInCount < 3) hot = 1;
@@ -70,14 +116,13 @@ const loadData = async () => {
   else if (result2.checkInCount >= 5) hot = 3;
   else if (result2.checkInCount === 7) hot = 4;
   uni.$emit("update-hot", hot);
-  const rect = await getElementRect(".heat-map");
-  // 延迟绘制热力图确保Canvas准备就绪
   setTimeout(async () => {
     try {
-      const imagePath = await drawHeatMap(
+      const imagePath = await generateHeatmapImage(
+        "heatMapCanvas",
         rect.width,
         rect.height,
-        result2.weekArrows
+        result2.weekArrows.filter((item) => item.x && item.y)
       );
       heatMapImageSrc.value = imagePath; // 存储生成的图片地址
       console.log("热力图图片地址:", imagePath);
@@ -247,7 +292,17 @@ onShareTimeline(() => {
           mode="widthFix"
         />
         <image v-if="heatMapImageSrc" :src="heatMapImageSrc" mode="widthFix" />
-        <canvas canvas-id="heatMapCanvas" style="width: 100%; height: 100%" />
+        <canvas
+          canvas-id="heatMapCanvas"
+          style="
+            width: 100%;
+            height: 100%;
+            position: absolute;
+            top: 0;
+            left: 0;
+            z-index: 2;
+          "
+        />
       </view>
       <view class="reward" v-if="data.totalArrow">
         <button hover-class="none" @click="showTip = true">
@@ -392,8 +447,8 @@ onShareTimeline(() => {
 
 .heat-map > canvas {
   position: absolute;
-  top: 0;
-  left: -1000px;
+  top: -1000px;
+  left: 0px;
   width: 100%;
   height: 100%;
   z-index: 2;