QML Canvas绘制热力图异常：呈现杂乱矩形，求平滑方案

核心问题分析 #

你遇到的杂乱堆叠矩形问题，大概率是以下几个原因导致：

1. 未设置正确的全局合成模式，导致热力点之间无法实现颜色叠加的平滑效果；
2. 用矩形（fillRect）替代了径向渐变圆形绘制；
3. 径向渐变的参数设置错误，或者颜色透明度逻辑不对。

修复步骤与代码示例 #

以下是针对QML Canvas的修正方案，完全适配原HTML5热力图的逻辑：

import QtQuick 2.15

Canvas {
    id: heatmapCanvas
    width: 600
    height: 400

    // 模拟热力点数据：x坐标、y坐标、权重值(0-1)
    property var heatPoints: [
        {x: 120, y: 100, val: 0.9},
        {x: 250, y: 180, val: 0.7},
        {x: 380, y: 220, val: 0.85},
        {x: 180, y: 300, val: 0.6},
        {x: 420, y: 150, val: 0.75}
    ]
    property int baseRadius: 60  // 热力点基础半径

    onPaint: {
        const ctx = getContext("2d");
        ctx.clearRect(0, 0, width, height);

        // 关键：设置合成模式为lighter，实现颜色叠加发光效果
        ctx.globalCompositeOperation = "lighter";

        heatPoints.forEach(point => {
            const effectiveRadius = baseRadius * point.val;
            // 创建径向渐变：中心高透明度，边缘完全透明
            const gradient = ctx.createRadialGradient(
                point.x, point.y, 0,
                point.x, point.y, effectiveRadius
            );
            gradient.addColorStop(0, `rgba(255, 0, 0, ${point.val})`);
            gradient.addColorStop(1, "rgba(255, 0, 0, 0)");

            // 绘制圆形热力点
            ctx.fillStyle = gradient;
            ctx.beginPath();
            ctx.arc(point.x, point.y, effectiveRadius, 0, Math.PI * 2);
            ctx.closePath();
            ctx.fill();
        });

        // 可选：将单色渐变转为彩色热力色阶（如蓝→红）
        const imageData = ctx.getImageData(0, 0, width, height);
        const pixels = imageData.data;
        for (let i = 0; i < pixels.length; i += 4) {
            const red = pixels[i];
            if (red > 0) {
                const intensity = red / 255;
                // 色阶映射：强度越高越红，越低越蓝
                pixels[i] = Math.floor(255 * intensity);       // R
                pixels[i + 1] = 0;                             // G
                pixels[i + 2] = Math.floor(255 * (1 - intensity)); // B
            }
        }
        ctx.putImageData(imageData, 0, 0);
    }
}

关键修改说明 #

• 全局合成模式：ctx.globalCompositeOperation = "lighter" 是实现平滑热力叠加的核心，没有这个设置，每个热力点会互相覆盖，呈现离散的形状。
• 径向渐变圆形：用arc绘制圆形替代矩形，配合径向渐变实现从中心到边缘的透明过渡，避免堆叠矩形的问题。
• 动态半径调整：根据热力点的权重值调整半径，让权重高的点覆盖范围更大，更突出。
• 彩色映射优化：通过getImageData修改像素数据，将单色渐变转为符合视觉习惯的彩色热力色阶，这一步和原HTML教程逻辑一致。

额外排查点 #

如果修改后仍有问题，检查：

1. Canvas的renderTarget属性，默认是FramebufferObject，如果改为Image可能会有渲染差异；
2. 确保所有绘制逻辑都在onPaint回调内执行，QML Canvas的上下文状态不会持久化；
3. 热力点的坐标是否超出Canvas范围，导致部分点被截断。

内容的提问来源于stack exchange，提问作者Hoang Nguyen