Http://www.cocoachina.com/ios/20150901/13155.html
Codeglider authorized this site reproduced.
In my previous article swift10 minutes to achieve cool navigation controller jump rotation painting, with a swift logo shape
Animation of the previous article
I'm talking about the shape that is used to make the mask in the middle.
It is not a picture that is drawn with a piece of code:
| 123456789101112131415161718192021222324 |
//绘制swift logo varbezierPath = UIBezierPath() bezierPath.moveToPoint(CGPointMake(96.14, 86.59)) bezierPath.addCurveToPoint(CGPointMake(56.82, 94.83), controlPoint1: CGPointMake(81.83, 85.02), controlPoint2: CGPointMake(87.1, 95.75)) bezierPath.addCurveToPoint(CGPointMake(20.01, 79.31), controlPoint1: CGPointMake(42.17, 94.39), controlPoint2: CGPointMake(29.06, 87.05)) bezierPath.addCurveToPoint(CGPointMake(5.25, 62.38), controlPoint1: CGPointMake(10.35, 71.06), controlPoint2: CGPointMake(5.25, 62.38)) bezierPath.addCurveToPoint(CGPointMake(35.2, 74.85), controlPoint1: CGPointMake(5.25, 62.38), controlPoint2: CGPointMake(17.28, 72.33)) bezierPath.addCurveToPoint(CGPointMake(64.02, 69.54), controlPoint1: CGPointMake(53.11, 77.37), controlPoint2: CGPointMake(64.02, 69.54)) bezierPath.addCurveToPoint(CGPointMake(37.43, 44.73), controlPoint1: CGPointMake(64.02, 69.54), controlPoint2: CGPointMake(49.91, 58.13)) bezierPath.addCurveToPoint(CGPointMake(14.97, 16.34), controlPoint1: CGPointMake(24.96, 31.34), controlPoint2: CGPointMake(14.97, 16.34)) bezierPath.addCurveToPoint(CGPointMake(40.56, 37.05), controlPoint1: CGPointMake(14.97, 16.34), controlPoint2: CGPointMake(31.85, 30.51)) bezierPath.addCurveToPoint(CGPointMake(56.82, 47.75), controlPoint1: CGPointMake(45.62, 40.86), controlPoint2: CGPointMake(56.82, 47.75)) bezierPath.addCurveToPoint(CGPointMake(43.08, 32.22), controlPoint1: CGPointMake(56.82, 47.75), controlPoint2: CGPointMake(47.12, 37.33)) bezierPath.addCurveToPoint(CGPointMake(27.99, 11.26), controlPoint1: CGPointMake(37.51, 25.17), controlPoint2: CGPointMake(27.99, 11.26)) bezierPath.addCurveToPoint(CGPointMake(55.05, 35.46), controlPoint1: CGPointMake(27.99, 11.26), controlPoint2: CGPointMake(45.04, 27.34)) bezierPath.addCurveToPoint(CGPointMake(78.26, 52.03), controlPoint1: CGPointMake(61.79, 40.93), controlPoint2: CGPointMake(78.26, 52.03)) bezierPath.addCurveToPoint(CGPointMake(80.71, 31.34), controlPoint1: CGPointMake(78.26, 52.03), controlPoint2: CGPointMake(81.63, 45.61)) bezierPath.addCurveToPoint(CGPointMake(69.08, 3), controlPoint1: CGPointMake(79.8, 17.06), controlPoint2: CGPointMake(69.08, 3)) bezierPath.addCurveToPoint(CGPointMake(97.29, 34.58), controlPoint1: CGPointMake(69.08, 3), controlPoint2: CGPointMake(89.12, 14.76)) bezierPath.addCurveToPoint(CGPointMake(100.25, 67.8), controlPoint1: CGPointMake(105.45, 54.4), controlPoint2: CGPointMake(100.25, 67.8)) bezierPath.addCurveToPoint(CGPointMake(107.29, 81.07), controlPoint1: CGPointMake(100.25, 67.8), controlPoint2: CGPointMake(104.47, 72.3)) bezierPath.addCurveToPoint(CGPointMake(107.96, 96.25), controlPoint1: CGPointMake(110.12, 89.84), controlPoint2: CGPointMake(107.96, 96.25)) bezierPath.addCurveToPoint(CGPointMake(96.14, 86.59), controlPoint1: CGPointMake(107.96, 96.25), controlPoint2: CGPointMake(105.27, 87.59)) bezierPath.closePath() |
It looks scary, doesn't it, but you don't have to write any line of code that's automatically generated! Sounds cool, right? Then I'll teach you how to do it, and then how to show it in the iOS program
Preparatory work
First of all you need to download two software
Sketch
A lightweight UI vector design software, which can be said to be the most popular UI design software today, the interface is simple, the tools are not many, but can do most of the UI design work, can be said to be an Apple developer's essential tool.
Recommend a sketch learning site:
Sketch Chinese web
There are also Web sites to learn about UI design:
UI China
:
Download the official Trial version
Paincode2
A vector graphics can be converted to Oc/swift drawing code of the software, of course, it has many magical uses such as variables, dynamic colors and the like, but this software is currently very few domestic tutorials, I will probably write about it in the future.
Download the official Trial version
Because only 2 hours of trial time, compared to the pit, so I still provide a cracked version of:
Cracked version
Then you'll need a swift icon to copy the object:
Draw Swift Vector Graphics
First open the sketch you just downloaded
Welcome interface
Click OK to create a new file.
Step 1
Drag the pre-prepared logo into the file and select the Vector tool (this tool is similar to the pen tool in PS)
Step 2
Click each vertex with the mouse, and finally become a complete shape.
Step 3
Click the section between vertices, add anchor points, create a curve by clicking + drag, then adjust the two handles of the anchor point to make the curve as close as possible to the graphic.
Step 4
Select the curve to ensure that the lock in the middle of the size remains locked and the curve is scaled to a size of 100 square without the need for precise
Step 4
Export a curve to an SVG file
Now sketch's work is done.
Export drawing code for a drawing
It's our turn to work Paintcode.
Create a new file, select Export Swift Code, drag the SVG file you just exported into the window, and the code will be generated automatically ~
Step 5
The code we need is the last one we checked.
Show Swiftlogo in iOS programs
Open Xcode,file/new/project ..., choose the simplest single View application on it, the name casually.
Create a new, empty Swift file (file/new/file/swift files) and write the following code, creating a class:
| 123456789 |
import uikit import quartzcore class swiftlogolayer {      class func logolayer ()->cashapelayer{ let layer = Cashapelayer ()          //Add the code just generated         return layer } } |
Add the code you just generated, replacing the comment content:
| 1234567891011121314151617181920212223 |
varbezierPath = UIBezierPath() bezierPath.moveToPoint(CGPointMake(96.14, 86.59)) bezierPath.addCurveToPoint(CGPointMake(56.82, 94.83), controlPoint1: CGPointMake(81.83, 85.02), controlPoint2: CGPointMake(87.1, 95.75)) bezierPath.addCurveToPoint(CGPointMake(20.01, 79.31), controlPoint1: CGPointMake(42.17, 94.39), controlPoint2: CGPointMake(29.06, 87.05)) bezierPath.addCurveToPoint(CGPointMake(5.25, 62.38), controlPoint1: CGPointMake(10.35, 71.06), controlPoint2: CGPointMake(5.25, 62.38)) bezierPath.addCurveToPoint(CGPointMake(35.2, 74.85), controlPoint1: CGPointMake(5.25, 62.38), controlPoint2: CGPointMake(17.28, 72.33)) bezierPath.addCurveToPoint(CGPointMake(64.02, 69.54), controlPoint1: CGPointMake(53.11, 77.37), controlPoint2: CGPointMake(64.02, 69.54)) bezierPath.addCurveToPoint(CGPointMake(37.43, 44.73), controlPoint1: CGPointMake(64.02, 69.54), controlPoint2: CGPointMake(49.91, 58.13)) bezierPath.addCurveToPoint(CGPointMake(14.97, 16.34), controlPoint1: CGPointMake(24.96, 31.34), controlPoint2: CGPointMake(14.97, 16.34)) bezierPath.addCurveToPoint(CGPointMake(40.56, 37.05), controlPoint1: CGPointMake(14.97, 16.34), controlPoint2: CGPointMake(31.85, 30.51)) bezierPath.addCurveToPoint(CGPointMake(56.82, 47.75), controlPoint1: CGPointMake(45.62, 40.86), controlPoint2: CGPointMake(56.82, 47.75)) bezierPath.addCurveToPoint(CGPointMake(43.08, 32.22), controlPoint1: CGPointMake(56.82, 47.75), controlPoint2: CGPointMake(47.12, 37.33)) bezierPath.addCurveToPoint(CGPointMake(27.99, 11.26), controlPoint1: CGPointMake(37.51, 25.17), controlPoint2: CGPointMake(27.99, 11.26)) bezierPath.addCurveToPoint(CGPointMake(55.05, 35.46), controlPoint1: CGPointMake(27.99, 11.26), controlPoint2: CGPointMake(45.04, 27.34)) bezierPath.addCurveToPoint(CGPointMake(78.26, 52.03), controlPoint1: CGPointMake(61.79, 40.93), controlPoint2: CGPointMake(78.26, 52.03)) bezierPath.addCurveToPoint(CGPointMake(80.71, 31.34), controlPoint1: CGPointMake(78.26, 52.03), controlPoint2: CGPointMake(81.63, 45.61)) bezierPath.addCurveToPoint(CGPointMake(69.08, 3), controlPoint1: CGPointMake(79.8, 17.06), controlPoint2: CGPointMake(69.08, 3)) bezierPath.addCurveToPoint(CGPointMake(97.29, 34.58), controlPoint1: CGPointMake(69.08, 3), controlPoint2: CGPointMake(89.12, 14.76)) bezierPath.addCurveToPoint(CGPointMake(100.25, 67.8), controlPoint1: CGPointMake(105.45, 54.4), controlPoint2: CGPointMake(100.25, 67.8)) bezierPath.addCurveToPoint(CGPointMake(107.29, 81.07), controlPoint1: CGPointMake(100.25, 67.8), controlPoint2: CGPointMake(104.47, 72.3)) bezierPath.addCurveToPoint(CGPointMake(107.96, 96.25), controlPoint1: CGPointMake(110.12, 89.84), controlPoint2: CGPointMake(107.96, 96.25)) bezierPath.addCurveToPoint(CGPointMake(96.14, 86.59), controlPoint1: CGPointMake(107.96, 96.25), controlPoint2: CGPointMake(105.27, 87.59)) bezierPath.closePath() |
Change the shape of a layer to a shape drawn by your code
| 1 |
layer.path = bezierPath.CGPath |
To determine the size of the layer, the following function will take our shape with a rectangle, which is the size of the layer
| 1 |
layer.bounds = CGPathGetBoundingBox(layer.path) |
Open Viewcontroller.swift
Add a layer constant and call the method in the class you just created
| 1 |
let logo = swiftLogoLayer.logoLayer() |
Add the following code in the Viewdidload () method:
Set the background to Gray
| 1 |
self.view.backgroundColor = UIColor.grayColor() |
Center the Logo layer
| 1 |
logo.position = CGPoint(x: view.layer.bounds.size.width/2, y: view.layer.bounds.size.height/2) |
Change logo fill color to white
| 1 |
logo.fillColor = UIColor.whiteColor().CGColor |
Add a logo layer to a layer in the main view
| 1 |
self.view.layer.addSublayer(logo) |
If there are no errors, click Run
The effect should appear as shown:
Run results
All the resources in this tutorial are on my GitHub, including the Logo,sketch file used for copying, the exported SVG file, and the last iOS demo~
GitHub Escrow Address
Get drawing code quickly with sketch and Paintcode
