react-native-draw icon indicating copy to clipboard operation
react-native-draw copied to clipboard

Add rudimentary layering support

Open BenJeau opened this issue 3 years ago • 0 comments

It would be nice to have a layer system built into the Canvas which would allow the following examples to work:

  • Have a "highlighter" on top on every other strokes
  • Creating a sophisticated drawing app
  • Integrating drawing in a game (multi-user drawing, ...)

Implementation

This should be rather simple.

  1. The Canvas should have a prop specifying the layer, for simplicity, it would be a number, similar to how z-index works. The default would be 0.
  2. In the renderer, we would concatenate all the paths and the depth will simply come from the inherent order of the paths and nothing else needs to be done (the only
  3. PathType would have a layer attribute OR the paths should be grouped together in the same array (the first may be better for the end user, but the second one would make it simpler for the renderer and possibly more performant - worst case, there could be a conversion made from the second to the first one)
[paths]

OR

{
  0: [pathsOfLayer0],
  1: [pathsOfLayer1]
}

BenJeau avatar Feb 04 '22 23:02 BenJeau