在 ReactJs 中使用画布上的鼠标事件绘制一条直线

Question

我想画一条直线。当我单击画布并移动光标时，我实现了绘制点，并且在我释放鼠标按钮时也停止绘制。

但我需要画直线。我在stackoverflow上找到了解决方案，但它们在Jquery和Javascript中。我不想使用 JQuery。

一些解决方案建议创建 2 个画布 1 用于存储行，1 个用于在画布上绘制线条。

但我知道它可以通过单个画布来实现，我非常接近实现这一目标。

以下是我的代码。

export default class CanvasComponent extends React.Component{
constructor(props) {
super(props);
this.state={
isDown: false
}
this.handleMouseDown = this.handleMouseDown.bind(this);
this.handleMouseMove = this.handleMouseMove.bind(this);
this.handleMouseUp = this.handleMouseUp.bind(this);
}
render() {
return (
<div>
<canvas id="canvas" ref="canvas"
width={640}
height={425}
onMouseDown={
e => {
let nativeEvent = e.nativeEvent;
this.handleMouseDown(nativeEvent);
}}
onMouseMove={
e => {
let nativeEvent = e.nativeEvent;
this.handleMouseMove(nativeEvent);
}}

onMouseUp={
e => {
let nativeEvent = e.nativeEvent;
this.handleMouseUp(nativeEvent);
}}
/>
</div>

);
}
handleMouseDown(event){
console.log(event);
this.setState({
isDown: true
},()=>{
const canvas = ReactDOM.findDOMNode(this.refs.canvas);
var x = event.offsetX;
var y = event.offsetY;
var ctx = canvas.getContext("2d");
console.log(x,y);
ctx.moveTo(x,y);
ctx.lineTo(x+1,y+1);
ctx.stroke();
})
}
handleMouseMove(event){
if(this.state.isDown){
const canvas = ReactDOM.findDOMNode(this.refs.canvas);
var x = event.offsetX;
var y = event.offsetY;
var ctx = canvas.getContext("2d");
ctx.moveTo(x,y);
ctx.lineTo(x+1,y+1);
ctx.stroke();
ctx.closePath();
}
}
handleMouseUp(){
this.setState({
isDown: false
})
}
componentDidMount() {
const canvas = ReactDOM.findDOMNode(this.refs.canvas);
const ctx = canvas.getContext("2d");
ctx.fillStyle = 'rgb(200,255,255)';
ctx.fillRect(0, 0, 640, 425);
}

}

Answer 1

您需要将前一个点存储在状态中。在handleMouseUp(即OnMouseUp(事件中，您需要在前一点和当前点之间绘制线条。这是更改的代码：

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
export default class canvas extends React.Component{
constructor(props) {
super(props);
//added state 
this.state={
isDown: false,
previousPointX:'',
previousPointY:''
}
this.handleMouseDown = this.handleMouseDown.bind(this);
this.handleMouseMove = this.handleMouseMove.bind(this);
this.handleMouseUp = this.handleMouseUp.bind(this);
}
render() {
return (
<div>    
<canvas id="canvas" ref="canvas"
width={640}
height={425}
onMouseDown={
e => {
let nativeEvent = e.nativeEvent;
this.handleMouseDown(nativeEvent);
}}
onMouseMove={
e => {
let nativeEvent = e.nativeEvent;
this.handleMouseMove(nativeEvent);
}}    
onMouseUp={
e => {
let nativeEvent = e.nativeEvent;
this.handleMouseUp(nativeEvent);
}}
/>
</div>    
);
}
handleMouseDown(event){ //added code here
console.log(event);    
this.setState({
isDown: true,
previousPointX:event.offsetX,
previousPointY:event.offsetY
},()=>{    
const canvas = ReactDOM.findDOMNode(this.refs.canvas);    
var x = event.offsetX;
var y = event.offsetY;
var ctx = canvas.getContext("2d");
console.log(x,y);
ctx.moveTo(x,y);
ctx.lineTo(x+1,y+1);
ctx.stroke();
})
}
handleMouseMove(event){
}
handleMouseUp(event){
this.setState({
isDown: false
});
//if(this.state.isDown){
const canvas = ReactDOM.findDOMNode(this.refs.canvas);
var x = event.offsetX;
var y = event.offsetY;
var ctx = canvas.getContext("2d");
ctx.moveTo(this.state.previousPointX,this.state.previousPointY);
ctx.lineTo(x,y);
ctx.stroke();
ctx.closePath();
//}
}
componentDidMount() {
const canvas = ReactDOM.findDOMNode(this.refs.canvas);
const ctx = canvas.getContext("2d");
ctx.fillStyle = 'rgb(200,255,255)';
ctx.fillRect(0, 0, 640, 425);
}
}

Answer 2

将第一个坐标保留为全局或类变量，以便您可以在第二次单击时绘制线条。

光标移动时是否需要显示临时行？然后添加第二个图层，每次鼠标移动时都会在其上绘制一条具有相同坐标的线(在重绘之前清除该图层！