ios - 如何使用 Swift 以编程方式使用交替条纹图案填充 UIView？

Question

我可以使用带有 UIColor(patternImage: UIImage(named: "pattern.png")) 的图像实现交替条纹图案填充。

但是，如何使用一些简单紧凑的代码以编程方式绘制交替条纹图案填充？

这是我想要实现的两个示例。

问题

Using code, how do I fill a UIView with different alternating color stripes using Swift?

(1) a two color alternating pattern running top to bottom (90 degrees)?

(2) a three color alternating pattern running top left to bottom right (45 degrees)?

Answer 1

对于我的应用程序，创建可用作背景色的模式 UIColor 更有帮助且性能更高。

一旦我将它添加为 UIColor 的扩展，我就可以轻松地将它放在我的代码中的任何位置，它总是会完美填充，即使 View 旋转、缩小和增大也是如此!

你可以这样使用它:

view.backgroundColor = UIColor.red.patternStripes()
view.backgroundColor = UIColor.red.patternStripes(color2: .darkGray)
view.backgroundColor = UIColor.red.patternStripes(color2: .darkGray, barThickness: 25.0)

并获得这种美丽:

这是 UIColor 的扩展:

extension UIColor {
    
    /// make a diagonal striped pattern
    func patternStripes(color2: UIColor = .white, barThickness t: CGFloat = 25.0) -> UIColor {
        let dim: CGFloat = t * 2.0 * sqrt(2.0)

        let img = UIGraphicsImageRenderer(size: .init(width: dim, height: dim)).image { context in

            // rotate the context and shift up
            context.cgContext.rotate(by: CGFloat.pi / 4.0)
            context.cgContext.translateBy(x: 0.0, y: -2.0 * t)

            let bars: [(UIColor,UIBezierPath)] = [
                (self,  UIBezierPath(rect: .init(x: 0.0, y: 0.0, width: dim * 2.0, height: t))),
                (color2,UIBezierPath(rect: .init(x: 0.0, y: t, width: dim * 2.0, height: t)))
            ]

            bars.forEach {  $0.0.setFill(); $0.1.fill() }
            
            // move down and paint again
            context.cgContext.translateBy(x: 0.0, y: 2.0 * t)
            bars.forEach {  $0.0.setFill(); $0.1.fill() }
        }
        
        return UIColor(patternImage: img)
    }
}

基本上，我正在创建一个临时绘图空间供一个小矩形进行绘制。我给它涂上了一种图案，这种图案在重复时会在所有方面无缝匹配。然后我拍下这张照片并告诉 UIColor 将其用作图案。

技巧 I，您必须使图案图像足够大，以便为每个条形图绘制两次。结果是条厚度 * 2 * sqrt(2)。

我知道我可能会因为风格而受到责备。以下是我的想法:

1. 我使用了像t这样的单字母变量，描述性不是很好。我的辩护意见:我认为它使方程式更具可读性，并且当它仅限于接下来的几行时感觉没问题。
2. 元组。与#1 相同
3. 使用小数(4.0 而不仅仅是 4)。我宁愿不使用小数，但我发现小数的编译时间更好。在更大的项目中，它可以产生巨大的不同。我也承认，它可能读起来不那么漂亮，但在类型上减少歧义甚至对人类有帮助。

3 种颜色:我刚刚意识到原来的问题是要求 3 种颜色，所以这里有一个版本...

首先是数学:

更新代码:

extension UIColor {
    
    /// make a diagonal striped pattern
    func pattern3Stripes(color2: UIColor, color3: UIColor, barThickness t: CGFloat = 25.0) -> UIColor {
        let sqrt2: CGFloat = sqrt(2.0)
        let dim: CGFloat = t * 3.0 * sqrt2
        let size: CGSize = .init(width: dim, height: dim)
        
        let img = UIGraphicsImageRenderer(size: size).image { context in
            
            // rotate the context and shift up
            context.cgContext.rotate(by: CGFloat.pi / 4.0)
            context.cgContext.translateBy(x: 0.0, y: -3.0 * t)
            
            let bars: [(UIColor,UIBezierPath)] = [
                (self,  UIBezierPath(rect: .init(x: 0.0, y: 0.0, width: dim * sqrt2, height: t))),
                (color2,UIBezierPath(rect: .init(x: 0.0, y: t, width: dim * sqrt2, height: t))),
                (color3,UIBezierPath(rect: .init(x: 0.0, y: 2.0 * t, width: dim * sqrt2, height: t)))
            ]
            
            bars.forEach {  $0.0.setFill(); $0.1.fill() }
            
            // move down and paint again
            context.cgContext.translateBy(x: 0.0, y: 3.0 * t)
            bars.forEach {  $0.0.setFill(); $0.1.fill() }
        }
        
        return UIColor(patternImage: img)
    }
}

用法:

    view.backgroundColor = UIColor.green.pattern3Stripes(color2: .white, color3: .red, barThickness: 25.0)

结果: