Estoy implementando un Eraser para dibujar en una aplicación React Native. Los dibujos en la aplicación se implementaron utilizando SVG.

Encontré esta respuesta muy útil sobre cómo hacerlo usando máscaras.

Sin embargo, después de implementar eso, un caso extremo que surgió al implementar lo anterior fue que cuando se agrega una máscara, no se muestra un nuevo dibujo en esa coordenada ya que la máscara lo oculta.

Entonces, se me ocurrió una solución de usar capas. Al agregar la máscara con el borrador, configuro la identificación en un número que aumenta cuando el usuario elige el borrador.

Y, cuando dibuje una nueva ruta, use el número incrementado como la identificación de la máscara.

Aquí hay una muestra de mi código:

 Array.from(Array(currentEraserMaskLayer).keys()).map((value, index) => { return ( <Mask key={`eraser-mask-${index + 1}`} id={`Mask${index + 1}`} maskUnits="userSpaceOnUse"> <Rect width="100%" height="100%" fill="white" /> <G> {currentShapes.map((shape) => { return shape.points.map((point, index) => { return ( <Circle key={index} cx={point.x} cy={point.y} r={30} fill="#000" stroke="#000" strokeWidth={0} /> ); }); })} </G> </Mask> ); });

Y, los dibujos se implementan así:

 <Path key={`shape-${shape.id}`} d={shape.d} stroke={shape.stroke} strokeWidth={4} mask={`url(#Mask${shape.eraserMaskLayer})`} />

Y esto funciona, los nuevos dibujos no quedan ocultos por las máscaras existentes.

Pero, surge otro caso extremo, los dibujos más antiguos no están ocultos por las nuevas máscaras de borrador, ya que están en diferentes 'capas'. Y, aquí es donde estoy atascado.

Apreciaré cualquier idea sobre cómo seguir adelante con esto, o si hay otra forma de implementar un Eraser usando SVG.

Por favor, hágamelo saber si necesito proporcionar más información.

Muchas gracias.