在画布上用鼠标绘制矩形与鼠标坐标不同步

Posted 2023-03-25

【中文标题】在画布上用鼠标绘制矩形与鼠标坐标不同步

【英文标题】：Drawing rectangle with mouse on canvas is not insync with mouse coordinates

【发布时间】：2021-08-18 13:19:50

【问题描述】：

我试图在画布上拖动鼠标时绘制矩形。 canavs 覆盖在 html5 视频 js 播放器上。矩形正在绘制，但它没有从正确的坐标开始向下。

我的画布（覆盖在视频上）正在渲染，周围有一些像空间一样的边距（不是我检查的边距）。我认为这是矩形不与鼠标光标同步的原因（有点偏离）。这是我的代码

 onMouseDown = (e) => 
        this.setState(
            
        )
        let start_x = e.clientX
        let start_y = e.clientY

        this.setState(
            is_drawing: true
            draw_start_x: start_x,
            draw_start_y: start_y
        ,)
    

onMouseMove = (e) => 
        let myCanvas1 = document.getElementById('myCanvas')
        let ctx1 = myCanvas.getContext('2d')
     
        if(this.state.is_drawing)

            ctx1.clearRect(0, 0, myCanvas.width, myCanvas.height);
            ctx1.beginPath()
            let width = e.clientX - this.state.draw_start_x
            let height = e.clientY - this.state.draw_start_y
           
            ctx1.fillStyle = '#000'
            ctx.fillRect(this.state.draw_start_x, this.state.draw_start_y, width, height)
            ctx1.stroke()
        
    

render()
        return (
            <div>
                <div className='video-container data-vjs-player'>
                    <canvas
                        id="myCanvas"
                        className='myCanvas'
                        onMouseDown=this.onMouseDown
                        onMouseMove=this.onMouseMove
                        onMouseUp=this.onMouseUp
                        onClick=this.onClick
                    />
                    <video
                        ref= node => this.videoNode = node 
                        // onContextMenu="return false;"
                        //ref=this.video_element
                        className="video video-js video-el vjs-big-play-centered vjs-default-skin"
                        id="video-el" loop=false controls>
                        <source
                            src="https://www.rmp-streaming.com/media/big-buck-bunny-360p.mp4" type="video/mp4"/>
                    </video>
                    <button className="play-btn" onClick=this.playPause>Play</button>
                </div>
            </div>

        )
    

scss 文件

.video-container

 background-color: aliceblue;
  width: 50%;
  height: calc(100% - 250px);
  position: relative;
  margin: 0;

  .myCanvas
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    background-color:rgba(255,0,0,0.5);
  
  .video 
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
  
  .play-btn
    position: relative;
  

应用截图

如果你能看到，红色画布周围有类似空白的空白。我想这就是我的鼠标和矩形的偏移量。

【参考方案1】：

我做了这个codesandbox 这就是你想要实现的，我不得不稍微调整代码以使其工作，我认为主要原因是某些元素的默认边距或填充。通过设置

*
   margin:0;
   padding: 0
 

在scss 文件的顶部，它开始正确绘制。