学做iOS开发：绘制线条

GraphQuery 发布于2019-06-25 14:47 / 1781人阅读

摘要：才接触开发的时候，觉得有件事非常奇怪，中组件有很多，但却没有一条线的组件。后来才知道，就相当于一个画版，而只要你有足够的想像力，你就可以使用代码在这张画板上做出各种画来，当然像绘制线条矩形框之类的，但是小菜一碟。绘制线条，需要使用到这个类。

才接触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.0

dashedPath.stroke()
CGContextRestoreGState(context)

在模拟里跑下，可以看到这样的效果：

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

@IBDesignable
class 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状态下，直接修改代码中的参数了。像这样：

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

专线服务服务器托管绘制线条 ios开发ios开发线条粗细 ios开发ios

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/15989.html

学做iOS开发之仿「知乎日报」：学习资料准备

摘要：下面记录的这些内容，是方便自己在学习时快速定位到资料而列，内容会不断的扩展完善，具体内容视项目而定。项目地址链接知乎日报分析使用到的第三方库下面记录的这些内容，是方便自己在学习时快速定位到资料而列，内容会不断的扩展、完善，具体内容视项目而定。项目地址 https://github.com/zpz1237/NirZhihuDaily2.0 API链接 https://github.c...

gself 2019-06-25 14:47 评论0 收藏0
学做iOS开发之仿「知乎日报」：问题列表

摘要：问题列表，先将一些疑问记录下来，然后一个个解决。启动时，图片的渐显缩小的显示效果。侧方菜单项目页面中下拉时图片动态缩放效果。问题列表，先将一些疑问记录下来，然后一个个解决。 App启动时，图片的渐显、缩小的显示效果。侧方菜单项目页面中下拉时图片动态缩放效果。

DoINsiSt 2019-06-25 14:47 评论0 收藏0
［分享］iOS开发－CGContextRef画图小结

摘要：画实心圆画实心圆参数圆坐标。可以是椭圆画一个菱形填充了一段路径分享来源 CGContextRef context = UIGraphicsGetCurrentContext(); //设置上下文 //画一条线 CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor);//线条颜色 CGContextSe...

monw3c 2019-06-25 15:05 评论0 收藏0
［分享］iOS开发－贝塞尔曲线理论UIBezierPath类介绍

摘要：如果是基于矢量形状的，都用直线和曲线段去创建。每一个连接的直线或者曲线段的集合成为。代码设置线条颜色线条拐角终点处理结果如下图类提供了添加二次贝塞尔曲线和三次贝塞尔曲线的支持。曲线段在当前点开始，在指定的点结束。使用UIBezierPath类可以创建基于矢量的路径，这个类在UIKit中。此类是Core Graphics框架关于path的一个封装。使用此类可以定义简单的形状，如椭圆或者...

wanglu1209 2019-06-25 15:05 评论0 收藏0
Canvas 涂鸦

摘要：第二步，消除涂鸦锯齿的办法简单的绘制和图片保存完成了，但是在这种情况下，线条会有很明显的锯齿灵魂画手来了。在经过搜索查阅之后，发现有一个绘制办法可以降低锯齿的问题。橡皮擦的原理是，将橡皮绘制的路径覆盖到原来的画笔上。第一步，我们先实现简单的绘制，并且在绘制之后将图片保存到本地 var canvas = document.getElementById(canvas), ...

thekingisalwaysluc 2019-08-21 17:01 评论0 收藏0