更新一版热力图

This commit is contained in:
kron
2025-09-28 18:28:49 +08:00
parent 889e87d3e9
commit 9c6824b82f
3 changed files with 168 additions and 80 deletions

View File

@@ -445,75 +445,3 @@ export const calcRing = (bowtargetId, x, y, diameter) => {
}
return 0;
};
// 绘制热力图并生成图片
export const drawHeatMap = (width, height, arrows) => {
return new Promise((resolve, reject) => {
try {
const ctx = uni.createCanvasContext("heatMapCanvas");
// ctx.setFillStyle("rgba(255, 255, 255, 0.4)");
// ctx.fillRect(0, 0, width, height);
let minCount = 0;
let maxCount = 0;
// 计算最大和最小频次
arrows.forEach((point) => {
if (point.count > maxCount) {
maxCount = point.count;
}
if (point.count < minCount) {
minCount = point.count;
}
});
// 绘制热力点
arrows.forEach((point) => {
if (point.x === 0 && point.y === 0) return;
// 数量越多,半径越小(反比关系)
const radius = 20;
// 根据频次设置同一种颜色的5个深浅度
let color = "rgba(71, 254, 102, 0.2)";
// if (point.count >= maxCount * 0.5) {
// color = "rgba(255, 232, 143, 0.7)"; // 最深 - 频次5次及以上
// } else if (point.count >= maxCount * 0.4) {
// color = "rgba(255, 232, 143, 0.5)"; // 较深 - 频次4次
// } else if (point.count >= maxCount * 0.3) {
// color = "rgba(255, 232, 143, 0.3)"; // 中等 - 频次3次
// } else if (point.count >= maxCount * 0.2) {
// color = "rgba(255, 232, 143, 0.2)"; // 较浅 - 频次2次
// } else {
// color = "rgba(255, 232, 143, 0.1)"; // 最浅 - 频次1次
// }
// 绘制圆形热力点
ctx.setFillStyle(color);
ctx.beginPath();
ctx.arc(point.x * width, point.y * height, radius, 0, 2 * Math.PI);
ctx.fill();
});
ctx.draw(false, () => {
// Canvas绘制完成后生成图片
uni.canvasToTempFilePath({
canvasId: "heatMapCanvas",
width: width,
height: height,
destWidth: width * 2, // 提高图片质量
destHeight: height * 2,
success: (res) => {
console.log("热力图图片生成成功:", res.tempFilePath);
resolve(res.tempFilePath);
},
fail: (error) => {
console.error("热力图图片生成失败:", error);
reject(error);
},
});
});
} catch (error) {
console.error("绘制热力图失败:", error);
reject(error);
}
});
};