作者：codeGlider

在我的上一篇文章中 swift10分钟实现炫酷的导航控制器跳转动画,有一个swift logo的形状

上一篇文章的动画

我说的就是中间用来做遮罩的形状。

它不是图片是用一段代码绘制而成的:

  1. //绘制swift logo
  2.     var bezierPath = UIBezierPath()
  3.     bezierPath.moveToPoint(CGPointMake(96.14, 86.59))
  4.     bezierPath.addCurveToPoint(CGPointMake(56.82, 94.83), controlPoint1: CGPointMake(81.83, 85.02), controlPoint2: CGPointMake(87.1, 95.75))
  5.     bezierPath.addCurveToPoint(CGPointMake(20.01, 79.31), controlPoint1: CGPointMake(42.17, 94.39), controlPoint2: CGPointMake(29.06, 87.05))
  6.     bezierPath.addCurveToPoint(CGPointMake(5.25, 62.38), controlPoint1: CGPointMake(10.35, 71.06), controlPoint2: CGPointMake(5.25, 62.38))
  7.     bezierPath.addCurveToPoint(CGPointMake(35.2, 74.85), controlPoint1: CGPointMake(5.25, 62.38), controlPoint2: CGPointMake(17.28, 72.33))
  8.     bezierPath.addCurveToPoint(CGPointMake(64.02, 69.54), controlPoint1: CGPointMake(53.11, 77.37), controlPoint2: CGPointMake(64.02, 69.54))
  9.     bezierPath.addCurveToPoint(CGPointMake(37.43, 44.73), controlPoint1: CGPointMake(64.02, 69.54), controlPoint2: CGPointMake(49.91, 58.13))
  10.     bezierPath.addCurveToPoint(CGPointMake(14.97, 16.34), controlPoint1: CGPointMake(24.96, 31.34), controlPoint2: CGPointMake(14.97, 16.34))
  11.     bezierPath.addCurveToPoint(CGPointMake(40.56, 37.05), controlPoint1: CGPointMake(14.97, 16.34), controlPoint2: CGPointMake(31.85, 30.51))
  12.     bezierPath.addCurveToPoint(CGPointMake(56.82, 47.75), controlPoint1: CGPointMake(45.62, 40.86), controlPoint2: CGPointMake(56.82, 47.75))
  13.     bezierPath.addCurveToPoint(CGPointMake(43.08, 32.22), controlPoint1: CGPointMake(56.82, 47.75), controlPoint2: CGPointMake(47.12, 37.33))
  14.     bezierPath.addCurveToPoint(CGPointMake(27.99, 11.26), controlPoint1: CGPointMake(37.51, 25.17), controlPoint2: CGPointMake(27.99, 11.26))
  15.     bezierPath.addCurveToPoint(CGPointMake(55.05, 35.46), controlPoint1: CGPointMake(27.99, 11.26), controlPoint2: CGPointMake(45.04, 27.34))
  16.     bezierPath.addCurveToPoint(CGPointMake(78.26, 52.03), controlPoint1: CGPointMake(61.79, 40.93), controlPoint2: CGPointMake(78.26, 52.03))
  17.     bezierPath.addCurveToPoint(CGPointMake(80.71, 31.34), controlPoint1: CGPointMake(78.26, 52.03), controlPoint2: CGPointMake(81.63, 45.61))
  18.     bezierPath.addCurveToPoint(CGPointMake(69.08, ), controlPoint1: CGPointMake(79.8, 17.06), controlPoint2: CGPointMake(69.08, ))
  19.     bezierPath.addCurveToPoint(CGPointMake(97.29, 34.58), controlPoint1: CGPointMake(69.08, ), controlPoint2: CGPointMake(89.12, 14.76))
  20.     bezierPath.addCurveToPoint(CGPointMake(100.25, 67.8), controlPoint1: CGPointMake(105.45, 54.4), controlPoint2: CGPointMake(100.25, 67.8))
  21.     bezierPath.addCurveToPoint(CGPointMake(107.29, 81.07), controlPoint1: CGPointMake(100.25, 67.8), controlPoint2: CGPointMake(104.47, 72.3))
  22.     bezierPath.addCurveToPoint(CGPointMake(107.96, 96.25), controlPoint1: CGPointMake(110.12, 89.84), controlPoint2: CGPointMake(107.96, 96.25))
  23.     bezierPath.addCurveToPoint(CGPointMake(96.14, 86.59), controlPoint1: CGPointMake(107.96, 96.25), controlPoint2: CGPointMake(105.27, 87.59))
  24.     bezierPath.closePath()

看起来很可怕是不是，但是其实你并不需要写任何一行代码，这些代码都是自动生成的！听起来很酷对不对？那么接下来我就教你怎么去做，然后怎么将它在ios程序中显示出来

准备工作

首先你需要下载两个软件

Sketch

