如何在图像上绘制矩形

Question

我已经使用react hooks创建了一个图像画布，我想在其上绘制一个矩形，这样当我在该图像中的任何对象上绘制该矩形时，它都会得到一个边框。 / p>

现在，我可以创建框了，但是只要拖动鼠标它就可以创建多个框。您可以检查附加图像中的人是否在多个矩形框内，但是我想要一个框。

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

const ImageTracking = props =>{
    const [defaultProp, setDefaultProp] = useState({})
    const [imageUrl, setImageUrl]= useState({imgUrl:null})
    const canvasRef = useRef(null)
    const imageRef = useRef(null)
    let canvas = null;
  let ctx = null;
  let isDirty = false;
  let isDrag = false;
  let startX = -1;
  let startY = -1;
  let curX = -1;
  let curY = -1;
    useEffect(() => {     
        setImageUrl({imgUrl:'https://www.mariogiannini.com/wp-content/uploads/2017/10/Photo.jpg'})  
        canvas = canvasRef.current
        ctx = canvas.getContext('2d')   
        const imgref = imageRef.current
        imgref.onload =() =>{

        ctx.drawImage(imgref, 0, 0,imgref.width,imgref.height);

        ctx.beginPath();
        // ctx.lineWidth = 2;
        // ctx.strokeStyle = 'red';
        // ctx.stroke();
        addMouseEvents();
        }

    },[])
    const updateCanvas = () => {
        if (isDrag) {
          requestAnimationFrame(updateCanvas)
        }
        if (!isDirty) {
          return
        }
        if (isDrag) {      
          const rect = {
            x: startX,
            y: startY,
            w: curX - startX,
            h: curY - startY,
          }
          ctx.strokeRect(rect.x, rect.y, rect.w, rect.h)  
          //ctx.clearRect(rect.x, rect.y, rect.w, rect.h)
        }  
        isDirty = false
      };

    useEffect(() => {
      return () => {
        removeMouseEvents()
        console.log('will unmount');
      }
    }, []);


      const addMouseEvents= ()=> {
        document.addEventListener('mousedown', onMouseDown, false);
        document.addEventListener('mousemove', onMouseMove, false);
        document.addEventListener('mouseup', onMouseUp, false);
      }
      const removeMouseEvents =()=> {
        document.removeEventListener('mousedown', onMouseDown, false);
        document.removeEventListener('mousemove',onMouseMove, false);
        document.removeEventListener('mouseup', onMouseUp, false);
      }

      const onMouseDown = (e) => {
        isDrag = true
        curX = startX = e.offsetX
        curY = startY = e.offsetY
        requestAnimationFrame(updateCanvas)
      };

      const onMouseMove = (e) => {
        if (! isDrag) return
        curX = e.offsetX
        curY = e.offsetY
        isDirty = true

      };

      const onMouseUp = (e) => {
        isDrag = false
        isDirty = false
        const rect = {
          x: Math.min(startX, curX),
          y: Math.min(startY, curY),
          w: Math.abs(e.offsetX - startX),
          h: Math.abs(e.offsetY - startY),
        }
        setDefaultProp({...defaultProp,onSelected:(rect)})
      };

console.log(defaultProp)    

    return(
        <>
          <canvas ref={canvasRef} width="400" height="600" >
            <img ref={imageRef} src={imageUrl.imgUrl} className="" />
          </canvas>
        </>
    );
}

export default ImageTracking;