ios 如何快速制作虚线?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/38961499/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-31 09:55:05  来源:igfitidea点击:

How to make a dashed line in swift?

iosiphoneswiftcore-graphicsline

提问by A. Steiness

I want to know how to make a dashed line in swift like this: - - - - - - - - instead of a regular straight line like this: ----------------, I know that i can make multiple lines but that will require so much unnecessary code if i can just write it in 1 line. Btw it has to be in CoreGraphics.

我想知道如何像这样快速制作虚线:- - - - - - - - 而不是这样的常规直线:----------------,我知道我可以写多行,但如果我只能写在 1 行中,那将需要很多不必要的代码。顺便说一句,它必须在 CoreGraphics 中。

回答by Fan Jin

Swift 4

斯威夫特 4

@IBOutlet var dashedView: UIView!

func drawDottedLine(start p0: CGPoint, end p1: CGPoint, view: UIView) {
    let shapeLayer = CAShapeLayer()
    shapeLayer.strokeColor = UIColor.lightGray.cgColor
    shapeLayer.lineWidth = 1
    shapeLayer.lineDashPattern = [7, 3] // 7 is the length of dash, 3 is length of the gap.

    let path = CGMutablePath()
    path.addLines(between: [p0, p1])
    shapeLayer.path = path
    view.layer.addSublayer(shapeLayer)
}

Call function

调用函数

drawDottedLine(start: CGPoint(x: dashedView.bounds.minX, y: dashedView.bounds.minY), end: CGPoint(x: dashedView.bounds.maxX, y: dashedView.bounds.minY), view: dashedView)

With the above you will have a straight line, you can also change points as you wish, for example if you change the end point's y from dashedView.bounds.minYto dashedView.bounds.maxYyou will have diagonal.

有了上面的你将有一条直线,你也可以根据需要改变点,例如,如果你改变终点的 y 从dashedView.bounds.minYdashedView.bounds.maxY你会有对角线。

If you will use it in a subclass of UIView you won't have the outlet so you will use it with self instead.

如果您将在 UIView 的子类中使用它,您将没有插座,因此您将使用它与 self 代替。

回答by user3230875

You create Dashed Lines the same way as Objective-C, except that you'll use Swift.

您创建虚线的方式与 Objective-C 相同,不同之处在于您将使用 Swift。

Here is how you do it using UIBezierPath:

以下是使用 UIBezierPath 执行此操作的方法:

let  path = UIBezierPath()

let  p0 = CGPoint(x: self.bounds.minX, y: self.bounds.midY)
path.move(to: p0)

let  p1 = CGPoint(x: self.bounds.maxX, y: self.bounds.midY)
path.addLine(to: p1)

let  dashes: [ CGFloat ] = [ 16.0, 32.0 ]
path.setLineDash(dashes, count: dashes.count, phase: 0.0)

path.lineWidth = 8.0
path.lineCapStyle = .butt
UIColor.magenta.set()
path.stroke()

Here is how to draw Dotted Lines using UIBezierPath:

下面是如何使用 UIBezierPath 绘制虚线:

let  path = UIBezierPath()

let  p0 = CGPointMake(CGRectGetMinX(self.bounds), CGRectGetMidY(self.bounds))
path.moveToPoint(p0)

let  p1 = CGPointMake(CGRectGetMaxX(self.bounds), CGRectGetMidY(self.bounds))
path.addLineToPoint(p1)

let  dashes: [ CGFloat ] = [ 0.0, 16.0 ]
path.setLineDash(dashes, count: dashes.count, phase: 0.0)
path.lineWidth = 8.0
path.lineCapStyle = .Round
UIColor.magentaColor().set()
path.stroke()

Here is how to draw Dashed Lines Using CGContext:

以下是如何使用 CGContext 绘制虚线:

let  context: CGContext = UIGraphicsGetCurrentContext()!

let  p0 = CGPointMake(CGRectGetMinX(self.bounds), CGRectGetMidY(self.bounds))
CGContextMoveToPoint(context, p0.x, p0.y)

let  p1 = CGPointMake(CGRectGetMaxX(self.bounds), CGRectGetMidY(self.bounds))
CGContextAddLineToPoint(context, p1.x, p1.y)

let  dashes: [ CGFloat ] = [ 16.0, 32.0 ]
CGContextSetLineDash(context, 0.0, dashes, dashes.count)

CGContextSetLineWidth(context, 8.0)
CGContextSetLineCap(context, .Butt)
UIColor.blueColor().set()
CGContextStrokePath(context)

