博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
学做iOS开发:绘制线条
阅读量:6347 次
发布时间:2019-06-22

本文共 2561 字,大约阅读时间需要 8 分钟。

才接触iOS开发的时候,觉得有件事非常奇怪,Xcode中组件有很多,但却没有一条线的组件。当时想到应该可以通过UIView将高度设置为1,就可以得到一条线了吧,不过放在视图里面就是需设置各种线束。也下分不便。更要命的时候,有时想要画一个框,再来一个View上放一个View,再调整位置的话,那真是一场恶梦。想想真是太无知了,这种思维方式安全就是按PS或是AI的绘图方式来做,但可惜iOS不吃这一套。

后来才知道,UIView就相当于一个画版,而只要你有足够的想像力,你就可以使用代码在这张画板上做出各种画来,当然像绘制线条、矩形框之类的,但是小菜一碟。

要线一条线,无非就是告诉画笔起点,再说提明终点,给出线条的粗细,颜色,如此这般就可以绘出一条线来了。

前面我们说过,UIView就是一张画板,而这条画板默认情况下,就只能堆放一些组件,就是一张空白的,你想画上东西,就得自己重新定义它。

在Xcode中,你可以创建一个以UIView为SuperClass的子类,然后再在drawRect(rect:) 中使用代码绘出线条即可。

绘制线条,需要使用到UIBezierPath这个类。

let linePath = UIBezierPath()// 将画笔移动到起点位置linePath.moveToPoint(CGPoint(x: 30, y: 120))// 绘到 (290, 120)这个点linePath.addLineToPoint(CGPoint(x: 290, y: 120))linePath.addLineToPoint(CGPoint(x: 30, y: 240))linePath.addLineToPoint(CGPoint(x: 290, y: 240))// 线的粗线linePath.lineWidth = 2.0// 线条颜色UIColor.redColor().setStroke()// 绘出线条linePath.stroke()

这里绘出的是一条实线,如果需要绘出虚线怎么呢?可以这样做:

// 画虚线let context = UIGraphicsGetCurrentContext()let dashedPath = UIBezierPath()dashedPath.moveToPoint(CGPoint(x: 30, y: 280))dashedPath.addLineToPoint(CGPoint(x: 290, y: 280))CGContextSaveGState(context)CGContextSetLineDash(context, 0, [10, 10], 2)dashedPath.lineWidth = 3.0dashedPath.stroke()CGContextRestoreGState(context)

在模拟里跑下,可以看到这样的效果:

图片描述

这是直线的画法,如果是绘制一个矩形的话,可以这样做:

@IBDesignableclass RectView: UIView {        // 边框颜色    @IBInspectable var strokeColor: UIColor = UIColor.blackColor()    // 填充色    @IBInspectable var fillColor: UIColor = UIColor.whiteColor()    // 线的粗细    @IBInspectable var lineWidth: CGFloat = 1.0        override func drawRect(rect: CGRect) {        // 实线矩形        // 位置、长、宽        let rectPath = UIBezierPath(rect: CGRectMake(30, 80, 260, 120))        // 设置边框颜色        strokeColor.setStroke()        // 线的粗细        rectPath.lineWidth = lineWidth        // 开始绘制        rectPath.stroke()                // 对矩形框进行填充        fillColor.setFill()        rectPath.fill()                // 绘制虚线框        let context = UIGraphicsGetCurrentContext()        let dashedRect = UIBezierPath(rect: CGRectMake(30, 220, 260, 120))                dashedRect.lineWidth = lineWidth                CGContextSaveGState(context)        CGContextSetLineDash(context, 5, [10, 10], 2)        strokeColor.setStroke()        dashedRect.stroke()        CGContextRestoreGState(context)    }}

运行起来的效果是这样的:

图片描述

这里有了两个新的方法,一个是@IBDesignable,另一个是@IBInspectable,他们有什么作用呢?

一般情况下,我们使用代码写出来的图,是Storyboard里是看不以的,只能运行在模拟器中才能看到效果,这种太过于考验写代码者的水平了,如果能边写代码,边看到图形的效果,那就太好了。于是@IBDesignable就闪亮登场了。有了,你就可以边写代码,边看到效果了。

@IBInspectable又是干什么的呢?他是将代码里的变量添加到Xcode的变量列表中,这就样就在GUI状态下,直接修改代码中的参数了。像这样:

图片描述

终于解决了这个技术难题,感觉自己的开发水平进步了一大截。继续加油!

转载地址:http://mbjla.baihongyu.com/

你可能感兴趣的文章
对Java Serializable(序列化)的理解和总结(一)
查看>>
SVN版本服务器搭建(服务端+客户端)
查看>>
创客运动引发第三次工业革命
查看>>
Mac 中环境变量的配置和理解
查看>>
请把此文转发给你的另一半
查看>>
Win2008R2创建虚拟路由
查看>>
超融合、低成本、高可用私有云解决方案
查看>>
SCOM 2012系列④客户端代理安装
查看>>
infobright中导入数据避免特殊字符问题
查看>>
【原创】用MySQL 生成随机密码-增加大写处理
查看>>
【原创】PostgreSQL 快速创建空表TIPS
查看>>
SFB 项目经验-01-共存迁移-Lync 2013-TO-SFB 2015-规划01
查看>>
nginx版本升级到1.10
查看>>
Windows 8快捷键
查看>>
CentOS 6.3下Openswan实现双IDC互联
查看>>
Windows Server 2016-系统安装软硬件要求
查看>>
WPF外包公司——北京动点飞扬软件联系方式和官方博客地址
查看>>
Wvtool学习(三):实现wvtool停词过滤的功能
查看>>
C#读取文件:按行读取
查看>>
编程乐趣:读取12306票价和余票信息(二)
查看>>