JigSaw拼图uiimage不规则裁剪

Question

正在为iphone开发拼图游戏。

这里使用遮蔽技术我将图像裁剪成9个peices。见下图。

裁剪后，由于屏蔽，某些部分图像丢失。我知道这可以在方形uiimageview中加载那些裁剪的图像。

我的问题是如何将其作为完整的裁剪图像，而不会丢失图像的任何部分，以及如何正确地将这些部分与原始部分相匹配。

Answer 1

构建一组与每个拼图相对应的面具。每个蒙版应该是原始图像的大小，并且除了具有拼图块的位置和形状的白色区域之外全黑。此外，为每个部分维护一个边界矩形（一个最小程度包含遮罩图像中的部分的矩形）。

不丢失任何原始图像的方法是将蒙版（和相应的边界法词）排列为图像上的partition。

Here's a link到一些演示如何应用掩码的代码。应用蒙版后，使用here等代码将蒙版图像裁剪到边界矩形。

Answer 2

我也在考虑将原始图像与屏蔽分开，但对我们来说可能不是一个好主意，也很难管理它。因此，对于拼图游戏的初学者，则为This is the best question/answer 而且你也可以得到source code of jigsaw puzzle game from git.

请帮助解决您问题的 （@“Guntis Treulands”） 。我知道这应该不是一个答案，但应该是评论，但如果我将其作为评论，那么可能是拼图游戏有问题的用户，他/她不能轻易找到它。我把它作为答案。

Answer 3

//Create our colorspaces
imageColorSpace = CGColorSpaceCreateDeviceRGB();
maskColorSpace = CGColorSpaceCreateDeviceGray();
provider=CGDataProviderCreateWithCFData((__bridge CFDataRef)self.puzzleData);
image=CGImageCreateWithPNGDataProvider(provider, NULL, true, kCGRenderingIntentDefault);
CGDataProviderRelease(provider);

//Resize the puzzle image
context = CGBitmapContextCreate(NULL, kPuzzleSize, kPuzzleSize, 8, 0, imageColorSpace, kCGImageAlphaPremultipliedFirst);
CGContextDrawImage(context, CGRectMake(0, 0, kPuzzleSize, kPuzzleSize), image);
CGImageRelease(image);
image = CGBitmapContextCreateImage(context);
CGContextRelease(context);

//Create the image view with the puzzle image
self.imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, kPuzzleSize, kPuzzleSize)];
[self.imageView setImage:[UIImage imageWithCGImage:image]];

//Create the puzzle pieces (note that pieces are rotated to the puzzle orientation in order to minimize the number of graphic operations when creating the puzzle images)
for(i = 0; i < appDelegate().puzzleSize * appDelegate().puzzleSize; ++i)
{
    //Recreate the piece view
    [pieces[i] removeFromSuperview];
    pieces[i] = [[CJPieceView alloc] initWithFrame:CGRectMake(0, 0, kPieceSize, kPieceSize) index:i];
    [pieces[i] setTag:-1];

    //Load puzzle piece mask image
    UIImage *maskimage=[self.arrmaskImages objectAtIndex:i];
    NSData *dataMaskImage=UIImagePNGRepresentation(maskimage);

    provider=CGDataProviderCreateWithCFData((__bridge CFDataRef)dataMaskImage);
    tile = CGImageCreateWithPNGDataProvider(provider, NULL, true, kCGRenderingIntentDefault);
    CGDataProviderRelease(provider);
    mask = CGImageCreateCopyWithColorSpace(tile, maskColorSpace);
    CGImageRelease(tile);

    context = CGBitmapContextCreate(NULL, kPieceSize / kPieceShadowFactor, kPieceSize / kPieceShadowFactor, 8, 0, imageColorSpace, kCGImageAlphaPremultipliedFirst);
    CGContextClipToMask(context, CGRectMake(0, 0, kPieceSize / kPieceShadowFactor, kPieceSize / kPieceShadowFactor), mask);
    CGContextSetRGBFillColor(context, 0.0, 0.0, 0.0, 1.0);
    CGContextFillRect(context, CGRectMake(0, 0, kPieceSize / kPieceShadowFactor, kPieceSize / kPieceShadowFactor));
    shadow = CGBitmapContextCreateImage(context);
    CGContextRelease(context);
    imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, kPieceSize, kPieceSize)];
    [imageView setImage:[UIImage imageWithCGImage:shadow]];
    [imageView setAlpha:kPieceShadowOpacity];
    [imageView setUserInteractionEnabled:NO];
    [pieces[i] addSubview:imageView];
    CGImageRelease(shadow);

    //Create image view with piece image and add it to the piece view
    context = CGBitmapContextCreate(NULL, kPieceSize, kPieceSize, 8, 0, imageColorSpace, kCGImageAlphaPremultipliedFirst);
    CGRect rectPiece= CGRectMake(fmodf(i, appDelegate().puzzleSize) * kPieceDistance, (floorf(i / appDelegate().puzzleSize)) * kPieceDistance, kPieceSize, kPieceSize);
    [self.arrlocations addObject:[NSValue valueWithCGRect:rectPiece]];
    CGContextTranslateCTM(context, (kPieceSize - kPieceDistance) / 2 - fmodf(i, appDelegate().puzzleSize) * kPieceDistance, (kPieceSize - kPieceDistance) / 2 - (appDelegate().puzzleSize - 1 - floorf(i / appDelegate().puzzleSize)) * kPieceDistance);        
    CGContextDrawImage(context, CGRectMake(0, 0, CGImageGetWidth(image), CGImageGetHeight(image)), image);
    subImage = CGBitmapContextCreateImage(context);     
    CGContextRelease(context); 
    tile = CGImageCreateWithMask(subImage, mask);
    imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, kPieceSize, kPieceSize)];
    [imageView setImage:[UIImage imageWithCGImage:tile]];
    [imageView setUserInteractionEnabled:NO];
    [pieces[i] addSubview:imageView];
    CGImageRelease(tile);
    CGImageRelease(subImage);
    DLog(@"%f", pieces[i].frame.size.width);
    pieces[i].transform=CGAffineTransformScale(CGAffineTransformIdentity, kTransformScale, kTransformScale);
    DLog(@"%f %f",kTransformScale, pieces[i].frame.size.width);
    //Release puzzle piece mask;
    CGImageRelease(mask);

}

//Clean up
CGColorSpaceRelease(maskColorSpace);
CGColorSpaceRelease(imageColorSpace);
CGImageRelease(image);