一个轻量级的UI矢量设计软件，可以说是当今最热门的UI设计软件，界面简洁，工具不多但是可以完成大部分的UI设计工作，可以说是苹果开发者必备的工具。

推荐一个Sketch的学习网站:

Sketch中文网

还有学习UI设计的网站:

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.  var bezierPath = UIBezierPath()
  2.     bezierPath.moveToPoint(CGPointMake(96.14, 86.59))
  3.     bezierPath.addCurveToPoint(CGPointMake(56.82, 94.83), controlPoint1: CGPointMake(81.83, 85.02), controlPoint2: CGPointMake(87.1, 95.75))
  4.     bezierPath.addCurveToPoint(CGPointMake(20.01, 79.31), controlPoint1: CGPointMake(42.17, 94.39), controlPoint2: CGPointMake(29.06, 87.05))
  5.     bezierPath.addCurveToPoint(CGPointMake(5.25, 62.38), controlPoint1: CGPointMake(10.35, 71.06), controlPoint2: CGPointMake(5.25, 62.38))
  6.     bezierPath.addCurveToPoint(CGPointMake(35.2, 74.85), controlPoint1: CGPointMake(5.25, 62.38), controlPoint2: CGPointMake(17.28, 72.33))
  7.     bezierPath.addCurveToPoint(CGPointMake(64.02, 69.54), controlPoint1: CGPointMake(53.11, 77.37), controlPoint2: CGPointMake(64.02, 69.54))
  8.     bezierPath.addCurveToPoint(CGPointMake(37.43, 44.73), controlPoint1: CGPointMake(64.02, 69.54), controlPoint2: CGPointMake(49.91, 58.13))
  9.     bezierPath.addCurveToPoint(CGPointMake(14.97, 16.34), controlPoint1: CGPointMake(24.96, 31.34), controlPoint2: CGPointMake(14.97, 16.34))
  10.     bezierPath.addCurveToPoint(CGPointMake(40.56, 37.05), controlPoint1: CGPointMake(14.97, 16.34), controlPoint2: CGPointMake(31.85, 30.51))
  11.     bezierPath.addCurveToPoint(CGPointMake(56.82, 47.75), controlPoint1: CGPointMake(45.62, 40.86), controlPoint2: CGPointMake(56.82, 47.75))
  12.     bezierPath.addCurveToPoint(CGPointMake(43.08, 32.22), controlPoint1: CGPointMake(56.82, 47.75), controlPoint2: CGPointMake(47.12, 37.33))
  13.     bezierPath.addCurveToPoint(CGPointMake(27.99, 11.26), controlPoint1: CGPointMake(37.51, 25.17), controlPoint2: CGPointMake(27.99, 11.26))
  14.     bezierPath.addCurveToPoint(CGPointMake(55.05, 35.46), controlPoint1: CGPointMake(27.99, 11.26), controlPoint2: CGPointMake(45.04, 27.34))
  15.     bezierPath.addCurveToPoint(CGPointMake(78.26, 52.03), controlPoint1: CGPointMake(61.79, 40.93), controlPoint2: CGPointMake(78.26, 52.03))
  16.     bezierPath.addCurveToPoint(CGPointMake(80.71, 31.34), controlPoint1: CGPointMake(78.26, 52.03), controlPoint2: CGPointMake(81.63, 45.61))
  17.     bezierPath.addCurveToPoint(CGPointMake(69.08, ), controlPoint1: CGPointMake(79.8, 17.06), controlPoint2: CGPointMake(69.08, ))
  18.     bezierPath.addCurveToPoint(CGPointMake(97.29, 34.58), controlPoint1: CGPointMake(69.08, ), controlPoint2: CGPointMake(89.12, 14.76))
  19.     bezierPath.addCurveToPoint(CGPointMake(100.25, 67.8), controlPoint1: CGPointMake(105.45, 54.4), controlPoint2: CGPointMake(100.25, 67.8))
  20.     bezierPath.addCurveToPoint(CGPointMake(107.29, 81.07), controlPoint1: CGPointMake(100.25, 67.8), controlPoint2: CGPointMake(104.47, 72.3))
  21.     bezierPath.addCurveToPoint(CGPointMake(107.96, 96.25), controlPoint1: CGPointMake(110.12, 89.84), controlPoint2: CGPointMake(107.96, 96.25))
  22.     bezierPath.addCurveToPoint(CGPointMake(96.14, 86.59), controlPoint1: CGPointMake(107.96, 96.25), controlPoint2: CGPointMake(105.27, 87.59))
  23.     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/, y: view.layer.bounds.size.height/)

修改logo填充色为白色

  1. logo.fillColor = UIColor.whiteColor().CGColor

将logo图层添加到主视图的图层中

  1. self.view.layer.addSublayer(logo)

如果没有任何错误，点击运行

应该会出现如下图所示效果:

运行结果

该教程所有的资源都在我的github上面，包括用来临摹的logo，Sketch文件，导出的svg文件，还有最后的ios demo~

