在ReactJS中在图像上添加鼠标跟踪数据

Question

我使用JS让人用鼠标画一个图像。我捕获了他们最终产品的 PNG 以及鼠标跟踪数据。我现在想在 ReactJS 中显示最终图像并在其上覆盖鼠标跟踪信息。

我可以使用以下方式显示原始 PNG 图像：

<img id="Replay Image" src={value} alt="Sketchpad screenshot"></img>

我想在此图像上添加我的鼠标跟踪信息。

我也愿意在我的页面上显示图像，当用户单击图像时，它会在新页面中打开，然后我添加鼠标数据。这里的问题是我不知道如何将原始图像数据发送到新窗口。

任何帮助都会很棒。谢谢你

我尝试使用 document.getElementbyID("Replay Image") 获取图像位置，然后使用此信息开始绘制鼠标信息。这不起作用，因为当页面加载时，图像不在屏幕上，用户需要向下滚动才能看到它。

Answer 1

要在ReactJS中将鼠标跟踪数据叠加到图像上，可以使用该元素绘制图像，然后叠加鼠标跟踪数据。

创建画布组件

import React, { useRef, useEffect } from 'react';

const MouseTrackingOverlay = ({ imageSrc, mouseData }) => {
  const canvasRef = useRef(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');
    const image = new Image();

    image.src = imageSrc;
    image.onload = () => {
      // Set canvas dimensions to match the image dimensions
      canvas.width = image.width;
      canvas.height = image.height;
      
      // Draw the image on the canvas
      ctx.drawImage(image, 0, 0);

      // Draw the mouse tracking data
      ctx.beginPath();
      ctx.strokeStyle = 'red';
      ctx.lineWidth = 2;
      mouseData.forEach((point, index) => {
        if (index === 0) {
          ctx.moveTo(point.x, point.y);
        } else {
          ctx.lineTo(point.x, point.y);
        }
      });
      ctx.stroke();
    };
  }, [imageSrc, mouseData]);

  return <canvas ref={canvasRef}></canvas>;
};

export default MouseTrackingOverlay;

在主组件中使用 MouseTrackingOverlay 组件。将图像源和鼠标跟踪数据作为道具传递。

import React, { useState } from 'react';
import MouseTrackingOverlay from './MouseTrackingOverlay';

const App = () => {
  const [imageSrc] = useState('path_to_your_image.png');
  const [mouseData] = useState([
    // Example mouse tracking data
    { x: 10, y: 20 },
    { x: 50, y: 60 },
    { x: 80, y: 100 },
    // Add more points as needed
  ]);

  return (
    <div>
      <h1>Mouse Tracking Overlay</h1>
      <MouseTrackingOverlay imageSrc={imageSrc} mouseData={mouseData} />
    </div>
  );
};

export default App;

如果您想在新窗口中打开图像并在其中叠加鼠标跟踪数据，您可以通过 URL 发送图像数据和鼠标跟踪数据或使用“postMessage”等窗口通信方法。

接收数据并渲染组件。 在新窗口脚本中，可以监听消息并渲染组件

这种方法将允许您打开一个新窗口并将图像数据和鼠标跟踪数据传递给它。新窗口将使用鼠标跟踪叠加层渲染图像。