在iPhone中使用透明剪裁图像

我在做拼图游戏，我有两张图片用来遮罩， 我已经为屏蔽实现了这段代码

- (UIImage*) maskImage:(UIImage *)image withMaskImage:(UIImage*)maskImage {

    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    CGImageRef maskImageRef = [maskImage CGImage];

    CGContextRef mainViewContentContext = CGBitmapContextCreate (NULL, maskImage.size.width, maskImage.size.height, 8, 0, colorSpace, kCGImageAlphaPremultipliedLast);

    if (mainViewContentContext==NULL)
        return NULL;

    CGFloat ratio = 0;
    ratio = maskImage.size.width/ image.size.width;
    if(ratio * image.size.height < maskImage.size.height) {
        ratio = maskImage.size.height/ image.size.height;
    } 

    CGRect rect1 = {{0, 0}, {maskImage.size.width, maskImage.size.height}};
    CGRect rect2  = {{-((image.size.width*ratio)-maskImage.size.width)/2,-((image.size.height*ratio)-maskImage.size.height)/2},{image.size.width*ratio, image.size.height*ratio}};

    CGContextClipToMask(mainViewContentContext, rect1, maskImageRef);
    CGContextDrawImage(mainViewContentContext, rect2, image.CGImage);

    CGImageRef newImage = CGBitmapContextCreateImage(mainViewContentContext);
    CGContextRelease(mainViewContentContext);

    UIImage *theImage = [UIImage imageWithCGImage:newImage];
    CGImageRelease(newImage);
    return theImage;
}

---

更新2

我变得非常好奇，想找到一种更好的方法来制作拼图，所以我花了两个周末，制作了一个拼图的演示项目

它包括：

• 提供列/行计数，它将生成具有正确宽度/高度的必要拼图块。列/行越多-宽度/高度和轮廓/内联拼图形式越小
• 每次随机生成边
• 可在发射开始时随机定位/旋转工件
• 每个部件都可以通过轻敲或两个手指旋转（就像一个真正的部件一样），但一旦松开，它将捕捉到90/180/270/360度
• 如果在其“可触摸形状”边界上进行触摸，则每一块都可以移动（该边界大部分是相同的可见拼图形状，但没有内联形状）

缺点：

• 不检查工件是否在正确的位置
• 如果超过100个片段-它开始延迟，因为当拾取一个片段时，它会遍历所有子视图，直到找到正确的片段

更新

谢谢更新的问题

我设法做到了：

如您所见-jigsaw项目被正确裁剪，并且它位于方形imageView（绿色为UIImageView背景色）。

所以，我所做的是：

CGRect rect = CGRectMake(105, 0, 170, 170); //~ location on cat image where second Jigsaw item will be.

UIImage *originalCatImage = [UIImage imageNamed:@"cat.png"];//original cat image

UIImage *jigSawItemMask = [UIImage imageNamed:@"JigsawItemNo2.png"];//second jigsaw item mask (visible in my answer) (same width/height as cat image.)

UIImage *fullJigSawItemImage = [jigSawItemMask maskImage:originalCatImage];//masking - so that from full cat image would be visible second jigsaw item

UIImage *croppedJigSawItemImage = [self fullJigSawItemImage withRect:rect];//cropping so that we would get small image with jigsaw item centered in it.

对于图像掩蔽，我使用UIImage类别函数：（但您可能可以使用掩蔽函数。但我将以任何方式发布它。）

