如何在尊重图像的 alpha 蒙版的同时在 UIImage 上绘制形状 [英] How to draw a shape on top of a UIImage while respecting the image's alpha mask

问题描述

我需要一个可以根据标志以彩色或黑白方式绘制自身的 UIImageView:

I need a UIImageView that can draw itself in color or b/w according to a flag:

  BOOL isGrey;

我正在尝试通过在原始图像上绘制一个黑色矩形来实现，并将 Quartz 混合模式设置为 Color.这有效，但它不尊重图像的 alpha 蒙版.

I'm trying to do it by drawing a black rectangle on top of the original image with the Quartz blendmode set to Color. This works except it doesn't respect the image's alpha mask.

参见插图:替代文字 http://img214.imageshack.us/img214/1407/converttogreyscaleillo.png

搜索 Google 和 SO，我找到并尝试了几种解决方案，但也没有一个尊重面具.

Searching Google and SO, I found and tried several solutions but none respect the mask either.

这是生成上面我得到的"图像的代码:

Here is the code that produces the 'What I get' image above:

 - (void)drawRect:(CGRect)rect {

    if (isGrey) {
        CGContextRef context = UIGraphicsGetCurrentContext();

        // flip orientation
        CGContextTranslateCTM(context, 0, self.bounds.size.height);
        CGContextScaleCTM(context, 1.0, -1.0);

        // draw the image
        CGContextDrawImage(context, self.bounds, self.image.CGImage);

        // set the blend mode and draw rectangle on top of image
        CGContextSetBlendMode(context, kCGBlendModeSaturation);
        CGContextSetRGBFillColor(context, 0.0, 0.0, 0.0, 1.0);
        CGContextFillRect(context, rect);       
    } else {
        [self.image drawInRect:rect];
    }
}

是否有一些我忘记设置的 Quartz 绘图模式?我已经查看了 Quartz Programming Guide，但很难从重叠和超链接的主题中提取您需要的一点信息.

Is there some Quartz drawing mode that I'm forgetting to set? I've looked thru the Quartz Programming Guide but is so hard to extract the one bit of info you need from the overlapping and hyperlinked subjects.

显然，我正在寻找一种通用解决方案，该解决方案将适用于任何蒙版形状的图像，而不仅仅是显示的圆圈.

推荐答案

要在尊重图像的 alpha 蒙版的情况下绘制形状，只需在绘制前添加一行:

To draw a shape while respecting an image's alpha mask, just add one line before you draw:

 CGContextClipToMask(context, self.bounds, image.CGImage);

 // example usage
  - (void)drawRect:(CGRect)rect {

    if (isGrey) {
            CGContextRef context = UIGraphicsGetCurrentContext();

            // flip orientation
            CGContextTranslateCTM(context, 0.0, self.bounds.size.height);
            CGContextScaleCTM(context, 1.0, -1.0);

            // draw the image
            CGContextDrawImage(context, self.bounds, self.image.CGImage);

            // set the blend mode and draw rectangle on top of image
            CGContextSetBlendMode(context, kCGBlendModeColor);
            CGContextClipToMask(context, self.bounds, image.CGImage); // respect alpha mask
            CGContextSetRGBFillColor(context, 0.0, 0.0, 0.0, 1.0);
            CGContextFillRect(context, rect);               
    } else {
            [self.image drawInRect:rect];
    }

}

这篇关于如何在尊重图像的 alpha 蒙版的同时在 UIImage 上绘制形状的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！