掩盖两个图像

时间:2013-10-05 08:12:41

标签: ios objective-c image masking

我想在iOS中的两个图像之间进行选择性屏蔽,类似于Blender中的屏蔽功能。有两个图像1和2(调整大小到相同的尺寸)。最初只有图像1可见,但只要用户触摸图像1上的任何区域,它就会变得透明,图像2在这些区域中变得可见。

我使用带触摸移动的核心图形创建了一个类似蒙版的图像。它基本上是一个全黑的图像,无论我触摸到哪里都有白色部分。 alpha始终设置为1.0。我可以使用这个图像作为掩码,并通过实现我自己的图像处理方法来做必要的事情,这些方法将迭代每个像素,检查它并根据值设置。现在这个方法将在触摸移动内部调用,因此我的方法可能会减慢整个过程(特别是对于800万像素的摄像机图像)。

我想知道如何通过使用Quartz Core或Core Graphics来实现这一目标,而Quartz Core或Core Graphics的效率足以在大图像中运行。

到目前为止我的代码:

- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
    mouseSwiped = YES;

    UITouch *touch = [touches anyObject];
    CGPoint currentPoint = [touch locationInView:staticBG];

    UIGraphicsBeginImageContext(staticBG.frame.size);
    [maskView.image drawInRect:CGRectMake(0, 0, maskView.frame.size.width, maskView.frame.size.height)];

    CGContextSetLineCap(UIGraphicsGetCurrentContext(), kCGLineCapRound);
    CGContextSetLineWidth(UIGraphicsGetCurrentContext(), 20.0);
    CGContextSetRGBStrokeColor(UIGraphicsGetCurrentContext(), 1.0, 1.0, 1.0, 0.0);
    CGContextBeginPath(UIGraphicsGetCurrentContext());
    CGContextMoveToPoint(UIGraphicsGetCurrentContext(), lastPoint.x, lastPoint.y);
    CGContextAddLineToPoint(UIGraphicsGetCurrentContext(), currentPoint.x, currentPoint.y);
    CGContextStrokePath(UIGraphicsGetCurrentContext());

    maskView.image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    lastPoint = currentPoint;
    mouseMoved++;
    if (mouseMoved == 10)
        mouseMoved = 0;

    staticBG.image = [self maskImage:staticBG.image withMask:maskView.image];
    //maskView.hidden = NO;
}  

- (UIImage*) maskImage:(UIImage *)baseImage withMask:(UIImage *)maskImage
{
    CGImageRef imgRef = [baseImage CGImage];
    CGImageRef maskRef = [maskImage CGImage];
    CGImageRef actualMask = CGImageMaskCreate(CGImageGetWidth(maskRef),
                                          CGImageGetHeight(maskRef),
                                          CGImageGetBitsPerComponent(maskRef),
                                          CGImageGetBitsPerPixel(maskRef),
                                          CGImageGetBytesPerRow(maskRef),
                                          CGImageGetDataProvider(maskRef), NULL, false);
    CGImageRef masked = CGImageCreateWithMask(imgRef, actualMask);
    return [UIImage imageWithCGImage:masked];
}

maskImage方法不起作用,因为它根据alpha值创建遮罩图像。 我浏览了这个链接:Creating Mask from Path但我无法理解答案。

3 个答案:

答案 0 :(得分:0)

首先,我要提一些我希望你已经知道的事情。

  • 屏蔽仅通过获取alpha值来工作。
  • 在每次touchMove创建带有核心图形的图像是一个非常巨大的开销和你应该尽量避免或使用其他一些做事方式。
  • 尝试使用静态蒙版图像。

我建议你从倒置的角度来看待这个问题。

也就是说,为什么不将底部图像置于顶部和底部,而不是试图在顶部图像上打孔以试图查看底部。屏蔽底部图像,以便显示用户的触摸点覆盖特定部分的顶视图。 ?

我已经做了一个例子让你在这里得到一个想法> http://goo.gl/Zlu31T

祝你好运&如果有任何不清楚的话,请回复。我确实相信有更好的和优化的方式来做到这一点。 “_”

答案 1 :(得分:0)

由于你是在实时做这个,我建议你在编辑时伪造它,如果你以后需要输出图像,你可以将它掩盖为真实的,因为它可能需要一些时间(不多,只是没有足够快的实时做到这一点)。通过伪造,我的意思是将image1作为背景,并在其上面放置隐藏的图像2。用户触摸该点后,将image2 UIImageView的边界设置为 CGRect rect= CGRectMake(touch.x - desiredRect.size.width/2, touch.y - desiredRect.size.height/2, desiredRect.size.width, desiredRect.size.height); 并使其可见。 desiredRect将是您要显示的image2的一部分。抬起手指后,您可以隐藏image2 UIImageView,使image1完全可见。如果你的目标不是在那个时刻输出图像,这是我现在能想到的最快的方式。

答案 2 :(得分:0)

使用此代码有助于屏蔽两个UIImages

CGSize newSize = CGSizeMake(320, 377);
                UIGraphicsBeginImageContext( newSize );

            // Use existing opacity as is
            [ backGroundImageView.image drawInRect:CGRectMake(0,0,newSize.width,newSize.height)];
            // Apply supplied opacity
            [self.drawImage.image drawInRect:CGRectMake(0,0,newSize.width,newSize.height) blendMode:kCGBlendModeNormal alpha:0.8];

            UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();

            UIGraphicsEndImageContext();

            imageData = UIImagePNGRepresentation(newImage);