-（UIImage*）maskImage:（UIImage*）图像
{     
CGColorSpaceRef colorSpace=CGColorSpaceCreateDeviceRGB（）；
UIImage*maskImage=self；
CGImageRef MASKIMAGEF=[maskImage CGImage]；
//根据图像大小创建位图图形上下文
CGContextRef mainViewContentContext=CGBitmapContextCreate（NULL，maskImage.size.width，maskImage.size.height，8,0，颜色空间，kcGimageAlphaPremultipledLast）；
if（mainViewContentContext==NULL）
返回NULL；
现金流量比率=0；
比率=maskImage.size.width/image.size.width；
if（比率*image.size.height

先前的答案

你能为每一块准备一个面具吗

例如，您拥有该帧图像。你能在photoshop中将它剪切成9张单独的图片吗？在每张图片中，它只会显示相应的部分。（其余全部-删除）

示例-第二块遮罩：

然后在cat图像上使用这些新创建的遮罩图像中的每一个-每一块都将遮罩所有图像，但只有一个和平。因此，您将使用9个不同的遮罩获得9幅图像

对于较大或不同的拼图框，再次创建单独的图像遮罩

这是一个基本的解决方案，但并不完美，因为你需要分别准备每个和平面具

---

希望能有帮助

我认为最好的方法是屏蔽每一张图片，然后为每一张新图片创建一张新图片。@Simon:这就是我关心的问题，我如何通过透明度将图像裁剪成碎片。@iCoder86:您找到裁剪图像的解决方案了吗？我也受不了了。如果你的代码能正常工作，你能分享一下吗？@Harshal很抱歉，我在这之后没有做更多的工作，一旦我解决了它，我一定会更新我的帖子。@iCoder86:它现在对我有效。但当我将UIPanGesture应用于它时，新的问题出现了。被裁剪的部分不会得到给定形状的平移，而是矩形。树状体：我已经实现了你建议的，但它有相同的裁剪问题。请看这里的图片，它是树状体。如果很难重写-复制。但无论如何，您的示例看起来像是方形的ImageView，并且图像被裁剪以适合方形。是否可能（如果您尚未尝试过）-imageView.contentMode=UIViewContentModeScaleAspectFit？你显然设置了错误的高度和宽度，你能提供你的代码吗？@GuntisTreulands:谢谢你的时间和帮助，我会测试它并让你知道…@GuntisTreulands:嗨！这是实现+1的一个好主意，但不能解决我的问题。无论如何，谢谢你抽出时间。。

- (UIImage *) cropImage:(UIImage*)originalImage withRect:(CGRect)rect { 
    return [UIImage imageWithCGImage:CGImageCreateWithImageInRect([originalImage CGImage], rect)]; 
}

CGRect rect = CGRectMake(105, 0, 170, 170); //~ location on cat image where second Jigsaw item will be.

UIImage *originalCatImage = [UIImage imageNamed:@"cat.png"];//original cat image

UIImage *jigSawItemMask = [UIImage imageNamed:@"JigsawItemNo2.png"];//second jigsaw item mask (visible in my answer) (same width/height as cat image.)

UIImage *fullJigSawItemImage = [jigSawItemMask maskImage:originalCatImage];//masking - so that from full cat image would be visible second jigsaw item

UIImage *croppedJigSawItemImage = [self fullJigSawItemImage withRect:rect];//cropping so that we would get small image with jigsaw item centered in it.

- (UIImage*) maskImage:(UIImage *)image  
{     
     CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();

     UIImage *maskImage = self;
     CGImageRef maskImageRef = [maskImage CGImage];

     // create a bitmap graphics context the size of the image
     CGContextRef mainViewContentContext = CGBitmapContextCreate (NULL, maskImage.size.width, maskImage.size.height, 8, 0, colorSpace, kCGImageAlphaPremultipliedLast);


     if (mainViewContentContext==NULL)
          return NULL;

     CGFloat ratio = 0;

     ratio = maskImage.size.width/ image.size.width;

     if(ratio * image.size.height < maskImage.size.height) {
          ratio = maskImage.size.height/ image.size.height;
     } 

     CGRect rect1  = {{0, 0}, {maskImage.size.width, maskImage.size.height}};
     CGRect rect2  = {{-((image.size.width*ratio)-maskImage.size.width)/2 , -((image.size.height*ratio)-maskImage.size.height)/2}, {image.size.width*ratio, image.size.height*ratio}};


     CGContextClipToMask(mainViewContentContext, rect1, maskImageRef);
     CGContextDrawImage(mainViewContentContext, rect2, image.CGImage);


     // Create CGImageRef of the main view bitmap content, and then
     // release that bitmap context
     CGImageRef newImage = CGBitmapContextCreateImage(mainViewContentContext);
     CGContextRelease(mainViewContentContext);

     UIImage *theImage = [UIImage imageWithCGImage:newImage];

     CGImageRelease(newImage);

     // return the image
     return theImage;
}