ReactJS 和 Konva 用铅笔、画笔和橡皮擦免费绘图答案

【问题标题】：ReactJS and Konva free drawing with pencil, brush and eraserReactJS 和 Konva 用铅笔、画笔和橡皮擦免费绘图
【发布时间】：2020-09-03 21:44:50
【问题描述】：

我想创建一个简单的应用程序，我可以在其中选择铅笔、画笔和橡皮擦。我有 Home.js 和 addLine.js。但是有一个我无法修复的错误。当我从画笔改回铅笔时，我正在用铅笔画画，但是铅笔画周围有一个边框，它采用了我之前用于画笔的颜色。 Sample bug pucture 如果重要的话，我会使用 react color 进行颜色选择。

const Home = () => {
 
  
  const stageEl = React.createRef();
  const layerEl = React.createRef();
  const [color, setColor] = useState('');

  
  return (
    <div className="home-page-div">
      <h1>This is the Home page!</h1>
    
      <button onClick= { () => addLine(stageEl.current.getStage(), layerEl.current, color, "pencil")}>Pencil</button>
     <button onClick={ () => addLine(stageEl.current.getStage(), layerEl.current, color, "brush")}>Brush</button>
      <button onClick={() => addLine(stageEl.current.getStage(), layerEl.current, color, "eraser")}>Erase</button>
      <CompactPicker 
      color={color} 
      onChange={(color)=>{setColor(color.hex)}}
      />       
      <Stage
        width={window.innerWidth * 0.9}
        height={window.innerHeight - 150}
        ref={stageEl}
      
      >
        <Layer ref={layerEl}>
        
        </Layer>
      </Stage>
    </div>
  )
};

export default Home;

和添加线

export const addLine = (stage, layer, color, mode) => {
  let isPaint = false;
  let lastLine;
 
  stage.on("mousedown touchstart", function(e) {
    isPaint = true;
    let pos = stage.getPointerPosition();
    lastLine = new Konva.Line({
      stroke:  `${color}`,
      strokeWidth:  mode === "brush" ? 8 : mode === "pencil" ? 1 : 10,
      globalCompositeOperation:
        mode === "eraser" ? 'destination-out' : 'source-over',
      points: [pos.x, pos.y],
      draggable: false,
    });
    layer.add(lastLine);
  });
  console.log(mode);
  console.log(color);
  stage.on("mouseup touchend", function() {
    isPaint = false;
  });
  stage.on("mousemove touchmove", function() {
    if (!isPaint) {
      return;
    }
    
  const pos = stage.getPointerPosition();
    let newPoints = lastLine.points().concat([pos.x, pos.y]);
    lastLine.points(newPoints);
    layer.batchDraw();
  });
};

【问题讨论】：

标签： reactjs react-konva konva konvajs-reactjs

【解决方案1】：

单击按钮时，您正在调用addLine() 函数：

<button onClick= { () => addLine(stageEl.current.getStage(), layerEl.current, color, "pencil")}>Pencil</button>

在该函数中，您正在添加新的甚至监听器：

stage.on("mousedown touchstart", function(e) {
  // .. function
});

这意味着每次点击都会添加一个新的侦听器。因此，当您单击另一个工具时，旧工具仍然可以使用。

两个解决问题可以使用两种方式：

只听一次舞台事件，在addLine()函数里面只是改变当前行的当前属性。与Konva free drawing demo中的做法类似
或者使用node.off() method 删除addLine() 函数中所有以前的侦听器。但我不推荐这种方法，因为如果您删除了错误的侦听器，它可能会导致错误。

【讨论】：