代码优化
This commit is contained in:
@@ -43,7 +43,7 @@ const ringText = (ring) => {
|
||||
<view class="container">
|
||||
<view>
|
||||
<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)) }}%
|
||||
</text>
|
||||
<view
|
||||
|
||||
@@ -92,7 +92,9 @@ function getHeatColor(density) {
|
||||
// 低密度:浅绿色
|
||||
const green = Math.round(200 + 55 * 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 {
|
||||
// 高密度:深绿色
|
||||
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)",
|
||||
} = options;
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
// 微信小程序使用 Canvas 2D
|
||||
return new Promise((resolve, reject) => {
|
||||
try {
|
||||
@@ -197,67 +198,6 @@ export function drawKDEHeatmap(canvasId, width, height, points, options = {}) {
|
||||
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,
|
||||
options = {}
|
||||
) {
|
||||
// #ifdef MP-WEIXIN
|
||||
// Canvas 2D 导出(传入 canvas 对象)
|
||||
return new Promise((resolve, reject) => {
|
||||
drawKDEHeatmap(canvasId, width, height, points, options)
|
||||
@@ -301,26 +240,6 @@ export function generateKDEHeatmapImage(
|
||||
})
|
||||
.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) => {
|
||||
|
||||
@@ -282,7 +282,6 @@ onShareTimeline(() => {
|
||||
:src="heatMapImageSrc"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<canvas
|
||||
id="heatMapCanvas"
|
||||
canvas-id="heatMapCanvas"
|
||||
@@ -296,20 +295,6 @@ onShareTimeline(() => {
|
||||
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 class="reward" v-if="data.totalArrow">
|
||||
<button hover-class="none" @click="showTip = true">
|
||||
|
||||
Reference in New Issue
Block a user