github托管地址

代码SketchPaintCode绘制的更多相关文章

  1. 转+更新 Graphviz 教程,例子+ 高级应用 写代码,编程绘制架构图(分层拓扑图) 转自官网

    1. Graphviz介绍 Graphviz是大名鼎鼎的贝尔实验室的几位牛人开发的一个画图工具. 它的理念和一般的“所见即所得”的画图工具不一样,是“所想即所得”. Graphviz提供了dot语言来 ...

  2. PlantUML --- 使用代码快速绘制时序图、思维导图

    本篇思维导图 @startmindmap <style> mindmapDiagram { .green { BackgroundColor lightgreen } .rose { Ba ...

  3. 用Sketch和PaintCode快速得到绘制代码

    http://www.cocoachina.com/ios/20150901/13155.html 作者:codeGlider 授权本站转载. 在我的上一篇文章中 swift10分钟实现炫酷的导航控制 ...

  4. HTML5学习总结——canvas绘制象棋(canvas绘图)

    一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...

  5. ichart.js绘制虚线 ，平均分虚线

    var Data=new Array(); Data[0] = { labels : ["第一单元","第二单元","第三单元"," ...

  6. Quartz2D之绘制一个简单的机器猫

    学习iOS有一段时间了,在博客园也默默的潜水了两个月,见识了很多大神,收获不少. 今天整理笔记,发现忘记的不少,我感觉需要及时的整理一下了,同时也把做的小东西贴上来和大家分享一下. 最近学习了Quar ...

  7. IOS 中openGL使用教程2（openGL ES 入门篇 | 绘制一个多边形）

    在上一篇我们学习了如何搭建IOS下openGL的开发环境,接下来我们来学习如何绘制一个多边形. 在2.0之前,es的渲染采用的是固定管线,何为固定管线,就是一套固定的模板流程,局部坐标变换 -> ...

  8. C#小程序飞行棋地图绘制

    1. 初始化地图,在绘制时可先将地图进行初始化,用数组来存储关卡的位置,然后利用循环给地图中 关卡所在处赋予代表关卡的值. 关键代码如下 /// <summary> /// 初始化游戏地图 ...

  9. 使用D3绘制图表（4）--面积图表

    面积图表的绘制就是在曲线图表的基础上做一点小小的改动.其他的代码跟绘制曲线图表没有什么区别,下面有黄色背景颜色的代码就是修改的,是不是很简单,第一句修改的地方就是把之前绘制线的函数(line)改成了绘 ...

随机推荐

  1. res里面的drawable(ldpi、mdpi、hdpi、xhdpi、xxhdpi)

    (1)drawable-hdpi里面存放高分辨率的图片,如WVGA (480x800),FWVGA (480x854) (2)drawable-mdpi里面存放中等分辨率的图片,如HVGA (320x ...

  2. BZOJ 1076 奖励关

    注意几点: 1.为什么要逆推?由此状态可以轻易算出彼状态是否可行,而彼状态却无法轻易还原为此状态. 2.为什么可以逆推?假设时光倒流了....23333 3.注意位运算的准确,大胆写方程. #incl ...

  3. 基于jquery框架的ajax搜索显示

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  4. PHP实现站点pv，uv统计（三）

    数据分析脚本如下: //error_reporting(0);date_default_timezone_set("PRC");$environment = get_cfg_var ...

  5. SSH思路

    hibernate的配置写到spring的配置中,用spring管理和调用hibernate的工厂和session等.struts的话,通常有2中.一种是用spring中的一个工厂类代替struts的 ...

  6. Linux makefile教程之条件判断六[转]

    使用条件判断 —————— 使用条件判断,可以让make根据运行时的不同情况选择不同的执行分支.条件表达式可以是比较变量的值,或是比较变量和常量的值. 一.示例 下面的例子,判断$(CC)变量是否“g ...

  7. 怎样预防Ddos攻击

    一.为何要DDOS? 随着Internet互联网络带宽的增加和多种DDOS黑客工具的不断发布,DDOS拒绝服务攻击的实施越来越容易,DDOS攻击事件正在成上升趋势.出于商业竞争.打击报复和网络敲诈等多 ...

  8. <转>selenium+python+API分类总结

    分类 方法 方法描述 客户端操作 __init__(self, host, port, browserStartCommand, browserURL) 构造函数.host:selenium serv ...

  9. js中document.all 的用法

    1. document.all是什么? document.all 实质就是文档中所有元素的集合.可以看做一个数组.   2.document.all怎么用? 2.1 根据下标取元素. 语法: docu ...

  10. win7 共享的问题，"您可能没有权限使用网络资源"的解决办法

    重点来了,如果以上方法都不行的话,下面这个绝对有效,本人屡试不爽.1 打开受访者的guest权限2 开始--运行--gpedit.msc3 windows设置---安全设置--本地策略--用户权利指派 ...