Question

我有一张大型Tilesheet（一张图片中超过1000张图片），如下所示：

每个图块都是64x64，我想分割图片。在这个例子中，我将是4个瓷砖并放入一个数组。我怎样才能做到这一点？不同大小？我需要一些魔法（数学）或更好的想法如何才能在循环中获得正确的位置。

一些快速编码的代码：

func cropImage(image: UIImage, tileSize: Int) -> [UIImage]? {
    if Int(image.size.height) % 64 != 0 && Int(image.size.width) % 64 != 0 {
        return nil
    }

    let hCount = Int(image.size.height) / tileSize
    let wCount = Int(image.size.width) / tileSize

    var tiles:[UIImage] = []

    for i in 0...hCount {
        for p in 0...wCount {
            let temp:CGImage = image.cgImage!.cropping(to: CGRect.zero)!
            tiles.append(UIImage(cgImage: temp))
        }
    }
    return tiles
}

Answer 1

在每次循环中，您需要两条信息：

瓷砖的尺寸是多少？所有瓷砖都是一样的;你只需要在循环之前计算一次。
瓷砖的来源是什么？每个瓷砖的情况都不同。您将循环遍历x计数和y计数，并且在最里面的循环中，您将根据图块大小计算此图块的原点（即使用此x和y）你已经知道了。

现在您知道要用于此磁贴的原始图像的确切矩形。其余的很简单。

但是，我建议您考虑一下裁剪到该矩阵的实际方式。您建议通过调用CGImage的cropping(to:)进行裁剪。但是，在类似的情况下，这不是我所做的。我通过将原始UIImage在所需原点的负片处绘制成所需大小的图像图形上下文来制作UIImage。

Answer 2

我为下一位读者制作了基于马特答案的代码：

cgi-bin

参数图像：图块（原始图像）

参数tileSize：图块大小（长度或宽度）

Answer 3

func splitImage(row : Int , column : Int){

    let oImg = userImage.image

    let height =  (userImage.image?.size.height)! /  CGFloat (row) //height of each image tile
    let width =  (userImage.image?.size.width)!  / CGFloat (column)  //width of each image tile

    let scale = (userImage.image?.scale)! //scale conversion factor is needed as UIImage make use of "points" whereas CGImage use pixels.

    imageArr = [[UIImage]]() // will contain small pieces of image
    for y in 0..<row{
        var yArr = [UIImage]()
        for x in 0..<column{

            UIGraphicsBeginImageContextWithOptions(
                CGSize(width:width, height:height),
                false, 0)
            let i =  oImg?.cgImage?.cropping(to:  CGRect.init(x: CGFloat(x) * width * scale, y:  CGFloat(y) * height * scale  , width: (width * scale) , height: (height * scale)) )

            let newImg = UIImage.init(cgImage: i!)

            yArr.append(newImg)

            UIGraphicsEndImageContext();
        }
        imageArr.append(yArr)
    }
}

在图块中拆分图片并放入数组

3 个答案: