| A | B |
|---|---|
 |
 |
创建
UIScrollView子类，这将是最终贴纸、文字部分内容的显示区域。在UIScrollView中创建一个UIImageView作为T-shirt的背景图像显示。
1.创建一张与
UIScrollView子类大小相同的图像。
+ (UIImage *)imageWithColor:(UIColor *)color size:(CGSize)size {
CGRect rect = CGRectMake(0.0f, 0.0f, size.width, size.height); //宽高 1.0只要有值就够了
UIGraphicsBeginImageContext(rect.size); //在这个范围内开启一段上下文
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetFillColorWithColor(context, [color CGColor]);//在这段上下文中获取到颜色UIColor
CGContextFillRect(context, rect);//用这个颜色填充这个上下文
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();//从这段上下文中获取Image属性,,,结束
UIGraphicsEndImageContext();
return image;
}
2.将蒙版图像(上文中B图像)使用白色渲染一次(消除蒙版图片的灰度值)
+ (UIImage *)imageWithColor:(UIColor *)color original:(UIImage*)originalImage
{
UIGraphicsBeginImageContextWithOptions(originalImage.size, NO, originalImage.scale);
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextTranslateCTM(context, 0, originalImage.size.height);
CGContextScaleCTM(context, 1.0, -1.0);
CGContextSetBlendMode(context, kCGBlendModeNormal);
CGRect rect = CGRectMake(0, 0, originalImage.size.width, originalImage.size.height);
CGContextClipToMask(context, rect, originalImage.CGImage);
[color setFill];
CGContextFillRect(context, rect);
UIImage*newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return newImage;
}
3.背景图片透明区域填充颜色
+ (UIImage *)colorImage:(UIImage *)origImage withColor:(UIColor *)color
{
UIGraphicsBeginImageContextWithOptions(origImage.size, YES, 0);
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetFillColorWithColor(context, [color CGColor]);
CGContextFillRect(context, (CGRect){ {0,0}, origImage.size} );
CGAffineTransform flipVertical = CGAffineTransformMake(1, 0, 0, -1, 0, origImage.size.height);
CGContextConcatCTM(context, flipVertical);
CGContextDrawImage(context, (CGRect){ {0,0}, origImage.size }, [origImage CGImage]);
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return image;
}
4.使用新蒙版图与背景图进行蒙层操作 产出蒙层图片
+(UIImage*)maskImage:(UIImage *)image withMask:(UIImage *)maskImage
{
CGImageRef maskRef = maskImage.CGImage;
CGImageRef mask = CGImageMaskCreate(CGImageGetWidth(maskRef),
CGImageGetHeight(maskRef),
CGImageGetBitsPerComponent(maskRef),
CGImageGetBitsPerPixel(maskRef),
CGImageGetBytesPerRow(maskRef),
CGImageGetDataProvider(maskRef), NULL, false);
CGImageRef sourceImage = [image CGImage];
CGImageRef imageWithAlpha = sourceImage;
//add alpha channel for images that don't have one (ie GIF, JPEG, etc...)
//this however has a computational cost
if (CGImageGetAlphaInfo(sourceImage) == kCGImageAlphaNone) {
// imageWithAlpha = CopyImageAndAddAlphaChannel(sourceImage);
}
CGImageRef masked = CGImageCreateWithMask(imageWithAlpha, mask);
CGImageRelease(mask);
//release imageWithAlpha if it was created by CopyImageAndAddAlphaChannel
if (sourceImage != imageWithAlpha) {
CGImageRelease(imageWithAlpha);
}
UIImage* retImage = [UIImage imageWithCGImage:masked];
CGImageRelease(masked);
return retImage;
}
- 使用上下文
CGContextRef对象创建与背景图像(T-shirt)大小相同的全透明图像 - 使用白色渲染
蒙版图像 - 将
蒙版图像根据CGRect信息放入全透明图像的合适位置合成一张与背景图像(T-shirt)大小相同的新图像 - 将
背景图像(T-shirt)与上步中产出的新图像取交集，生成最终使用的蒙层图像 - 将
蒙层图像加载在背景图像(T-shirt)之上，因为蒙层图像边缘透明指定定区域透明，所以在视觉显示效果上，T-shirt还是以完整状态显示，在蒙层图像与背景图像(T-shirt)之间添加贴纸对象与文字对象时，就可以实现不规则蒙层遮挡。达到在指定区域绘制T-shirt的目的。 通过截面GIF看一下
