作者:codeGlider

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

上一篇文章的动画

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

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

//绘制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(), controlPoint1: CGPointMake())
    bezierPath.addCurveToPoint(CGPointMake(), 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的学习网站:

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
     }
}

添加刚才生成的代码,替换注释内容:

 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(), controlPoint1: CGPointMake())
    bezierPath.addCurveToPoint(CGPointMake(), 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()

将图层的形状变成代码所绘制的形状

layer.path = bezierPath.CGPath

确定图层的大小,下面这个函数会把我们的形状用一个矩形起来,这个矩形就是图层的大小

layer.bounds = CGPathGetBoundingBox(layer.path)

打开ViewController.swift

添加一个图层常量,调用刚才创建的类中的方法

let logo = swiftLogoLayer.logoLayer()

在viewDidLoad()方法中添加以下代码:

将背景设置为灰色

self.view.backgroundColor = UIColor.grayColor()

将logo图层居中

 logo.position = CGPoint(x: view.layer.bounds.size.width/, y: view.layer.bounds.size.height/)

修改logo填充色为白色

logo.fillColor = UIColor.whiteColor().CGColor

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

self.view.layer.addSublayer(logo)

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

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

运行结果

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

github托管地址

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

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

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

  2. ichart.js绘制虚线 ,平均分虚线

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

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

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

  4. IOS 中openGL使用教程2(openGL ES 入门篇 | 绘制一个多边形)

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

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

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

  6. 使用D3绘制图表(4)--面积图表

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

  7. 测试C++代码与WebBrowser HTML的互动

    testWebBrowserDlg.h // testWebBrowserDlg.h : 头文件 // #pragma once #include "explorer1.h" #i ...

  8. Scene视图辅助线绘制

    有时候需要在Scene视图中绘制一些辅助线,方便进行一些编辑的工作,可以通过如下类和函数完成: 绘制辅助线,相关类: Gizmos类:用于在Scene视图中绘制调试信息或辅助线,这些辅助线只有在Sce ...

  9. 用Path来绘制一些图形

    Path是android中用来封装几何学路径的一个类,因为Path在图形绘制上占的比重还是相当大的.你可以用它来绘制各种样式的几何图形,做图表什么的都可以. 一.画线段 1.1 lineT(float ...

随机推荐

  1. &quot;Chinese_PRC_CI_AS&quot; 和 &quot;Chinese_PRC_90_CI_AI&quot; 之间的排序规则冲突问题

    这个错误真是太恶心了.不过有解决办法,你问我哪来的?当然百度的咯! 示例: select a.workTypeDes from A a,B b  where a.workTypeCode=b.work ...

  2. JavaScript第一节课

    1.用法:位于<script></script>可以位于body和head中,不限制标签数量,也可以创建外部Js文件,然后引入.(引入方法:<script src=&qu ...

  3. ScriptTask读取SharePoint上的Excel

    很多情况下,我们会SharePoint 作为文件共享的Server,有时,业务上需要将SharePoint上的Excel文档 Download 到db中.对于搞DB的人来说,难点是如何下载Excel? ...

  4. 自定义PHP系统异常处理类

    <?php // 自定义异常函数 set_exception_handler('handle_exception'); // 自定义错误函数 set_error_handler('handle_ ...

  5. SQLSERVER跨数据库操作 ---- sp_addlinkedserver

    由于项目需要跨数据库进行相应的sql操作(这里遇到的是sqlserver的A库,到sqlserver的B库) sp_addlinkedserver [ @server = ] ' server ' [ ...

  6. 特殊的对象引用---$this

    只要是对象中的成员,必须使用这个对象($this)来访问到这个对象内部的属性和方法 特殊对象的引用$this就是再对象内部的成员方法中,代表本对象的一个引用,但智能在对象的成员方法中使用,不管是在对象 ...

  7. mybatisGenerator 代码自动生成报错 Result Maps collection already contains value for BaseResultMap--转

    转自:http://blog.csdn.net/tan3739/article/details/7555665 Exception in thread "main" Java.la ...

  8. 分享一个绿色版本 sql server 查询器,

    首先感谢原作者 源码来原于网络 此查询器增加了一些功能, 可以高亮显示 导出sql 语句    可以把左边树型拖入脚本编辑器 http://pan.baidu.com/s/1dDjaSbn

  9. CFDebug.template

    { "AWSTemplateFormatVersion" : "2010-09-09", "Description" : "Cre ...

  10. Lead推荐学asp.net书籍

    ASP.NET 3.5 Unleashed 中文版: ASP.NET3.5揭秘(卷1) ASP.NET3.5揭秘(卷2) JS A Smarter Way to Learn JavaScript