javascript - 如何使用反应离子在图像上绘制点？

Question

我正面临使用 heatmap.js 在来自服务器端的图像上绘制带有动态点的热图的问题。

使用带有反应离子的 heatmap.js。

我可以在桌面视图上绘制点，但我想在移动视图上绘制它。

import React from "react";
import h337 from "heatmap.js";
import Image from './road.jpg'
import './styles.css'

interface IControlAreaProps {
    location?: any;
    state?: any;
    history?: any;
}

const App: React.FC<IControlAreaProps> = () => {

    const handleHeatmap = () => {

        let heatmapInstance = h337.create({
            container: document.querySelector('.heatmap'),
            gradient: {
                '1': 'blue',
            },
        });

       
        let points: any = [ 

            //with these point you can see the heatmap plotted on the image
             { x: 58, y: 63, value: 80 },
             { x: 28, y: 73, value: 90 },
             { x: 98, y: 83, value: 60 }

             // but these point heat map are not ploting
            //  { x: 588, y: 625, value: 50 },
            //  { x: 828, y: 465, value: 60 },
            //  { x: 460, y: 447, value: 40}
            ];
        let data = {
            max: 100,
            min: 0,
            data: points
        };
        heatmapInstance.setData(data);

        var div: any = document.getElementById('mydiv');
        div.style.display = div?.style.display === "block" ? "none" : "block";
    }



    return (
        <>
            <button onClick={handleHeatmap} >
                showHeatMap
                </button>
            <div id="mydiv" className="heatmap">
                <img src={Image} alt="image"/>
                </div>
        </>

    );
};
export default App;

我正在寻找如何使用动态点在图像上绘制热图的解决方案。我试过调整画布和图像的大小。

如果有任何其他方法或库可以在图像上绘制热图，那也可以。

标签： javascriptreactjsionic-frameworkheatmap