BenJeau / react-native-draw

SVG based data-driven React Native drawing component 🎨
https://www.npmjs.com/package/@benjeau/react-native-draw
MIT License
129 stars 42 forks source link

Add rudimentary layering support #46

Open BenJeau opened 2 years ago

BenJeau commented 2 years ago

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

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]
}