search

eweitnauer / svg-erase

An eraser tool for SVG written in javascript.
Other
32 stars 3 forks source link

Compatibility with Raphael #1

Closed veeramarni closed 7 years ago

veeramarni commented 9 years ago

I'm wondering how it can work with Raphael.js. Is there any tips to make it work from the SVG created through Raphael.js?

eweitnauer commented 9 years ago

The algorithm only works on paths that are a sequence of straight line segments represented as [[x0,y0], [x1,y1], [x2,y2], ...] arrays. There is no way to split an existing path into line segments in Raphael as far as I know. Whether this algorithm is useful at all for you and how difficult the integration would be really depends on your specific situation.

veeramarni commented 9 years ago

Matter of fact, raphael stores the path in arrays. I just quickly took a snapshot of it from google chrome developer tools to give you an idea. So using those arrays can we use your eraser algorithm to split them and import to Raphael back to render the paths?

image

eweitnauer commented 9 years ago

The data stored by Raphael looks like the path commands from the SVG path definition: http://www.w3.org/TR/SVG/paths.html#PathData. These may include curved paths which are not supported by this library. You could either sample the curved paths into straight segments or extend the eraser algorithm to handle curved segements, too (might want to look how the paper.js people do this: http://paperjs.org/examples/path-intersections/). Or maybe you know you'll only have straight line segments.

A naive implementation of sampling a SVG path into straight segments would use the .getTotalLength and .getPointAtLength methods ( https://developer.mozilla.org/en-US/docs/Web/API/SVGPathElement) to sample at a fixed interval. A better implementation would sample at closer intervals when the curvature is high and at bigger intervals when the curvature is low. I implemented something along those lines here: https://github.com/eweitnauer/geom.js/blob/master/src/polygon.js#L373

Once you have the curves as straight line segments, it will be easy to pass them to the erase method and create new paths from the data that is returned.

On Wed, Jun 24, 2015 at 5:45 PM veeramarni notifications@github.com wrote:

Matter of fact, raphael stores the path in arrays. I just quickly took a snapshot of it from google chrome developer tools to give you an idea. So using those arrays can we use your eraser algorithm to split them and import to Raphael back to render the paths?

[image: image] https://cloud.githubusercontent.com/assets/3382355/8342215/846c6786-1a98-11e5-9e3d-3fd6d96f9d24.png

— Reply to this email directly or view it on GitHub https://github.com/eweitnauer/svg-erase/issues/1#issuecomment-115020987.

veeramarni commented 9 years ago

My initial requirement is to provide erase feature for lines(hand drawn) and straight lines, for that i think i can use your eraser as it is(let me know if i'm wrong). If i'm able to sent the line segment array paths using Raphael for line and eraser, your eraser algorithm should give us the modified paths, right?

eweitnauer commented 9 years ago

Yes, that should work. You will have to convert the data format between the two, though.

On Thu, Jun 25, 2015 at 11:11 AM veeramarni notifications@github.com wrote:

My initial requirement is to provide erase feature for lines(hand drawn) and straight lines, for that i think i can use your eraser as it is(let me know if i'm wrong). If i'm able to sent the line segment array paths using Raphael for line and eraser, your eraser algorithm should give us the modified paths, right?

— Reply to this email directly or view it on GitHub https://github.com/eweitnauer/svg-erase/issues/1#issuecomment-115288129.

veeramarni commented 9 years ago

I have created a small test case in below jsfiddle. Not sure what i was doing wrong, but the browser crashes. http://jsfiddle.net/veeramarni/vpf1wvgr/15/ The first free line will be used as eraser and when any additional line drawn it will call eraser function to get the unerased path. But the browser keep crashing, if you could look into it that will be great.