Created
June 4, 2019 19:29
-
-
Save eeropic/795d0aa1f0bc73779f434e5d4d8ddb63 to your computer and use it in GitHub Desktop.
svg path parse wip (fork https://github.com/jkroso/parse-svg-path)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //https://github.com/jkroso/parse-svg-path | |
| var cmdLength = {a:7, c:6, h:1, l:2, m:2, q:4, s:4, t:2, v:1, z:0} | |
| var segPattern = /([astvzqmhlc])([^astvzqmhlc]*)/ig | |
| var numPattern = /-?[0-9]*\.?[0-9]+(?:e[-+]?\d+)?/ig | |
| function parseVals(args) { | |
| var nums = args.match(numPattern) | |
| return nums ? nums.map(Number) : [] | |
| } | |
| function svgPathToArray(path) { | |
| var data = [] | |
| path.replace(segPattern, function(_, cmd, args){ | |
| var type = cmd.toLowerCase() | |
| args = parseVals(args) | |
| if (type == 'm' && args.length > 2) { | |
| data.push([cmd].concat(args.splice(0, 2))) | |
| type = 'l' | |
| cmd = cmd == 'm' ? 'l' : 'L' | |
| } | |
| while (true) { | |
| if (args.length == cmdLength[type]) { | |
| args.unshift(cmd) | |
| return data.push(args) | |
| } | |
| if (args.length < cmdLength[type]) throw new Error('malformed path data') | |
| data.push([cmd].concat(args.splice(0, cmdLength[type]))) | |
| } | |
| }) | |
| return data | |
| } | |
| /* | |
| MoveTo: M, m | |
| LineTo: L, l, H, h, V, v | |
| Cubic Bézier Curve: C, c, S, s | |
| Quadratic Bézier Curve: Q, q, T, t | |
| Elliptical Arc Curve: A, a | |
| ClosePath: Z, z | |
| */ | |
| function pathArrayToObjects(arr){ | |
| pathCommands={ | |
| "M"(){ | |
| return "MoveTo" | |
| }, | |
| "m"(){ | |
| return "moveto" | |
| }, | |
| "L"(){ | |
| return "LineTo" | |
| }, | |
| "l"(){ | |
| return "lineto" | |
| }, | |
| "H"(){ | |
| return "Horiz LineTo" | |
| }, | |
| "h"(){ | |
| return "horiz lineto" | |
| }, | |
| "V"(){ | |
| return "Vert LineTo" | |
| }, | |
| "v"(){ | |
| return "vert lineto" | |
| }, | |
| "C"(){ | |
| return "Cubic Bezier" | |
| }, | |
| "c"(){ | |
| return "cubic bezier" | |
| }, | |
| "S"(){ | |
| return "Smooth Cubic Bezier" | |
| }, | |
| "s"(){ | |
| return "smooth cubic bezier" | |
| }, | |
| "Q"(){ | |
| return "Quad bezier" | |
| }, | |
| "q"(){ | |
| return "quad bezier" | |
| }, | |
| "T"(){ | |
| return "Smooth Quad Bezier" | |
| }, | |
| "t"(){ | |
| return "smooth quad bezier" | |
| }, | |
| "A"(){ | |
| return "Elliptical Arc" | |
| }, | |
| "a"(){ | |
| return "elliptical arc" | |
| }, | |
| "Z"(){ | |
| return "Close path" | |
| }, | |
| "z"(){ | |
| return "close path" | |
| } | |
| } | |
| return arr.map(function(item){ | |
| return pathCommands[item[0]]() | |
| }) | |
| } | |
| pathStr=`M44.5,65.5c38,0,1-65,30-65s46,57,60,57s-81,56-50,56s-74-2-74-2l-10-45l20-46l99,86` | |
| var pathArray=svgPathToArray(pathStr) | |
| console.log(pathArrayToObjects(pathArray)) | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment