用对角线绘制的线填充 UIView? [英] Fill a UIView with diagonally drawn lines?

查看:24
本文介绍了用对角线绘制的线填充 UIView?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

如何像这样填充UIView(带有一些对角绘制的白线).

How to fill a UIView like this (with some diagonally drawn white lines).

PS:我的目的是填充而不是边框​​.

PS: My intentions is about the fill not the border.

有什么帮助吗?

推荐答案

实现这一点的一种方法是覆盖 UIViewdraw(_:) 方法和在那里做你的自定义绘图.

One way of achieving this would be to override the draw(_:) method of UIView and do your custom drawing there.

绘制对角线相当简单,您只需要:

Drawing diagonal lines is fairly simple, you just need to:

  • 从 0 到宽度 + 高度(沿着矩形的水平边缘,然后向上垂直),通过间隙 + 线宽,从对角线(45º)长度转换为平行于矩形要绘制的矩形边缘.

  • Stride from 0 to width + height (along the horizontal edge of the rect, then up the vertical), by the gap + line width, converted from being a diagonal (at 45º) length to being parallel to the edge of the rect to draw in.

在每次迭代中,从该迭代的给定点到相对边缘上的点(45º)画一条线.我们通过简单地向上处理矩形的垂直边缘,然后沿水平方向)

At each iteration, draw a line from the given point for that iteration to the point on the edge opposite (at 45º). We get this point by simply working up the vertical edge of the rect, then along the horizontal)

这样的事情应该可以达到预期的结果:

Something like this should achieve the desired result:

class StripeyView : UIView {

    let lineGap: CGFloat = 7
    let lineWidth: CGFloat = 3
    let lineColor = UIColor.white

    override func draw(_ rect: CGRect) {

        let ctx = UIGraphicsGetCurrentContext()!

        // flip y-axis of context, so (0,0) is the bottom left of the context
        ctx.scaleBy(x: 1, y: -1)
        ctx.translateBy(x: 0, y: -bounds.size.height)

        // generate a slightly larger rect than the view,
        // to allow the lines to appear seamless
        let renderRect = bounds.insetBy(dx: -lineWidth * 0.5, dy: -lineWidth * 0.5)

        // the total distance to travel when looping (each line starts at a point that
        // starts at (0,0) and ends up at (width, height)).
        let totalDistance = renderRect.size.width + renderRect.size.height

        // loop through distances in the range 0 ... totalDistance
        for distance in stride(from: 0, through: totalDistance,
                               // divide by cos(45º) to convert from diagonal length
                               by: (lineGap + lineWidth) / cos(.pi / 4)) {

            // the start of one of the stripes
            ctx.move(to: CGPoint(
                // x-coordinate based on whether the distance is less than the width of the
                // rect (it should be fixed if it is above, and moving if it is below)
                x: distance < renderRect.width ?
                    renderRect.origin.x + distance :
                    renderRect.origin.x + renderRect.width,

                // y-coordinate based on whether the distance is less than the width of the
                // rect (it should be moving if it is above, and fixed if below)
                y: distance < renderRect.width ?
                    renderRect.origin.y :
                    distance - (renderRect.width - renderRect.origin.x)
            ))

            // the end of one of the stripes
            ctx.addLine(to: CGPoint(
                // x-coordinate based on whether the distance is less than the height of
                // the rect (it should be moving if it is above, and fixed if it is below)
                x: distance < renderRect.height ?
                    renderRect.origin.x :
                    distance - (renderRect.height - renderRect.origin.y),

                // y-coordinate based on whether the distance is less than the height of
                // the rect (it should be fixed if it is above, and moving if it is below)
                y: distance < renderRect.height ?
                    renderRect.origin.y + distance :
                    renderRect.origin.y + renderRect.height
            ))
        }

        // stroke all of the lines added
        ctx.setStrokeColor(lineColor.cgColor)
        ctx.setLineWidth(lineWidth)
        ctx.strokePath()
    }
}

输出:

(假设视图有一个红色的backgroundColor)

(Assuming the view has a red backgroundColor)

您可以调整 lineGaplineWidth 属性以生成不同的结果.

You can adjust the lineGap and lineWidth properties to generate varying results.

这篇关于用对角线绘制的线填充 UIView?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