如何在 Konva js 中实现橡皮擦工具，而不使用目的地输出和我们需要的白色绘图（如对象擦除）？

Question

enter code here

我们可以在konva js中为橡皮擦工具实现对象擦除吗？实际上，如果我们使用目的地擦除，我需要擦除自由绘图线，在将线从一个地方移动或拖动到另一个地方时，我会遇到问题。为了克服这个问题，任何人都可以建议我如何在 konva js 中实现对象橡皮擦或将自由绘制的线和橡皮擦线分组。

import React from "react"
import Konva from "konva";
import {Layer, Line, Stage} from "react-konva";
import {CirclePicker} from "react-color";
const Pencil =() => {
    const [tool, setTool] = React.useState("pen");
    const [isDrawing, toggleDrawing] = React.useState(false);
    const [lines, setLines] = React.useState([]);
    const[size,setSize] = React.useState(3);
    const[color,setColor]= React.useState("red");
return(
    <div>
        <CirclePicker  value={color} color={color} onChange = {e=>{
            setColor(e.hex);
        }}/>
        <select
            value={tool}
            onChange={e => {
                setTool(e.target.value);
            }}
        >
            <option value="pen">Pen</option>
            <option value="eraser">Eraser</option>
        </select>
        <input value={size} onChange={e =>{
            setSize(parseInt(e.target.value))
            console.log(setSize)
        }} type='range' step='3' min='3' max='16'/>
    <Stage

        width={window.innerWidth}
        height={window.innerHeight}
        onMouseDown={e => {
            toggleDrawing(true);
            const pointer = e.target.getStage().getPointerPosition();
            const newLines = lines.concat({
                id: Date.now(),
                tool: tool,
                points: [pointer.x, pointer.y]
            });
            setLines(newLines);
        }}
        onMouseMove={e => {
            if (!isDrawing) {
                return;
            }
            const pointer = e.target.getStage().getPointerPosition();
            const newLines = lines.slice();
            const lastLine = {
                ...newLines[newLines.length - 1]
            };
            lastLine.size=size;
            lastLine.color=color;
            lastLine.points = lastLine.points.concat([pointer.x, pointer.y]);
            newLines[newLines.length - 1] = lastLine;
            setLines(newLines);
        }}
        onMouseUp={e => {
            toggleDrawing(false);
        }}>
    <Layer
    >
        {lines.map(line => (
            <Line
                draggable={true}
                x={window.length}
                y={window.length}
                width={window.length}
                height={window.length}
                onDragEnd={e => {
                    e.target.to({
                        // duration: 0.5,
                        // easing: Konva.Easings.ElasticEaseOut,
                        // scaleX: 1,
                        // scaleY: 1,
                        shadowOffsetX: 0,
                        shadowOffsetY: 0
                    });
                }}
                key={line.id}
                strokeWidth={line.size}
                stroke={line.color}
                points={line.points}
                globalCompositeOperation={
                    line.tool === "eraser" ? "destination-out" : "source-over"
                }
            />
        ))}
    </Layer>

    </Stage>
    </div>)



};


export default Pencil;

Answer 1

我说过这个例子https://codesandbox.io/p/sandbox/kind-lamport-kwk5v?file=%2Fsrc%2FApp.js%3A87%2C17-87%2C26.this是移动阶段，但我想要移动其中一根笔线，此时笔线和橡皮线没有交点，所以橡皮擦不起作用。我该如何解决这个问题。