使用 IBDesignable 的水平虚线

Posted

技术标签:

【中文标题】使用 IBDesignable 的水平虚线【英文标题】:Dashed horizontal line using IBDesignable 【发布时间】:2019-01-14 09:06:02 【问题描述】:

所以我遇到了this 问题,我想用@IBDesignable 以相同的方法绘制一条水平线。

我曾尝试在课堂上玩耍,但没有结果。

@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()
    

【问题讨论】:

【参考方案1】:

你可以实现如下,

@IBDesignable class DottedHorizontal: UIView 

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

    override func draw(_ rect: CGRect) 

        let fullHeight = bounds.size.height
        let width = bounds.size.width

        let path = UIBezierPath()

        path.move(to: CGPoint(x: 0, y: fullHeight/2))
        path.addLine(to: CGPoint(x: width, y: fullHeight/2))

        path.lineWidth = 5

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

        dotColor.setStroke()
        path.stroke()
    

【讨论】:

但高度不是视图的全高 lineWidth = 5 更改为lineWidth = fullHeight

以上是关于使用 IBDesignable 的水平虚线的主要内容,如果未能解决你的问题,请参考以下文章

绘制 svg 虚线的动画

无法在画布上绘制垂直虚线

android中虚线的实现

Android实战开发篇 虚线

WPF:删除样式列表框中焦点项目周围的虚线边框

visio如何让一个图形挡住另一个图形的地方变成虚线