{"id":2454,"date":"2013-06-01T19:51:48","date_gmt":"2013-06-01T18:51:48","guid":{"rendered":"http:\/\/t-machine.org\/?p=2454"},"modified":"2013-06-01T19:51:48","modified_gmt":"2013-06-01T18:51:48","slug":"svgkit-2013-recipes-part-2","status":"publish","type":"post","link":"http:\/\/new.t-machine.org\/index.php\/2013\/06\/01\/svgkit-2013-recipes-part-2\/","title":{"rendered":"SVGKit 2013 – Recipes (part 2)"},"content":{"rendered":"

(see also the first set of SVGKit recipes<\/a>)<\/p>\n

Change the color of a SVG element like a Path or Circle after the user click on it<\/h3>\n

[objc]
\nCALayer* layerUserClickedOn = …<\/p>\n

if( [layerUserClickedOn isKindOfClass:[CAShapeLayer class]] ) \/\/ should ALWAYS be true, but just in case you write your code wrong…
\n{
\n CAShapeLayer* shapeLayer = (CAShapeLayer*) layerUserClickedOn;
\n shapeLayer.fillColor = [UIColor redColor].CGColor;
\n}
\n[\/objc]<\/p>\n

Find the CALayer that was generated from a particular SVGElement<\/h3>\n

NB: Apple\/ObjectiveC uses “id” as a keyword, so we had to rename the SVG name “id” to “identifier”.<\/p>\n

If your SVG file is legal, and has a unique “id” attribute for every SVGElement, then you can find the CALayer directly from the SVGElement, using the “id” attribute. If your SVG file has no “id” attributes, or the SVGElement you’re searching has no “id” element, then you’ll have to do more work – or fix the SVG file (edit it, add an “id” attribute to the SVGElement that matters, save it … then use this recipe)!<\/p>\n

[objc]
\nSVGKImage* svgImage = …
\nSVGElement* element = … \/\/ see previous SVGKit recipes
\nCALayer* layer = [svgImage layerWithIdentifier:element.identifier];
\n… \/\/ do something with it…
\n[\/objc]<\/p>\n

Clone part of the image, and move it around \/ change it<\/h3>\n

First of all, find the part of the SVG you want to clone, e.g. using “Search an SVG file for particular tags \/ nodes \/ elements” from the first set of SVGKit recipes<\/a>.<\/p>\n

That gives you an (SVGElement*). Use the previous recipe to get the CALayer. Finally, clone it and use it:<\/p>\n

[objc]
\n#import "CALayer+RecursiveClone.h" \/\/ requires SVGKit version 1.1.0 or later<\/p>\n

…
\n-(void) someMethod
\n{
\n SVGKImage* svgImage = …
\n SVGElement* elementToClone = … \/\/ see previous SVGKit recipes
\n CALayer* layerToClone = … \/\/ see recipe above<\/p>\n

CALayer* newLayer = [layerToClone cloneRecursively];
\n newLayer.frame = layerToClone.bounds; \/\/ reset it to be positioned at (0,0)<\/p>\n

\/\/ if you want the clone to start in same position as original
\n \/\/ add this code
\n if( calculatePositionOfOriginalLayer )
\n {
\n CGFloat xOffsetOriginal = 0.0f;
\n CGFloat yOffsetOriginal = 0.0f;
\n CALayer* parentLayer = layerToClone;
\n while( nil != (parentLayer = parentLayer.superlayer) )
\n {
\n xOffsetOriginal += parentLayer.frame.origin.x;
\n yOffsetOriginal += parentLayer.frame.origin.y;
\n }
\n CGPoint positionOfOriginalLayer = CGPointApplyTransform( layerToClone.position, CGAffineMakeTranslation( xOffsetOriginal, yOffsetOriginal ) );
\n }
\n}
\n[\/objc]<\/p>\n

Edit the polygons \/ lines \/ shapes after loading<\/h3>\n

Every “shape” is stored as some form of Apple CGPath object.<\/p>\n

[objc]
\nCALayer* layerInSVG = … \/\/ use a previous recipe to get the layer from the SVG element
\nCAShapeLayer* shapeLayer = (CAShapeLayer*) layerInSVG; \/\/ if you chose wrong, this will error at runtime
\nCGPath pathToEdit = shapeLayer.path;<\/p>\n

… \/\/ edit the path, and create a replacement path<\/p>\n

shapeLayer.path = myEditedPath;
\n[\/objc]<\/p>\n

Apple doesn’t provide an API to directly edit CGPath objects. They have a C API that let’s you create a callback function that turns the CGPath into a list of draw-calls, that you can then work with. But it takes quite a bit of code to read this, and then convert it back into a CGPath that Apple can draw.<\/p>\n

So far, no-one has open-sourced their code for this (I’ve got a private version I wrote for a previous project, but it’s thousands of lines of code). Either petition Apple to add the missing APIs, or find someone to write it for you \/ license it to you, or write it yourself.<\/p>\n","protected":false},"excerpt":{"rendered":"

(see also the first set of SVGKit recipes) Change the color of a SVG element like a Path or Circle after the user click on it [objc] CALayer* layerUserClickedOn = … if( [layerUserClickedOn isKindOfClass:[CAShapeLayer class]] ) \/\/ should ALWAYS be true, but just in case you write your code wrong… { CAShapeLayer* shapeLayer = (CAShapeLayer*) […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[20],"tags":[],"_links":{"self":[{"href":"http:\/\/new.t-machine.org\/index.php\/wp-json\/wp\/v2\/posts\/2454"}],"collection":[{"href":"http:\/\/new.t-machine.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/new.t-machine.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/new.t-machine.org\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/new.t-machine.org\/index.php\/wp-json\/wp\/v2\/comments?post=2454"}],"version-history":[{"count":4,"href":"http:\/\/new.t-machine.org\/index.php\/wp-json\/wp\/v2\/posts\/2454\/revisions"}],"predecessor-version":[{"id":2458,"href":"http:\/\/new.t-machine.org\/index.php\/wp-json\/wp\/v2\/posts\/2454\/revisions\/2458"}],"wp:attachment":[{"href":"http:\/\/new.t-machine.org\/index.php\/wp-json\/wp\/v2\/media?parent=2454"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/new.t-machine.org\/index.php\/wp-json\/wp\/v2\/categories?post=2454"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/new.t-machine.org\/index.php\/wp-json\/wp\/v2\/tags?post=2454"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}