BenJeau / react-native-draw

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

Combine paths if strokes have same properties (except for the d attribute) #48

Closed Anubhavshakya closed 2 years ago

Anubhavshakya commented 2 years ago

getSvg() function returns multiple path with d attrtibute. @BenJeau Is there any functionality to make only one path with d attribute ?? example Right Now <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200"><path d="M39,176c0,-21 11,-40 19,-59c8,-20 18,-39 27,-59c3,-7 20,-56 24,-42c8,26 11,51 16,77c3,15 15,45 15,63" stroke="#457429" stroke-width="3" opacity="1" stroke-linecap="round" stroke-linejoin="round" fill="none"/><path d="M67,91c-1,2 4,3 7,3c17,3 33,4 50,4" stroke="#457429" stroke-width="3" opacity="1" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg>

Expected <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200"><path d="M39,176c0,-21 11,-40 19,-59c8,-20 18,-39 27,-59c3,-7 20,-56 24,-42c8,26 11,51 16,77c3,15 15,45 15,63 M67,91c-1,2 4,3 7,3c17,3 33,4 50,4" stroke="#457429" stroke-width="3" opacity="1" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg>

BenJeau commented 2 years ago

That is an interesting use case, I wasn't aware that you can represent "multiple" strokes within a single Path. I'm debating on:

  1. Either changing the underlying data structure so that it now contains an array of PathDataType

https://github.com/BenJeau/react-native-draw/blob/dbfd20cf4eb83d3546739632cd6405957a8c5f84/src/types.ts#L3-L29

  1. Or either modify the output of SVG so that if all the other properties of the next stroke is the same, it will combine the d attribute of Path

https://github.com/BenJeau/react-native-draw/blob/dbfd20cf4eb83d3546739632cd6405957a8c5f84/src/Draw.tsx#L518-L523

I'll try implementing the first one, and if there are some problems, I'll look at the second option

BenJeau commented 2 years ago

I am unsure if this should be implemented actually, since if the strokes have an opacity lower than 1, then the resulting drawing is different.

Current behaviour:

https://user-images.githubusercontent.com/22248828/152661325-93d631a7-0b55-49bd-b40e-52a157b56682.mp4

What this change would bring:

https://user-images.githubusercontent.com/22248828/152661326-c69d7364-4517-4046-a870-3c618402afab.mp4

I have implemented it in the feat-combine-paths branch, I will try to figure out a way so that this library supports both ways of drawing - if I can't, I won't add this to the library. The default will not combine paths, but I'll add a prop to make it so that it is doable