ios - 如何在没有抗锯齿的情况下调整 UIImage 的大小？

Question

我正在开发一款 iOS 棋盘游戏。我试图给董事会一种“质感”。

我所做的是创建了这个非常小的图像(真的很小，一定要仔细看):

然后我将这张图片传递给 UIColor.init(patternImage:) 初始化器来创建一个 UIColor 就是这张图片。我使用这个 UIColor 来填充一些正方形 UIBezierPath，结果如下所示:

该图像的所有副本都完美对齐，并且它们形成了许多对角线。到目前为止一切顺利。

现在在 iPad 上，我画的方 block 会变大，而且这些方 block 的边框也会变大。我已经成功计算出正方形的笔划宽度和大小应该是多少，所以这不是问题。

但是，由于 iPad 上的方 block 更大，每个方 block 上的对角线也会更多。我不要那个。我需要将非常小的图像调整为更大的图像，并且大小取决于正方形的笔划宽度。具体来说，调整后的图像宽度应为笔划宽度的两倍。

我写了这个扩展来调整图像大小，改编自这个 post :

extension UIImage {
    func resized(toWidth newWidth: CGFloat) -> UIImage {

        let scale = newWidth / size.width
        let newHeight = size.height * scale
        UIGraphicsBeginImageContextWithOptions(CGSize(width: newWidth, height: newHeight), false, 0)
        self.draw(in: CGRect(x: 0, y: 0, width: newWidth, height: newHeight))
        let newImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()

        return newImage!
    }
}

然后这样调用它:

// this is the code I used to draw a single square
let path = UIBezierPath(rect: CGRect(origin: point(for: Position(x, y)), size: CGSize(width: squareLength, height: squareLength)))
UIColor.black.setStroke()
path.lineWidth = strokeWidth
// this is the line that's important!
UIColor(patternImage: #imageLiteral(resourceName: 

"纹理").resized(toWidth: strokeWidth * 2)).setFill() 路径.填充() 路径.描边()

现在游戏板在 iPhone 上看起来像这样:

您可能需要稍微放大网页才能明白我的意思。董事会现在看起来非常丑陋。您可以看到图像每个副本的“边界”。我不想要这个。不过在 iPad 上，电路板看起来不错。我怀疑只有当我缩小图像尺寸时才会发生这种情况。

我认为这可能是由于我使用扩展程序时发生的抗锯齿造成的。我找到了 this post和 this post关于消除抗锯齿，但前者似乎是在 ImageView 中执行此操作，而我在自定义 GameBoardView 的 draw(_:) 方法中执行此操作。后者的解决方案好像和我用的一模一样。

如何在不使用抗锯齿的情况下调整大小？或者在更高的抽象层次上，我怎样才能使我的板看起来漂亮？

Answer 1

class Ruled: UIView {

    override func draw(_ rect: CGRect) {

        let T: CGFloat = 15     // desired thickness of lines
        let G: CGFloat = 30     // desired gap between lines
        let W = rect.size.width
        let H = rect.size.height

        guard let c = UIGraphicsGetCurrentContext() else { return }
        c.setStrokeColor(UIColor.orange.cgColor)
        c.setLineWidth(T)

        var p = -(W > H ? W : H) - T
        while p <= W {

            c.move( to: CGPoint(x: p-T, y: -T) )
            c.addLine( to: CGPoint(x: p+T+H, y: T+H) )
            c.strokePath()
            p += G + T + T
        }
    }
}

享受吧。

请注意，您显然会裁剪该 View 。

如果你想在屏幕上或以某种模式显示它们中的一些，就这样做吧。

---

裁剪到给定的矩形:

上面的类只是将它绘制为“UIView 的大小”。

但是，通常，您希望在 View 中的不同坐标处实际绘制多个“框”。 (一个很好的例子是日历)。

此外，这个例子明确地绘制了“两条条纹”而不是在背景颜色上绘制一条条纹:

func simpleStripes(x: CGFloat, y: CGFloat, width: CGFloat, height: CGFloat) {
     
    let stripeWidth: CGFloat = 20.0 // whatever you want
    let m = stripeWidth / 2.0
    
    guard let c = UIGraphicsGetCurrentContext() else { return }
    c.setLineWidth(stripeWidth)
    
    let r = CGRect(x: x, y: y, width: width, height: height)
    let longerSide = width > height ? width : height
    
    c.saveGState()
    c.clip(to: r)
        
        var p = x - longerSide
        while p <= x + width {
            
            c.setStrokeColor(pale blue)
            c.move( to: CGPoint(x: p-m, y: y-m) )
            c.addLine( to: CGPoint(x: p+m+height, y: y+m+height) )
            c.strokePath()
            
            p += stripeWidth
            
            c.setStrokeColor(pale gray)
            c.move( to: CGPoint(x: p-m, y: y-m) )
            c.addLine( to: CGPoint(x: p+m+height, y: y+m+height) )
            c.strokePath()
            
            p += stripeWidth
        }
        
    c.restoreGState()
}