Сохранить состояние холста в реакции - PullRequest
Новая
       21

Сохранить состояние холста в реакции

1 голос
/ 19 февраля 2020

Я реализую функцию Draw, чтобы нарисовать линию на холсте. Функция Draw активируется при первом двойном щелчке, а при перемещении мыши рисуется линия, а при втором двойном щелчке функция Draw отключается. Когда я дважды щелкаю третий раз, ранее нарисованная линия исчезает. Мое требование - я хочу сохранить все строки. Как я могу это сделать? Ниже моя функция рисования: 

handleMouseMove(event){
        if(this.state.isDouble)
        {

            this.Draw(event)
        }
        else{

        }
    }
 Draw(event){


        x2=event.offsetX
        y2=event.offsetY
        const canvas = document.getElementById("canvas");

        var ctx = canvas.getContext("2d");

        ctx.lineWidth = 3;
        //Deleting The State
        ctx.canvas.width = ctx.canvas.width;


        console.log("First" + this.state.previousPointX,this.state.previousPointY)
        console.log("Second" + x2,y2)
        xtemp=x2
        ytemp=this.state.previousPointY


        console.log("Temp" + xtemp,ytemp)
        ctx.beginPath()

        ctx.moveTo(xtemp,ytemp);
        ctx.lineTo(x2,y2);
        ctx.stroke();
        ctx.moveTo(xtemp,ytemp);
        ctx.lineTo(this.state.previousPointX,this.state.previousPointY);
        ctx.strokeStyle = "black";
        ctx.stroke();
       }
...