修改注释
This commit is contained in:
@@ -156,7 +156,7 @@ export function drawKDEHeatmap(canvasId, width, height, points, options = {}) {
|
|||||||
pointColor = "rgba(255, 255, 255, 0.9)",
|
pointColor = "rgba(255, 255, 255, 0.9)",
|
||||||
} = options;
|
} = options;
|
||||||
|
|
||||||
// 创建绘图上下文 - iOS兼容性检查
|
// 创建绘图上下文
|
||||||
let ctx;
|
let ctx;
|
||||||
try {
|
try {
|
||||||
ctx = uni.createCanvasContext(canvasId);
|
ctx = uni.createCanvasContext(canvasId);
|
||||||
@@ -165,14 +165,14 @@ export function drawKDEHeatmap(canvasId, width, height, points, options = {}) {
|
|||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error("创建canvas上下文失败:", error);
|
console.error("创建canvas上下文失败:", error);
|
||||||
reject(new Error("iOS兼容性:Canvas上下文创建失败"));
|
reject(new Error("Canvas上下文创建失败"));
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 清空画布
|
// 清空画布
|
||||||
ctx.clearRect(0, 0, width, height);
|
ctx.clearRect(0, 0, width, height);
|
||||||
|
|
||||||
// iOS兼容性:设置全局合成操作,让颜色叠加更自然
|
// 设置全局合成操作,让颜色叠加更自然
|
||||||
try {
|
try {
|
||||||
ctx.globalCompositeOperation = "screen";
|
ctx.globalCompositeOperation = "screen";
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
@@ -192,7 +192,7 @@ export function drawKDEHeatmap(canvasId, width, height, points, options = {}) {
|
|||||||
let frameCount = 0;
|
let frameCount = 0;
|
||||||
|
|
||||||
const processChunk = () => {
|
const processChunk = () => {
|
||||||
// iOS兼容性:使用Date.now()作为performance.now的回退
|
// 使用Date.now()作为performance.now的回退
|
||||||
const startTime =
|
const startTime =
|
||||||
typeof performance !== "undefined" && performance.now
|
typeof performance !== "undefined" && performance.now
|
||||||
? performance.now()
|
? performance.now()
|
||||||
@@ -216,7 +216,7 @@ export function drawKDEHeatmap(canvasId, width, height, points, options = {}) {
|
|||||||
// 如果处理时间超过8ms,保存状态并中断
|
// 如果处理时间超过8ms,保存状态并中断
|
||||||
index = i + 1;
|
index = i + 1;
|
||||||
ctx.restore();
|
ctx.restore();
|
||||||
// iOS兼容性:更安全的requestAnimationFrame检测
|
// 更安全的requestAnimationFrame检测
|
||||||
if (typeof requestAnimationFrame === "function") {
|
if (typeof requestAnimationFrame === "function") {
|
||||||
try {
|
try {
|
||||||
requestAnimationFrame(processChunk);
|
requestAnimationFrame(processChunk);
|
||||||
@@ -244,7 +244,7 @@ export function drawKDEHeatmap(canvasId, width, height, points, options = {}) {
|
|||||||
const processingTime = currentTime - startTime;
|
const processingTime = currentTime - startTime;
|
||||||
const delay = processingTime > 16 ? 8 : 1; // 根据处理时间动态调整
|
const delay = processingTime > 16 ? 8 : 1; // 根据处理时间动态调整
|
||||||
|
|
||||||
// iOS兼容性:更安全的requestAnimationFrame检测
|
// 更安全的requestAnimationFrame检测
|
||||||
if (typeof requestAnimationFrame === "function") {
|
if (typeof requestAnimationFrame === "function") {
|
||||||
try {
|
try {
|
||||||
requestAnimationFrame(processChunk);
|
requestAnimationFrame(processChunk);
|
||||||
@@ -264,7 +264,7 @@ export function drawKDEHeatmap(canvasId, width, height, points, options = {}) {
|
|||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
// 处理单个点的函数 - iOS兼容性优化
|
// 处理单个点的函数
|
||||||
const processPoint = (point) => {
|
const processPoint = (point) => {
|
||||||
const [x, y, density] = point;
|
const [x, y, density] = point;
|
||||||
const normalizedX = (x - range[0]) / (range[1] - range[0]);
|
const normalizedX = (x - range[0]) / (range[1] - range[0]);
|
||||||
@@ -273,7 +273,7 @@ export function drawKDEHeatmap(canvasId, width, height, points, options = {}) {
|
|||||||
const canvasY = normalizedY * height;
|
const canvasY = normalizedY * height;
|
||||||
const color = getHeatColor(density);
|
const color = getHeatColor(density);
|
||||||
|
|
||||||
// iOS兼容性:确保数值有效
|
// 确保数值有效
|
||||||
if (
|
if (
|
||||||
isNaN(canvasX) ||
|
isNaN(canvasX) ||
|
||||||
isNaN(canvasY) ||
|
isNaN(canvasY) ||
|
||||||
@@ -306,7 +306,7 @@ export function drawKDEHeatmap(canvasId, width, height, points, options = {}) {
|
|||||||
// 使用分片处理绘制缓存数据
|
// 使用分片处理绘制缓存数据
|
||||||
await processInChunks(cachedDensityData, 200); // 每批处理200个点,减少单次处理量
|
await processInChunks(cachedDensityData, 200); // 每批处理200个点,减少单次处理量
|
||||||
|
|
||||||
// 绘制原始数据点 - iOS兼容性优化
|
// 绘制原始数据点
|
||||||
if (showPoints) {
|
if (showPoints) {
|
||||||
ctx.setFillStyle(pointColor);
|
ctx.setFillStyle(pointColor);
|
||||||
ctx.beginPath(); // 开始批量路径
|
ctx.beginPath(); // 开始批量路径
|
||||||
@@ -321,7 +321,7 @@ export function drawKDEHeatmap(canvasId, width, height, points, options = {}) {
|
|||||||
const canvasX = normalizedX * width;
|
const canvasX = normalizedX * width;
|
||||||
const canvasY = normalizedY * height;
|
const canvasY = normalizedY * height;
|
||||||
|
|
||||||
// iOS兼容性:确保坐标有效
|
// 确保坐标有效
|
||||||
if (
|
if (
|
||||||
!isNaN(canvasX) &&
|
!isNaN(canvasX) &&
|
||||||
!isNaN(canvasY) &&
|
!isNaN(canvasY) &&
|
||||||
@@ -374,7 +374,7 @@ export function drawKDEHeatmap(canvasId, width, height, points, options = {}) {
|
|||||||
// 使用分片处理绘制热力图网格
|
// 使用分片处理绘制热力图网格
|
||||||
await processInChunks(densityData, 200); // 每批处理200个点,减少单次处理量
|
await processInChunks(densityData, 200); // 每批处理200个点,减少单次处理量
|
||||||
|
|
||||||
// 绘制原始数据点 - iOS兼容性优化
|
// 绘制原始数据点
|
||||||
if (showPoints) {
|
if (showPoints) {
|
||||||
ctx.setFillStyle(pointColor);
|
ctx.setFillStyle(pointColor);
|
||||||
ctx.beginPath(); // 开始批量路径
|
ctx.beginPath(); // 开始批量路径
|
||||||
@@ -387,7 +387,7 @@ export function drawKDEHeatmap(canvasId, width, height, points, options = {}) {
|
|||||||
const canvasX = normalizedX * width;
|
const canvasX = normalizedX * width;
|
||||||
const canvasY = normalizedY * height;
|
const canvasY = normalizedY * height;
|
||||||
|
|
||||||
// iOS兼容性:确保坐标有效
|
// 确保坐标有效
|
||||||
if (
|
if (
|
||||||
!isNaN(canvasX) &&
|
!isNaN(canvasX) &&
|
||||||
!isNaN(canvasY) &&
|
!isNaN(canvasY) &&
|
||||||
@@ -405,7 +405,7 @@ export function drawKDEHeatmap(canvasId, width, height, points, options = {}) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 执行绘制 - iOS兼容性优化
|
// 执行绘制
|
||||||
ctx.draw(
|
ctx.draw(
|
||||||
false,
|
false,
|
||||||
() => {
|
() => {
|
||||||
@@ -438,15 +438,15 @@ export function generateKDEHeatmapImage(
|
|||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
drawKDEHeatmap(canvasId, width, height, points, options)
|
drawKDEHeatmap(canvasId, width, height, points, options)
|
||||||
.then(() => {
|
.then(() => {
|
||||||
// 生成图片 - iOS兼容性优化
|
// 生成图片
|
||||||
uni.canvasToTempFilePath({
|
uni.canvasToTempFilePath({
|
||||||
canvasId: canvasId,
|
canvasId: canvasId,
|
||||||
width: width,
|
width: width,
|
||||||
height: height,
|
height: height,
|
||||||
destWidth: width * 2, // iOS兼容性:降低分辨率避免内存问题
|
destWidth: width * 2, // 降低分辨率避免内存问题
|
||||||
destHeight: height * 2,
|
destHeight: height * 2,
|
||||||
fileType: "png", // iOS兼容性:明确指定png格式
|
fileType: "png", // 明确指定png格式
|
||||||
quality: 1, // iOS兼容性:最高质量
|
quality: 1, // 最高质量
|
||||||
success: (res) => {
|
success: (res) => {
|
||||||
console.log("KDE热力图图片生成成功:", res.tempFilePath);
|
console.log("KDE热力图图片生成成功:", res.tempFilePath);
|
||||||
resolve(res.tempFilePath);
|
resolve(res.tempFilePath);
|
||||||
|
|||||||
@@ -91,12 +91,6 @@ const loadData = async () => {
|
|||||||
rect.width,
|
rect.width,
|
||||||
rect.height,
|
rect.height,
|
||||||
weekArrows,
|
weekArrows,
|
||||||
{
|
|
||||||
range: [0, 1],
|
|
||||||
gridSize: 80, // 先使用较小的gridSize快速显示
|
|
||||||
bandwidth: 0.2,
|
|
||||||
showPoints: false,
|
|
||||||
}
|
|
||||||
);
|
);
|
||||||
heatMapImageSrc.value = quickPath;
|
heatMapImageSrc.value = quickPath;
|
||||||
// 延迟后再渲染精细版本
|
// 延迟后再渲染精细版本
|
||||||
|
|||||||
Reference in New Issue
Block a user