How to import/parse SVG into UIBezierpaths, NSBezierpaths, CGPaths? [closed]

若如初见. 提交于 2019-12-31 09:43:30

问题


I am trying to import paths from a vector drawing program into the ios environment. I would like to get them into CGpaths or UIbezierpaths. I am most interested in importing paths from adobe illustrator. The best way seems to save as an svg and then import.

I have found some resources for parsing exported SVG files that describe the paths. However, everything I have found only deals with absolute paths and not relative paths. The path below has capital C's and lowercase C's. I know how to parse the capital C (absolute paths) but I have no idea how to parse the lowercase c's (relative paths)

I am looking for help with writing a parser for importing svg files into ios/cocoa. I think there is a big need for this judging by searching the internet for weeks.

Here, is an example of a path I would like to import into my iphone app. I am not looking to import the image, I want the path itself. So, I can manipulate it. Any help would be much appreciated.

x="0px" y="0px" width="320px" height="436px" viewBox="-1.4 -0.5 320 436"

 d="M294.1,116C290.6,1.4,170.9,0.4,159.6,0.5
C148.3,0.4,28.7,1.4,25.2,116c-3.7,120.3-49.6,141.4-5.9,233.9c41.3,87.4,130.7,87,140.4,86.7c9.7,0.3,99.1,0.8,140.4-86.7
C343.7,257.4,297.8,236.3,294.1,116z

If this was all absolute paths I would be able to solve this now. It is the relative (i.e. lowecase (c) paths) that are really confusing me.


回答1:


Alright folks, if you're willing to pay for it. This tool will solve all your issues. You can import svg or psd and will produce the code for you. I've used it and it is amazing!

http://www.paintcodeapp.com/




回答2:


There's an open-source SVG library in ObjectiveC, specifically for iOS (and OS X, although the OS X build is a bit behind):

https://github.com/SVGKit/SVGKit/

(I've been using this on iOS projects since the start of this year, it works well)

2018 update: OSX support is now in, and SVGKit renders most SVG's fast + accurately. On the downside, advanced text features aren't all supported (e.g. yes to gradient-fill, but no to complex text-layout).

As of early 2012, it's not a 100% implementation of the SVG spec, but there's a lot of people working on getting it there.




回答3:


If you're willing to do some translation from JS to ObjC, then you might find this project helpful:

https://github.com/thelonious/svg-2d

Particularly, the path.js file which includes a parseData method, taking care of relative and absolute path commands.

https://github.com/thelonious/svg-2d/blob/master/shapes/path/Path.js

I should mention that I wrote this code years ago, but I have translated it to Java and C# and have used in professional products (can't share that code, unfortunately) and it seemed to work well in those environments as well.

HTH Kevin




回答4:


Sketch 3 on Mac App Store is good at editing (can be better than PaintCode) and then exporting as SVG to PaintCode.

To get from PaintCode back to Sketch save as PDF and imports ok

https://itunes.apple.com/gb/app/sketch-3/id852320343?mt=12

Make sure canvas size in both is set to the same and in your views bounds else youll need to scale the context.




回答5:


SVGgh contains a class, SVGPathGenerator, which will convert an SVG path to a CGPathRef:

+(CGPathRef) newCGPathFromSVGPath:(NSString*)anSVGPath whileApplyingTransform:(CGAffineTransform)aTransform;

You can use it to do exactly what you request.

[Swift 3 Update] If you want a pure Swift solution. My (in progress) Scalar2D library has an extension on CGPath that creates a CGPath from an SVG path.




回答6:


This solution is a straight conversion of an SVG path string to UIBezierPath. It worked great for my app where I had to draw the united states as a UIView.

https://github.com/ap4y/UIBezierPath-SVG




回答7:


Oneliner that adds an SVG to an NSView:

addSubView(SVGParser.svg(FileParser.xml(~/Desktop/test.svg)))

SVGLib for swift: https://github.com/eonist/swift-utils



来源:https://stackoverflow.com/questions/5481876/how-to-import-parse-svg-into-uibezierpaths-nsbezierpaths-cgpaths

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!