用Sketch和PaintCode快速得到绘制代码
http://www.cocoachina.com/ios/20150901/13155.html
作者:codeGlider 授权本站转载。
在我的上一篇文章中 swift10分钟实现炫酷的导航控制器跳转动画,有一个swift logo的形状
上一篇文章的动画
我说的就是中间用来做遮罩的形状。
它不是图片是用一段代码绘制而成的:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
//绘制swift logo var bezierPath = 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() |
看起来很可怕是不是,但是其实你并不需要写任何一行代码,这些代码都是自动生成的!听起来很酷对不对?那么接下来我就教你怎么去做,然后怎么将它在ios程序中显示出来
准备工作
首先你需要下载两个软件
Sketch
一个轻量级的UI矢量设计软件,可以说是当今最热门的UI设计软件,界面简洁,工具不多但是可以完成大部分的UI设计工作,可以说是苹果开发者必备的工具。
推荐一个Sketch的学习网站:
还有学习UI设计的网站:
下载地址:
Paincode2
一个可以将矢量图形转换为OC/swift绘制代码的软件,当然它还有许多神奇的用法比如变量、动态颜色之类的,但是这个软件目前国内教程非常少,今后我可能会写关于它的文章。
由于只有2小时的试用时长,比较坑,所以我还是提供一下破解版的下载地址:
然后你还需要一张swift的图标来作为临摹对象:
绘制swift矢量图形
首先打开刚才下载的Sketch
欢迎界面
点击ok创建一个新的文件。
步骤1
将事先准备好的logo拖进文件,选择vector工具(其实这个工具类似于ps里的钢笔工具)
步骤2
用鼠标逐个点击各个顶点,最后连成成一个完整的形状
步骤3
点击顶点之间的部分,增加锚点,通过点击+拖拽形成曲线,然后调整锚点的两个把手,使得曲线尽量贴合图形。
步骤4
选中曲线,确保Size中间的锁保持锁定状态,将曲线缩放到100见方的大小,不需要很精确
步骤4
将曲线导出为svg文件
现在Sketch的工作就已经完成了
导出图形的绘制代码
轮到我们的Paintcode干活了~
新建文件,选择导出swift代码,将刚才导出的svg文件拖进窗口中,然后代码就自动生成出来~
步骤5
我们需要的代码就是最后选中的那些代码
在ios程序中显示出swiftlogo
打开Xcode,File/New/Project...,就选择最简单的Single View Application就可以了,名字随便起。
新建之后新建一个空的swift文件(File/New/File/Swift File),写下如下代码,创建一个类:
1
2
3
4
5
6
7
8
9
|
import UIKit import QuartzCore class swiftLogoLayer { class func logoLayer()->CAShapeLayer{ let layer = CAShapeLayer() //添加刚才生成的代码 return layer } } |
添加刚才生成的代码,替换注释内容:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
var bezierPath = 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() |
将图层的形状变成代码所绘制的形状
1
|
layer.path = bezierPath.CGPath |
确定图层的大小,下面这个函数会把我们的形状用一个矩形起来,这个矩形就是图层的大小
1
|
layer.bounds = CGPathGetBoundingBox(layer.path) |
打开ViewController.swift
添加一个图层常量,调用刚才创建的类中的方法
1
|
let logo = swiftLogoLayer.logoLayer() |
在viewDidLoad()方法中添加以下代码:
将背景设置为灰色
1
|
self.view.backgroundColor = UIColor.grayColor() |
将logo图层居中
1
|
logo.position = CGPoint(x: view.layer.bounds.size.width/2, y: view.layer.bounds.size.height/2) |
修改logo填充色为白色
1
|
logo.fillColor = UIColor.whiteColor().CGColor |
将logo图层添加到主视图的图层中
1
|
self.view.layer.addSublayer(logo) |
如果没有任何错误,点击运行
应该会出现如下图所示效果:
运行结果
该教程所有的资源都在我的github上面,包括用来临摹的logo,Sketch文件,导出的svg文件,还有最后的ios demo~
用Sketch和PaintCode快速得到绘制代码的更多相关文章
- eclipse快速收缩展开代码
快速折叠所有代码和展开所有代码都是CTRL+SHIFT+/
- 双缓冲绘图和窗口控件的绘制——ATL ActiveX 窗口控件生成向导绘制代码OnDraw的一个错误 .
双缓冲绘图和窗口控件的绘制 ---ATL ActiveX 窗口控件生成向导绘制代码OnDraw的一个错误 cheungmine 我们通常使用ATL COM组件,生成一个带窗口的ActiveX控件,然后 ...
- Visual Studio使用正则表达式快速统计总共代码行数
原文:Visual Studio使用正则表达式快速统计总共代码行数 按CTRL+SHIFT+F,勾上支持正则表达式,然后输入搜索内容: <span style="font-family ...
- Emmet 快速编写html代码
简介 快速编写HTML代码 语法简单,语法类似css选择器,30分钟内你就可以搞定它.开发商为sublime.atom.brackets.hbuilder.webstrom等编辑器或IDE提供对应的插 ...
- js分析 快速定位 js 代码, 还原被混淆压缩的 js 代码
-1.目录 0.参考 1.页面表现 2. 慢镜头观察:低速网络请求 3. 从头到尾调试:Fiddler 拦截 index.html 并添加 debugger; 4. 快速定位 js 代码 5. 还原被 ...
- VsCode中使用Emmet神器快速编写HTML代码
一.Emmet简述 Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具. 在前端开发的过程中,一大部分的工作是写 HTML.CSS 代码.特别是手动编写 HTML ...
- 使用Emmet 快速生成HTML代码
在前端开发的过程中,一个最繁琐的工作就是写 HTML.CSS 代码.数量繁多的标签.属性.尖括号.标签闭合等,让前端们甚是苦恼.于是,我向大家推荐 Emmet,它提供了一套非常简单的语法规则,书写起来 ...
- [UE4]使用UnrealVS扩展快速编译C++代码
一.如果UE4 编辑器已经打开,则VS中的重新生成项目将不能使用,一定要关了UE4 编辑器才可以.一般不是有VS自身的编译UE4的C++代码 二.epic提供了UnrealVS扩展,可以快速编译C++ ...
- 重构一段基于原生JavaScript的表格绘制代码
为了在CardSimulate项目中方便的显示技能和效果列表,决定重构以前编写的一段JavaScript代码——att表格绘制库,这段代码的作用是将特定的JavaScript数据对象转化为表格,支持精 ...
随机推荐
- LuoguP3690 【模板】Link Cut Tree (动态树) LCT模板
P3690 [模板]Link Cut Tree (动态树) 题目背景 动态树 题目描述 给定n个点以及每个点的权值,要你处理接下来的m个操作.操作有4种.操作从0到3编号.点从1到n编号. 0:后接两 ...
- RDS for PostgreSQL 云盘加密功能使用方法
RDS for PostgreSQL支持数据盘的加密功能,提供更高的数据存储安全等级.(加密KEY可以由用户提供,也可以由KMS服务生成.) 使用方法: 1.选中需要购买数据库实例的region,创建 ...
- c++新特性实验(3)声明与定义:constexpr
1.作用 constexpr 声明一个函数或变量,它的值可以在编译时出现在常量表达式之中. 2.constexpr 变量要求 其类型必须是 字面类型 (LiteralType) . 它必须被立即初始化 ...
- <br>和换行符/n
我们知道<br>是html的标签,表示文本另起一行.经常在html的body标签里面看到br,起到另起一行的作用. 而换行符\n是javascript的转义字符,表示将输出一个换行符,用于 ...
- ConcurrentDictionary让你的多线程代码更优美
ConcurrentDictionary是.net4.0推出的一套线程安全集合里的其中一个,和它一起被发行的还有ConcurrentStack,ConcurrentQueue等类型,它们的单线程版本( ...
- Delphi 设计模式:《HeadFirst设计模式》Delphi7代码---命令模式之SimpleRemoteWithUndoTest[转]
命令模式可以很轻松的实现撤销(Undo)功能. 命令的接受者: 1unit uReceiveObject; 2 3interface 4 5type 6 TLight = class(T ...
- log4j2----JAVA日志打印
注意:本篇文章是以log4j2.x 为例的,并不是log4j 1.x log4j 就是log for java , log4j已经被移植到了C,C++,C#,Perl,Python和Ruby等语言中 ...
- Apache-Shiro分布式环境配置(与redis集成)(转)
原文戳我 前段时间项目要用到权限控制的相关模块,经过讨论决定采用Apache下面的Shiro开源框架进行身份校验与权限控制,因项目需部署在集群环境下,所以需要分布式的支持,故配置了Redis作为权限数 ...
- JavaScript模式:字面量和构造函数
本篇主要讨论了通过字面量以构造对象的方法,比如对象.数组以及正则表达式等字面量的构造方法,同时还讨论了与类似Object()和Array()等内置构造函数相比,为什么基于字面量表示法是更为可取. 对象 ...
- 利用Microsoft.VisualBasic中TextFieldParser解析器把CSV格式倒入数据库
阅读目录 利用ODBC去操作 利用TextFieldParser操作 写了个Demo,利用Microsoft.VisualBasic这个程序集中的TextFieldParser解析器解析CSV格式的文 ...