回答by Amit Kumar

By Using Custom Class inherited from UIView also supports Storyboard.

通过使用从 UIView 继承的自定义类也支持 Storyboard。

All you need to do is make a view in storyboard assign class to that view and see the magic in storyboard.

您需要做的就是在故事板中创建一个视图,将类分配给该视图并查看故事板中的魔力。

@IBDesignable
class DashedLineView : UIView {
    @IBInspectable var perDashLength: CGFloat = 2.0
    @IBInspectable var spaceBetweenDash: CGFloat = 2.0
    @IBInspectable var dashColor: UIColor = UIColor.lightGray


    override func draw(_ rect: CGRect) {
        super.draw(rect)
        let  path = UIBezierPath()
        if height > width {
            let  p0 = CGPoint(x: self.bounds.midX, y: self.bounds.minY)
            path.move(to: p0)

            let  p1 = CGPoint(x: self.bounds.midX, y: self.bounds.maxY)
            path.addLine(to: p1)
            path.lineWidth = width

        } else {
            let  p0 = CGPoint(x: self.bounds.minX, y: self.bounds.midY)
            path.move(to: p0)

            let  p1 = CGPoint(x: self.bounds.maxX, y: self.bounds.midY)
            path.addLine(to: p1)
            path.lineWidth = height
        }

        let  dashes: [ CGFloat ] = [ perDashLength, spaceBetweenDash ]
        path.setLineDash(dashes, count: dashes.count, phase: 0.0)

        path.lineCapStyle = .butt
        dashColor.set()
        path.stroke()
    }

    private var width : CGFloat {
        return self.bounds.width
    }

    private var height : CGFloat {
        return self.bounds.height
    }
}

回答by Joshua Hart

Pretty easy UIView Extension for SWIFT 4.2:

SWIFT 4.2非常简单的 UIView 扩展:

extension UIView {
    private static let lineDashPattern: [NSNumber] = [2, 2]
    private static let lineDashWidth: CGFloat = 1.0

    func makeDashedBorderLine() {
        let path = CGMutablePath()
        let shapeLayer = CAShapeLayer()
        shapeLayer.lineWidth = UIView.lineDashWidth
        shapeLayer.strokeColor = UIColor.lightGray.cgColor
        shapeLayer.lineDashPattern = UIView.lineDashPattern
        path.addLines(between: [CGPoint(x: bounds.minX, y: bounds.height/2),
                                CGPoint(x: bounds.maxX, y: bounds.height/2)])
        shapeLayer.path = path
        layer.addSublayer(shapeLayer)
    }
}

回答by nullforlife

My extension method built from @FanJins answer

我从@FanJins 回答构建的扩展方法

extension UIView {

    func createDashedLine(from point1: CGPoint, to point2: CGPoint, color: UIColor, strokeLength: NSNumber, gapLength: NSNumber, width: CGFloat) {
        let shapeLayer = CAShapeLayer()

        shapeLayer.strokeColor = color.cgColor
        shapeLayer.lineWidth = width
        shapeLayer.lineDashPattern = [strokeLength, gapLength]

        let path = CGMutablePath()
        path.addLines(between: [point1, point2])
        shapeLayer.path = path
        layer.addSublayer(shapeLayer)
    }
}

Then calling method looks something like this:

然后调用方法看起来像这样:

let topPoint = CGPoint(x: view.frame.midX, y: view.bounds.minY)
let bottomPoint = CGPoint(x: view.frame.midX, y: view.bounds.maxY)

view.createDashedLine(from: topPoint, to: bottomPoint, color: .black, strokeLength: 4, gapLength: 6, width: 2)

回答by Sam

Objective C

@user3230875answer helped me to understand what's needed to draw a dotted line.
so I hope this answer might help an Obj-Cseeker

Objective C

@user3230875 的答案帮助我了解绘制虚线需要什么。
所以我希望这个答案可以帮助Obj-C寻求者

//dashed line
    path = [UIBezierPath bezierPath];
    [path moveToPoint:CGPointMake(dashedLineStartX, dashedLineStartY)];
    [path addLineToPoint:CGPointMake(dashedLineEndX, dashedLineEndY)];
    path.lineWidth = 5;
    [color setStroke];
    CGFloat dashes[] = {4.0,8.0};
    [path setLineDash:dashes count:2 phase:0.0];
    path.lineCapStyle = kCGLineCapButt;
    [path stroke];