Convert path to array

196 views
Skip to first unread message

cooolawe

unread,
Jun 25, 2015, 2:47:17 PM6/25/15
to raph...@googlegroups.com

I'm assuming the group is still active. I have a question on how we can convert Raphael generated path as shown at very bottom to arrays( which suites below requirement). 

Each individual path is represented as an array of points, with each point being an [x, y] array. `[[0,0], [100,100]]` is an example of a path consisting of a single line segment from the origin to (100,100). `[20,10]` would also be a valid path, consisting of a single point at the position (20,10).


<path fill="none" stroke="#3c5980" d="M461.34375,214L461.34375,214C460.84375,214,458.84375,214,458.34375,214C457.84375,214,458.34375,214,458.34375,214C458.34375,214,460.1770833333333,214,458.34375,214C456.5104166666667,214,451.34375,214,447.34375,214C443.34375,214,440.1770833333333,213.33333333333334,434.34375,214C428.5104166666667,214.66666666666666,419.1770833333333,215.66666666666666,412.34375,218C405.5104166666667,220.33333333333334,399.5104166666667,223.33333333333334,393.34375,228C387.1770833333333,232.66666666666666,380.0104166666667,241,375.34375,246C370.6770833333333,251,368.1770833333333,254,365.34375,258C362.5104166666667,262,360.1770833333333,266.3333333333333,358.34375,270C356.5104166666667,273.6666666666667,355.0104166666667,277,354.34375,280C353.6770833333333,283,354.34375,284.6666666666667,354.34375,288C354.34375,291.3333333333333,353.5104166666667,296.3333333333333,354.34375,300C355.1770833333333,303.6666666666667,356.6770833333333,306.6666666666667,359.34375,310C362.0104166666667,313.3333333333333,365.84375,316.8333333333333,370.34375,320C374.84375,323.1666666666667,380.5104166666667,327,386.34375,329C392.1770833333333,331,399.0104166666667,331.5,405.34375,332C411.6770833333333,332.5,419.5104166666667,333,424.34375,332C429.1770833333333,331,431.84375,328,434.34375,326C436.84375,324,437.5104166666667,322.6666666666667,439.34375,320C441.1770833333333,317.3333333333333,445.1770833333333,313,445.34375,310C445.5104166666667,307,445.5104166666667,304.8333333333333,440.34375,302C435.1770833333333,299.1666666666667,422.6770833333333,295,414.34375,293C406.0104166666667,291,398.34375,290.6666666666667,390.34375,290C382.34375,289.3333333333333,374.0104166666667,289.1666666666667,366.34375,289C358.6770833333333,288.8333333333333,349.34375,289,344.34375,289C339.34375,289,338.6770833333333,288.5,336.34375,289C334.0104166666667,289.5,331.6770833333333,291.3333333333333,330.34375,292C329.0104166666667,292.6666666666667,328.6770833333333,292.5,328.34375,293C328.0104166666667,293.5,328.34375,294.6666666666667,328.34375,295" stroke-width="4" stroke-dasharray="0" stroke-opacity="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-opacity: 1;"></path>

Filipe Valeriano

unread,
Jun 26, 2015, 2:31:32 PM6/26/15
to raph...@googlegroups.com
Hello,

How are you generating this path, that you showed below?´

Why do you need your requirement? Maybe I can help in another way if you provide additional details :)

Best Regards.

cooolawe

unread,
Jun 26, 2015, 4:13:52 PM6/26/15
to raph...@googlegroups.com
I'm trying to create a eraser function based on the point of intersections. It is easy to work with arrays and there is already some code created with path array. 

dusadrian

unread,
Oct 20, 2015, 3:50:55 AM10/20/15
to Raphaël
Separate your d="" component from the svg, and that is your path string.
d="M461.34375,214L461.34375,214C460.84375,..."

then use Raphael.parsePathString(d) which returns an array of segments with coordinates.

Hope this helps,
Adrian
Reply all
Reply to author
Forward
0 new messages