代码优化
This commit is contained in:
@@ -43,7 +43,7 @@ const ringText = (ring) => {
|
|||||||
<view class="container">
|
<view class="container">
|
||||||
<view>
|
<view>
|
||||||
<view v-for="(b, index) in bars" :key="index">
|
<view v-for="(b, index) in bars" :key="index">
|
||||||
<text v-if="b && b.rate * 100 > 0.1">
|
<text v-if="b && b.rate">
|
||||||
{{ Number((b.rate * 100).toFixed(1)) }}%
|
{{ Number((b.rate * 100).toFixed(1)) }}%
|
||||||
</text>
|
</text>
|
||||||
<view
|
<view
|
||||||
|
|||||||
@@ -92,7 +92,9 @@ function getHeatColor(density) {
|
|||||||
// 低密度:浅绿色
|
// 低密度:浅绿色
|
||||||
const green = Math.round(200 + 55 * intensity);
|
const green = Math.round(200 + 55 * intensity);
|
||||||
const blue = Math.round(50 + 100 * intensity);
|
const blue = Math.round(50 + 100 * intensity);
|
||||||
return `rgba(${Math.round(50 * intensity)}, ${green}, ${blue}, ${alpha * 0.7})`;
|
return `rgba(${Math.round(50 * intensity)}, ${green}, ${blue}, ${
|
||||||
|
alpha * 0.7
|
||||||
|
})`;
|
||||||
} else {
|
} else {
|
||||||
// 高密度:深绿色
|
// 高密度:深绿色
|
||||||
const red = Math.round(50 * (intensity - 0.5) * 2);
|
const red = Math.round(50 * (intensity - 0.5) * 2);
|
||||||
@@ -120,7 +122,6 @@ export function drawKDEHeatmap(canvasId, width, height, points, options = {}) {
|
|||||||
pointColor = "rgba(255, 255, 255, 0.9)",
|
pointColor = "rgba(255, 255, 255, 0.9)",
|
||||||
} = options;
|
} = options;
|
||||||
|
|
||||||
// #ifdef MP-WEIXIN
|
|
||||||
// 微信小程序使用 Canvas 2D
|
// 微信小程序使用 Canvas 2D
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
try {
|
try {
|
||||||
@@ -197,67 +198,6 @@ export function drawKDEHeatmap(canvasId, width, height, points, options = {}) {
|
|||||||
reject(error);
|
reject(error);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
// #endif
|
|
||||||
|
|
||||||
// #ifndef MP-WEIXIN
|
|
||||||
// 其他平台沿用旧版绘制上下文
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
try {
|
|
||||||
const ctx = uni.createCanvasContext(canvasId);
|
|
||||||
ctx.clearRect(0, 0, width, height);
|
|
||||||
|
|
||||||
if (!points || points.length === 0) {
|
|
||||||
ctx.draw(false, () => resolve());
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const kernel = kernelEpanechnikov(bandwidth);
|
|
||||||
const kde = kernelDensityEstimator(kernel, range, gridSize);
|
|
||||||
const densityData = kde(points);
|
|
||||||
|
|
||||||
const cellWidth = width / gridSize;
|
|
||||||
const cellHeight = height / gridSize;
|
|
||||||
const xRange = range[1] - range[0];
|
|
||||||
const yRange = range[1] - range[0];
|
|
||||||
|
|
||||||
densityData.forEach(([x, y, density]) => {
|
|
||||||
const normalizedX = (x - range[0]) / xRange;
|
|
||||||
const normalizedY = (y - range[0]) / yRange;
|
|
||||||
const canvasX = normalizedX * width;
|
|
||||||
const canvasY = normalizedY * height;
|
|
||||||
|
|
||||||
const color = getHeatColor(density);
|
|
||||||
ctx.setFillStyle(color);
|
|
||||||
ctx.beginPath();
|
|
||||||
ctx.arc(
|
|
||||||
canvasX,
|
|
||||||
canvasY,
|
|
||||||
Math.min(cellWidth, cellHeight) * 0.6,
|
|
||||||
0,
|
|
||||||
2 * Math.PI
|
|
||||||
);
|
|
||||||
ctx.fill();
|
|
||||||
});
|
|
||||||
|
|
||||||
if (showPoints) {
|
|
||||||
ctx.setFillStyle(pointColor);
|
|
||||||
points.forEach(([x, y]) => {
|
|
||||||
const normalizedX = (x - range[0]) / xRange;
|
|
||||||
const normalizedY = (y - range[0]) / yRange;
|
|
||||||
const canvasX = normalizedX * width;
|
|
||||||
const canvasY = normalizedY * height;
|
|
||||||
ctx.beginPath();
|
|
||||||
ctx.arc(canvasX, canvasY, 2.5, 0, 2 * Math.PI);
|
|
||||||
ctx.fill();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
ctx.draw(false, () => resolve());
|
|
||||||
} catch (error) {
|
|
||||||
reject(error);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
// #endif
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -271,7 +211,6 @@ export function generateKDEHeatmapImage(
|
|||||||
points,
|
points,
|
||||||
options = {}
|
options = {}
|
||||||
) {
|
) {
|
||||||
// #ifdef MP-WEIXIN
|
|
||||||
// Canvas 2D 导出(传入 canvas 对象)
|
// Canvas 2D 导出(传入 canvas 对象)
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
drawKDEHeatmap(canvasId, width, height, points, options)
|
drawKDEHeatmap(canvasId, width, height, points, options)
|
||||||
@@ -301,26 +240,6 @@ export function generateKDEHeatmapImage(
|
|||||||
})
|
})
|
||||||
.catch(reject);
|
.catch(reject);
|
||||||
});
|
});
|
||||||
// #endif
|
|
||||||
|
|
||||||
// #ifndef MP-WEIXIN
|
|
||||||
// 旧版导出(使用 canvasId)
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
drawKDEHeatmap(canvasId, width, height, points, options)
|
|
||||||
.then(() => {
|
|
||||||
uni.canvasToTempFilePath({
|
|
||||||
canvasId,
|
|
||||||
width,
|
|
||||||
height,
|
|
||||||
destWidth: width * 3,
|
|
||||||
destHeight: height * 3,
|
|
||||||
success: (res) => resolve(res.tempFilePath),
|
|
||||||
fail: reject,
|
|
||||||
});
|
|
||||||
})
|
|
||||||
.catch(reject);
|
|
||||||
});
|
|
||||||
// #endif
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export const generateHeatMapData = (width, height, amount = 100) => {
|
export const generateHeatMapData = (width, height, amount = 100) => {
|
||||||
|
|||||||
@@ -282,7 +282,6 @@ onShareTimeline(() => {
|
|||||||
:src="heatMapImageSrc"
|
:src="heatMapImageSrc"
|
||||||
mode="aspectFill"
|
mode="aspectFill"
|
||||||
/>
|
/>
|
||||||
<!-- #ifdef MP-WEIXIN -->
|
|
||||||
<canvas
|
<canvas
|
||||||
id="heatMapCanvas"
|
id="heatMapCanvas"
|
||||||
canvas-id="heatMapCanvas"
|
canvas-id="heatMapCanvas"
|
||||||
@@ -296,20 +295,6 @@ onShareTimeline(() => {
|
|||||||
z-index: 2;
|
z-index: 2;
|
||||||
"
|
"
|
||||||
/>
|
/>
|
||||||
<!-- #endif -->
|
|
||||||
<!-- #ifndef MP-WEIXIN -->
|
|
||||||
<canvas
|
|
||||||
canvas-id="heatMapCanvas"
|
|
||||||
style="
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
position: absolute;
|
|
||||||
top: -1000px;
|
|
||||||
left: 0;
|
|
||||||
z-index: 2;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<!-- #endif -->
|
|
||||||
</view>
|
</view>
|
||||||
<view class="reward" v-if="data.totalArrow">
|
<view class="reward" v-if="data.totalArrow">
|
||||||
<button hover-class="none" @click="showTip = true">
|
<button hover-class="none" @click="showTip = true">
|
||||||
|
|||||||
Reference in New Issue
Block a user