在 React 中保存画布状态答案

【问题标题】：Save State of Canvas in React在 React 中保存画布状态
【发布时间】：2020-02-19 06:32:14
【问题描述】：

我正在实现 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();
       }

【问题讨论】：

标签： javascript reactjs canvas draw

【解决方案1】：

我已阅读here，您可以通过将画布转换为 json 来保存画布对于 Redux 商店，我已经使用我的 Fabric 画布实例的状态进行了测试，它是一个第三方库，是 HTML 画布 DOM 元素的包装器。

import React, { useEffect, useState } from 'react';
import './WallToDecorate.css';
import { fabric } from 'fabric';

const WallToDecorate = ({templateList=[]}) => {

  const [wallCanvas, setCanvas] = useState();

  useEffect(() => {


const canvas = new fabric.Canvas('fabric-canvas-to-decorate', {
    width: rect.width,
    height: rect.height
  });


canvas.setBackgroundImage(
  originalWallImage.src,
  canvas.renderAll.bind(canvas),
  {
    backgroundImageOpacity: 1,
    backgroundImageStretch: false,

    top: top,
    left: left,
  }
);

setCanvas(canvas);
  }, []);

  const addImageToCanvas = (event) => {

    fabric.util.loadImage(
      event.target.src,
      function (img) {
        var fab_image = new fabric.Image(img, {
        });
        wallCanvas.add(fab_image);
        wallCanvas.renderAll();
      },
      { left: 100, top: 100, angle: 0, opacity: 1 }
    );
  };

  return (
    <>
      <div id="select-image-dimensions" className="placeholder canvas-size">
        <canvas id="fabric-canvas-to-decorate" />
      </div>
             </>
  );
}

export default WallToDecorate;

在我的例子中，wallCanvas.renderAll() 刷新了画布元素。

【讨论】：