在UIImageView上绘制以使图像透明 [英] Drawing on top of UIImageView to make the image transparent

问题描述

我正在开发一个iPhone应用程序，其中当用户在图像上四处移动时，我需要通过将其alpha级别设置为0来使图像的一部分透明.基本上，如果您碰巧知道应用商店应用程序iSteam，则用户应该可以在顶部图像上移动手指，这将使背景图像透明.

I am working on one iPhone App wherein I need to make a portion of the image transparent by setting its alpha level to 0 as the user moves around his finger on the image. Basically if you happen to know the app store application iSteam, user should be able to move his finger around on a top image which will make the background image transparent.

目前，我正在使用两个UIImageView.一个保留背景图像，另一个保留在背景图像之上，保留较暗的图像.现在，用户应该能够在此较暗的图像上绘制随机曲线，这将使背景图像的一部分显示在顶部.我无法弄清楚应该如何使两个UIImageView中最顶部的顶部图像保持透明.

Currently I am using two UIImageView. One that holds the background image and the other on top of it which holds a darker image. Now user should be able to draw random curves on this darker image which will make the part of the background image appear on top. I am not able to figure out how should go about making the top image transparent which the top most of two UIImageView holds.

对此有任何想法吗?另外我应该怎么用呢?石英或Open GL.我是iPhone App开发人员的新手，对这些API完全不了解，因此专家的一些指导一定会帮助我成功进行iPhone SDK开发.

Any idea on this? Also what should I use for this? Quartz or Open GL. I am a newbie to the iPhone App Dev and have absolutely no idea about these APIs so some guidance from the experts will surely help me getting ahead with iPhone SDK Development.

推荐答案

UIImageView具有一层，您可以将其称为layer，并在将项目链接到QuartzCore时可以与之交谈.当用户移动手指时，在与UIImageView大小相同的不透明颜色填充的图形上下文中剪切清晰的形状，将其转换为CGImageRef，将其设置为CALayer的contents(同样，该CALayer必须相同大小作为UIImageView)，并将该层设置为UIImageView的layer.mask.无论遮罩是否清晰，它都会在图层上打一个透明孔，即表示视图，即表示UIImageView所显示的图像. (如果那样行不通，因为UIImageView不喜欢您干扰其图层，则可以改用UIImageView的超级视图.)

The UIImageView has a layer which you can refer to as its layer and talk to when you've linked your project to QuartzCore. As the user moves a finger, clip a clear shape in an opaque-color-filled graphics context the same size as the UIImageView, turn that into a CGImageRef, set that as a CALayer's contents (again this CALayer needs to be the same size as the UIImageView), and set that layer as the UIImageView's layer.mask. Wherever the mask is clear, that punches a transparent hole in the layer, which means the view, which means the image the UIImageView is showing. (If that doesn't work, because the UIImageView doesn't like your interfering with its layer, you can use a superview of the UIImageView instead.)

编辑(第二天)-这是在中央打圆孔的图层代表的示例代码:

EDIT (next day) - Here's sample code for a layer's delegate that punches a circular hole in the center:

-(void)drawLayer:(CALayer *)layer inContext:(CGContextRef)c {
    CGRect r = CGContextGetClipBoundingBox(c);
    CGRect r2 = CGRectInset(r, r.size.width/2.0 - 10, r.size.height/2.0 - 10);

    UIImage* maskim;
    {
        UIGraphicsBeginImageContextWithOptions(r.size, NO, 0);
        CGContextRef c = UIGraphicsGetCurrentContext();
        CGContextAddEllipseInRect(c, r2);
        CGContextAddRect(c, r);
        CGContextEOClip(c);
        CGContextSetFillColorWithColor(c, [UIColor blackColor].CGColor);
        CGContextFillRect(c, r);
        maskim = UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsEndImageContext();
    }

    CALayer* mask = [CALayer layer];
    mask.frame = r;
    mask.contents = (id)maskim.CGImage;
    layer.mask = mask;
}

因此，如果该层是视图的层，并且如果UIImageView是该视图的子视图，则在UIImageView中打一个孔.

So, if that layer is a view's layer, and if the UIImageView is that view's subview, a hole is punched in the UIImageView.

以下是结果的屏幕截图:

Here's a screen shot of the result:

这篇关于在UIImageView上绘制以使图像透明的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！