Since I started iOS development there has always been one thing missing for me. That has been a vector graphic file format. There is no format currently natively supported by apple.
I did some digging and found SVGKit. This is a very nice library that loads in .svg files. It even supports SVG animations. Not to mention its free. So I had to share this. However it can be tricky to set up.
In the end I settled on using PaintCode. PaintCode is a vector based graphics application that generates CoreGraphics Objective-C. PaintCode will also load in SVG files.
The idea is you load an SVG file into PaintCode. Edit it if needed then copy the Objective-C code into your project.
There are different ways you can include it in your projects. I would like to use it in layer of the CALayer flavour.
What I have done is create a CALayer subclass. That all you have to do is past in the PaintCode code.
For convenience I create all my vector assets at 100×100 pixels. I then use a scale to get it to the right size.
This assumes you have PaintCode and have already got the code ready. Also assumes the image is 100×100.
Step 1:
Add the “QuartzCore.framework” to your project.
Step 2:
Create a new file using the “Objective-C Class” template for iOS. USE CALayer Subclass
Step 3:
Add the bellow line to to your Header file(.h).
|
1 2 |
//this method will kick off the drawing - (void) drawImage; |
Step 4:
Add the bellow code to the implementation file(.m). Note: see line 17 if your image is not 100×100 pixels
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
- (id)init { self = [super init]; if (self) { [self setNeedsDisplay]; } return self; } -(void)display { UIScreen *screen = [UIScreen mainScreen]; //Sets the hight and width of the image to 100x100 if you have a different image size change here CGSize imgSize = CGSizeMake(ceilf(100.0f * self.contentsScale), ceilf(100.0f * self.contentsScale)); ///this is for the retina rescale UIGraphicsBeginImageContextWithOptions(imgSize, NO, [screen scale]); CGContextRef context = UIGraphicsGetCurrentContext(); CGContextScaleCTM(context, self.contentsScale, self.contentsScale); [self drawImage]; //grabs the drawn image from the draw context and adds it to UIImage then to the contents of the layer UIImage *aImage = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); CALayer *curLayer = (CALayer*)self; curLayer.frame = CGRectMake(0, 0, imgSize.width, imgSize.height); curLayer.contents = (id)aImage.CGImage; } - (void)drawImage { ///------------------------------ ///add PaintCode draw code here!!!! ///------------------------------ } |
Step 5:
Add the CoreGraphics code to the drawImage method.
Step 6:
Add this layer to a view that is currently on the view stack.
|
1 2 3 4 5 6 |
CustomeLayerClass *myLayer = [CustomeLayerClass layer]; //this will scale the image up 3 fold myLayer.contentsScale = 3.0; [[[self view] layer] addSublayer:myLayer]; |
Thats all you need.
**Edit
I created an AppCode template for this.
[…] my last post I setup a CALayer subclass for CoreGraphics and […]