ios - 从几张图片中剖析ImageView

Question

我需要实现个人资料 imageView 以与一定数量的成员聊天。

它应该看起来像这样:

因此，根据成员的数量， ImageView 应拆分为适当的部分，其中应包含每个聊天成员的适当照片。

upd: 我找到了一些解决方案(见下文)并且有效，但有些图像被拉伸(stretch)了，因为它们的实际比例是 1:1。 如何按比例拉伸(stretch) UIImage(比例为 1:1)以适合矩形大小？

class ProfileImageHelper {

    class func collageImage (rect:CGRect, images:[UIImage]) -> UIImage {

        let maxImagesPerRow = 2
        let maxSide = rect.width / CGFloat(maxImagesPerRow)

        var index = 0
        var currentRow = 1
        var xtransform:CGFloat = 0.0
        let transformOffset:CGFloat = 1.5

        var ytransform:CGFloat = 0.0
        var smallRect:CGRect = CGRect.zero

        UIGraphicsBeginImageContextWithOptions(rect.size, false, 0.0)//UIScreen.main.scale)

        for img in images {

            index += 1

            let x = index % maxImagesPerRow //row should change when modulus is 0

            //row changes when modulus of counter returns zero @ maxImagesPerRow
            if x == 0 {
                //last column of current row
                //xtransform += CGFloat(maxSide)
                smallRect = CGRect(x: xtransform, y: ytransform, width: maxSide - transformOffset, height: (rect.size.height / CGFloat(currentRow)) - transformOffset)

                //reset for new row
                currentRow += 1
                xtransform = 0.0
                ytransform = (maxSide * CGFloat(currentRow - 1)) + transformOffset

            } else {
                //not a new row
                if xtransform == 0 {
                    //this is first column
                    //draw rect at 0,ytransform
                    smallRect = CGRect(x: xtransform, y: ytransform, width: maxSide - transformOffset, height: (rect.size.height / CGFloat(currentRow)) - transformOffset)
                    xtransform += CGFloat(maxSide) + transformOffset
                } else {
                    //not the first column so translate x, ytransform to be reset for new rows only
                    smallRect = CGRect(x: xtransform, y: ytransform, width: maxSide - transformOffset, height: (rect.size.height / CGFloat(currentRow)) - transformOffset)
                    xtransform += CGFloat(maxSide) + transformOffset
                }
            }

            //draw in rect
            img.draw(in: smallRect)

        }

        let outputImage = UIGraphicsGetImageFromCurrentImageContext();

        UIGraphicsEndImageContext();

        return outputImage!
    }
}

有什么建议吗？

Answer 1

下面的代码应该允许您将一个图像粘贴到另一个图像之上。您可以使用 x/y 位置相应地移动图像。然后，您可以将最终图像裁剪成圆形。

UIImage *backrgoundImage = [[UIImage alloc] init];
backrgoundImage = image1;

UIImage *foregroundImage = [[UIImage alloc] init];
foregroundImage = image2;

UIGraphicsBeginImageContextWithOptions(backrgoundImage.size, FALSE, 0.0);
[backrgoundImage drawInRect:CGRectMake( 0, 0, backrgoundImage.size.width, backrgoundImage.size.height)];
[foregroundImage drawInRect:CGRectMake(backrgoundImage.size.width/2, backrgoundImage.size.height/2, foregroundImage.size.width, foregroundImage.size.height)];
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(50, 50, 100, 100)];
[imageView setImage:newImage];

// Crop the final image to a circle
CALayer *imageLayer = imageView.layer;
[imageLayer setCornerRadius:imageView.frame.size.width/2];
[imageLayer setBorderWidth:1];
[imageLayer setMasksToBounds:YES];
imageLayer.borderColor = (__bridge CGColorRef _Nullable)([UIColor clearColor]);

[self.view addSubview:imageView];