23

我正在开发拼图类型的游戏，我有两个图像用于掩蔽，我已经实现了这个用于掩蔽的代码

- (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;
}

在此处输入图像描述

+

在此处输入图像描述

=

这是我屏蔽后得到的最终结果。

在此处输入图像描述

现在我想以参数方式裁剪图像在此处输入图像描述等在此处输入图像描述（通过透明度裁剪图像）。

如果有人已经实现了这样的代码或关于这个场景的任何想法，请分享。

谢谢。

我正在使用这行代码作为Guntis Treulands 的建议

int i=1;
    for (int x=0; x<=212; x+=106) {
        for (int y=0; y<318; y+=106) {
            CGRect rect = CGRectMake(x, y, 106, 106);
            CGRect rect2x = CGRectMake(x*2, y*2, 212, 212);

            UIImage *orgImg = [UIImage imageNamed:@"cat@2x.png"];
            UIImage *frmImg = [UIImage imageNamed:[NSString stringWithFormat:@"%d@2x.png",i]];
            UIImage *cropImg = [self cropImage:orgImg withRect:rect2x];

            UIImageView *tmpImg = [[UIImageView alloc] initWithFrame:rect];
            [tmpImg setUserInteractionEnabled:YES];
            [tmpImg setImage:[self maskImage:cropImg withMaskImage:frmImg]];

            [self.view addSubview:tmpImg];
            i++;
        }
    }

orgImg 是原始猫图像，frmImg 框架用于保存单个部件，在 photoshop 中蒙版，cropImg 是原始 cat@2x.png 的 106x106 裁剪图像。

我的裁剪功能如下

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

1 回答 1

17

更新 2

我真的很想找到更好的方法来创建拼图，所以我花了两个周末创建了一个拼图的演示项目。

它包含：

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

缺点：

  • 不检查一块是否在正确的位置
  • 如果超过 100 件 - 它开始滞后，因为在拾取一块时，它会遍历所有子视图，直到找到正确的一块。

更新

感谢您更新问题。

我设法得到了这个：

在此处输入图像描述

如您所见 - 拼图项目被正确裁剪，并且它在方形 imageView 中（绿色是 UIImageView backgroundColor）。

所以 - 我所做的是：

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 *)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;
}

以前的答案

你可以为每件准备一个面具吗？

例如，您有该帧图像。你能在 Photoshop 中将它剪切成 9 个单独的图像，在每个图像中它只会显示相应的部分。（所有其余的 - 删除）。

示例 - 第二片面膜：

在此处输入图像描述

然后，您在猫图像上使用这些新创建的蒙版图像中的每一个 - 每幅都将蒙版所有图像，但只有一个和平。因此，您将拥有使用 9 个不同蒙版的 9 张图像。

对于更大或不同的拼图框 - 再次创建单独的图像蒙版。

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

希望能帮助到你..

于 2012-06-01T07:16:10.307 回答