Swift-虚线绘制

作者: FlyElephant | 来源:发表于2017-03-26 16:38 被阅读2012次

iOS中有时候会遇到虚线绘制,关于绘制虚线有两种方式,一种是通过Context绘制图片通过UIImageView展示虚线,第二中通过CAShapeLayer的形式设置虚线.

Context绘制虚线

简单看一下实现效果:

FlyElephant.png

除了最后一行,前面都是通过Context来实现的,主要是针对几个属性的设置来进行详细设置.
核心代码:
<pre><code>` let imgView:UIImageView = UIImageView(frame: CGRect(x: 0, y: 100, width: self.view.frame.width, height: 20))
self.view.addSubview(imgView)

    UIGraphicsBeginImageContext(imgView.frame.size) // 位图上下文绘制区域
    imgView.image?.draw(in: imgView.bounds)
    
    let context:CGContext = UIGraphicsGetCurrentContext()!
    
    context.setLineCap(CGLineCap.square)
    
    let lengths:[CGFloat] = [10,20] // 绘制 跳过 无限循环
    
    context.setStrokeColor(UIColor.red.cgColor)
    context.setLineWidth(5)
    context.setLineDash(phase: 0, lengths: lengths)
    context.move(to: CGPoint(x: 0, y: 10))
    context.addLine(to: CGPoint(x: self.view.frame.width, y: 10))
    context.strokePath()
    
    imgView.image = UIGraphicsGetImageFromCurrentImageContext()`</code></pre>

基本设置绘制区域,区域颜色,线条高度,有一个需要介绍的方式是:
<pre><code>context.setLineDash(phase: 0, lengths: lengths)</code></pre>

虚线设置两个重要参数:
①phase表示开始绘制之前跳过多少点进行绘制,默认一般设置为0,第二张图片是设置5的实际效果图.

②lengths通常都包含两个数字,第一个是绘制的宽度,第二个表示跳过的宽度,也可以设置多个,第三张图是设置为三个参数的实际效果图.绘制按照先绘制,跳过,再绘制,再跳过,无限循环.
<pre><code>let lengths:[CGFloat] = [10,20,10] // 绘制 跳过 无限循环</code></pre>

项目中有的时候遇到,单一颜色虚线太单调,如果想设置两种颜色的虚线,设置多种线条路径,可以根据起始位置来控制.
<pre><code>context.move(to: CGPoint(x: 15, y: 10))</code></pre>
倒数第二张图实现代码:
<pre><code>` let imgView:UIImageView = UIImageView(frame: CGRect(x: 0, y: 250, width: self.view.frame.width, height: 20))
self.view.addSubview(imgView)

    UIGraphicsBeginImageContext(imgView.frame.size) // 位图上下文绘制区域 FlyElephant
    imgView.image?.draw(in: imgView.bounds)
    
    let context:CGContext = UIGraphicsGetCurrentContext()!
    
    context.setLineCap(CGLineCap.square)
    
    let lengths:[CGFloat] = [10,20] // 绘制 跳过 无限循环
    
    context.setStrokeColor(UIColor.red.cgColor)
    context.setLineWidth(2)
    context.setLineDash(phase: 0, lengths: lengths)
    context.move(to: CGPoint(x: 0, y: 10))
    context.addLine(to: CGPoint(x: self.view.frame.width, y: 10))
    context.strokePath()
    
    context.setStrokeColor(UIColor.blue.cgColor)
    context.setLineWidth(2)
    context.setLineDash(phase: 0, lengths: lengths)
    context.move(to: CGPoint(x: 15, y: 10))
    context.addLine(to: CGPoint(x: self.view.frame.width, y: 10))
    context.strokePath()
    
    imgView.image = UIGraphicsGetImageFromCurrentImageContext()`</code></pre>

CAShapeLayer 实现方式

第一种方式实现起来非常方便,关于context的使用Swift中已经简化了很多代码,不会像OC中那么冗余,实现起来那么费劲.CAShapeLayer实现起来与Context相比大同小异.
核心代码:
<pre><code>` let lineView:UIView = UIView(frame: CGRect(x: 0, y: 300, width: self.view.frame.width, height: 20))
self.view.addSubview(lineView)

    let shapeLayer:CAShapeLayer = CAShapeLayer()
    
    shapeLayer.bounds = lineView.bounds
    
    shapeLayer.position = CGPoint(x: lineView.frame.width / 2, y: lineView.frame.height / 2)
    
    shapeLayer.fillColor = UIColor.clear.cgColor
    shapeLayer.strokeColor = UIColor.red.cgColor
    
    shapeLayer.lineWidth = 5
    shapeLayer.lineJoin = kCALineJoinRound
    shapeLayer.lineDashPhase = 0
    shapeLayer.lineDashPattern = [NSNumber(value: 10), NSNumber(value: 20)]
    
    let path:CGMutablePath = CGMutablePath()
    path.move(to: CGPoint(x: 0, y: 10))
    path.addLine(to: CGPoint(x: lineView.frame.width, y: 10))
    shapeLayer.path = path
    
    lineView.layer.addSublayer(shapeLayer)`</code></pre>

相关文章

  • swift-绘制虚线

    参考:http://www.jianshu.com/p/f9009968c735 效果图: 代码: 效果图2: 代码:

  • Swift-虚线绘制

    iOS中有时候会遇到虚线绘制,关于绘制虚线有两种方式,一种是通过Context绘制图片通过UIImageView展...

  • iOS 绘制虚线

    /** ** lineView: 需要绘制成虚线的view ** lineLength: 虚线的宽度 ** ...

  • iOS开发绘制虚线的方法

    iOS开发绘制虚线的方法 方法一:通过Quartz 2D 在 UIView drawRect:方法进行绘制虚线 -...

  • IOS绘制虚线的方法总结

    一、重写drawRect方法 二、采用CAShapeLayer方式绘制虚线 三、经济实惠型:采用贴图的方式绘制虚线...

  • iOS两种绘制虚线的方法

    个人CSND 一、绘制单条的虚线 二、给一个控件添加虚线 1、绘制单条的虚线 样式1:------- 2、给一个控...

  • Androidz中Drawable绘制虚线

    Android绘制虚线有很多种方式,常用的就是通过drawable资源绘制虚线。示例代码如下: android:s...

  • 绘制虚线

    CAShapeLayer *shapeLayer = [CAShapeLayer layer]; [shape...

  • 绘制虚线

    方法一 ···· ····lengths的值{10,10}表示先绘制10个点,再跳过10个点,如此反复,如图: 如...

  • 绘图相关(平滑过渡色、镂空效果、部分圆角等)

    1.绘制虚线根据图像的边缘绘制虚线 2.贝塞尔画出曲线(可以是直线,改变线型就会变成虚线) 3.画正方形(部分圆角...

网友评论

  • deepindo:如果我的view是通过约束来布局的,不是frame,请问如何设置虚线边框呢?我看上面都是根据frame来的

本文标题:Swift-虚线绘制

本文链接:https://www.haomeiwen.com/subject/zahkottx.html