我正在尝试通过鼠标在画布上拖动来绘制矩形。 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;
}
}
如果你能看到,红色画布周围有像空间一样的边距。这就是我认为我的鼠标和矩形消失的程度。
答案 0 :(得分:1)
我做了这个 codesandbox 这就是你想要实现的我不得不稍微调整代码以使其工作,我认为主要原因是某些元素的默认边距或填充。通过设置
*{
margin:0;
padding: 0
}
在 scss
文件的顶部,它开始正确绘制。