在2017年使用IBDesignable绘制虚线（不是虚线！）线 [英] Draw dotted (not dashed!) line, with IBDesignable in 2017

问题描述

使用UIKit绘制虚线行很容易。所以：

  CGFloat破折号[] = {4,2}; 
 [path setLineDash：破折号：2阶段：0]; 
 [路径中风]; 
  

有没有办法画一条真正的虚线？

任何想法？

---

由于这个问题真的很老，没有人填写完整的 @IBDesignable 解决方案，这里是...

希望它可以节省一些人打字。

  @IBDesignable class DottedVertical：UIView {
 
 @IBInspectable var dotColor：UIColor = UIColor.etc 
 @IBInspectable var lowerHalfOnly：Bool = false 
 
覆盖func draw（_ rect：CGRect）{
 
 //说你想要8个点，有完美的fenceposting：
 let totalCount = 8 + 8  -  1 
 let fullHeight = bounds.size.height 
 let width = bounds.size.width 
 let itemLength = fullHeig ht / CGFloat（totalCount）
 
 let path = UIBezierPath（）
 
 let beginFromTop = CGFloat（0.0）
 let top = CGPoint（x：width / 2， y：beginFromTop）
 let bottom = CGPoint（x：width / 2，y：fullHeight）
 
 path.move（to：top）
 path.addLine（to：bottom） ）
 
 path.lineWidth = width 
 
 let dashes：[CGFloat] = [itemLength，itemLength] 
 path.setLineDash（破折号，计数：破折号，阶段：0）
 
 //对于ROUNDED点，只需更改为.... 
 //让破折号：[CGFloat] = [0.0，itemLength * 2.0] 
 / /path.lineCapStyle = CGLineCap.round 
 
 dotColor.setStroke（）
 path.stroke（）
} 
} 
  

我将其设为垂直，您可以轻松更改。

请注意，为块的高度（totalCount等等）给出的示例代码会使块与像素完美匹配，与创建线的UIView的末端匹配。

请务必勾选下面的RobMayoff的答案，该答案给出了点 - 不是块的两行代码。

解决方案

将线帽样式设置为圆形，并将on长度设置为一个很小的数字。

Swift playground示例：

  import UIKit 
 import PlaygroundSupport 
 
 let path = UIBezierPath（）
 path.move（ to：CGPoint（x：10，y：10））
 path.addLine（to：CGPoint（x：290，y：10））
 path.lineWidth = 8 
 
让破折号：[CGFloat] = [0.001，path.lineWi dth * 2] 
 path.setLineDash（破折号，计数：破折号，阶段：0）
 path.lineCapStyle = CGLineCap.round 
 
 UIGraphicsBeginImageContextWithOptions（CGSize（width：300） ，身高：20），假，2）
 
 UIColor.white.setFill（）
 UIGraphicsGetCurrentContext（）！。fill（.infinite）
 
 UIColor.black .setStroke（）
 path.stroke（）
 
 let image = UIGraphicsGetImageFromCurrentImageContext（）
 let view = UIImageView（image：image）
 PlaygroundPage.current.liveView =查看
 
 UIGraphicsEndImageContext（）
  

结果：

---

对于objective-C，使用与问题相同的示例类，只需添加

  CGContextSetLineCap（cx，kCGLineCapRound）; 
  

在调用 CGContextStrokePath 之前，并更改 ra 数组值以匹配我的Swift代码。

It's easy to draw a dashed line with UIKit. So:

CGFloat dashes[] = {4, 2};
[path setLineDash:dashes count:2 phase:0];
[path stroke];

Is there any way way to draw a genuine dotted line?

Any ideas?

---

Since this question is really old and nobody put in a full @IBDesignable solution, here it is...

Hope it saves someone some typing.

@IBDesignable class DottedVertical: UIView {

    @IBInspectable var dotColor: UIColor = UIColor.etc
    @IBInspectable var lowerHalfOnly: Bool = false

    override func draw(_ rect: CGRect) {

        // say you want 8 dots, with perfect fenceposting:
        let totalCount = 8 + 8 - 1
        let fullHeight = bounds.size.height
        let width = bounds.size.width
        let itemLength = fullHeight / CGFloat(totalCount)

        let path = UIBezierPath()

        let beginFromTop = CGFloat(0.0)
        let top = CGPoint(x: width/2, y: beginFromTop)
        let bottom = CGPoint(x: width/2, y: fullHeight)

        path.move(to: top)
        path.addLine(to: bottom)

        path.lineWidth = width

        let dashes: [CGFloat] = [itemLength, itemLength]
        path.setLineDash(dashes, count: dashes.count, phase: 0)

        // for ROUNDED dots, simply change to....
        //let dashes: [CGFloat] = [0.0, itemLength * 2.0]
        //path.lineCapStyle = CGLineCap.round

        dotColor.setStroke()
        path.stroke()
    }
}

I made it vertical, you can easily change.

Just put a UIView in the scene; make it whatever width you wish and that will be the width of the dotted line.

Simply change the class to DottedVertical and you're done. It will render like that properly in storyboard.

Note that the example code given for the height of the blocks ("totalCount" and so on...) results in the blocks perfectly, to the pixel, matching with the ends of the UIView that is creating the line.

Be sure to tick RobMayoff's answer below which gives the two needed lines of code for dots-not-blocks.

解决方案

Set the line cap style to round and set the "on" length to a tiny number.

Swift playground example:

import UIKit
import PlaygroundSupport

let path = UIBezierPath()
path.move(to: CGPoint(x:10,y:10))
path.addLine(to: CGPoint(x:290,y:10))
path.lineWidth = 8

let dashes: [CGFloat] = [0.001, path.lineWidth * 2]
path.setLineDash(dashes, count: dashes.count, phase: 0)
path.lineCapStyle = CGLineCap.round

UIGraphicsBeginImageContextWithOptions(CGSize(width:300, height:20), false, 2)

UIColor.white.setFill()
UIGraphicsGetCurrentContext()!.fill(.infinite)

UIColor.black.setStroke()
path.stroke()

let image = UIGraphicsGetImageFromCurrentImageContext()
let view = UIImageView(image: image)
PlaygroundPage.current.liveView = view

UIGraphicsEndImageContext()

Result:

---

For objective-C, using the same example class as in the question, simply add

CGContextSetLineCap(cx, kCGLineCapRound);

before the call to CGContextStrokePath, and change the ra array values to match my Swift code.

这篇关于在2017年使用IBDesignable绘制虚线（不是虚线！）线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！