先看效果
t-shirt.gif
思路
1.以下图像按顺序称为A(背景图像)、B(蒙版图像)两个图像。
| A | B |
|---|---|
 timg.png
|
 make.png
|
2.将B图像按照合适的位置及大小，放在A图像之上，结果如下
c.png
3.取两个图像的交集部分
s.png
4.将交集部分颜色改为透明。形成一张根据B图像形状信息改变A图像相应颜色通道信息的新图像。
代码片段：
创建
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的目的。
完成代码示例
CGSize groundSize = CGSizeMake(self.view.frame.size.width, self.view.frame.size.width);
// 1.创建最大宽度透明图片
UIImage * alphaImage = [UIImage imageWithColor:[UIColor clearColor] size:groundSize];
// 2.获取蒙版图片 并且使用白色渲染蒙版图片 (使用白色渲染是为了消除蒙版图片的灰度值)
UIImage * masksImage = [UIImage imageWithColor:[UIColor whiteColor] original:[UIImage imageNamed:@"make"]];
// 3.将第二步中的图片与第三部中的图片进行合并
UIImage *ZImage = [UIImage drawMaskImage:groundSize maskFrame:CGRectMake(110, 80, 190,320) alphaImage:alphaImage maskImage:masksImage];
// 4.背景图片透明区域填充颜色
self.supportView.imageView.image = [UIImage colorImage:self.supportView.imageView.image withColor:[UIColor whiteColor]];
// 5.使用新蒙版图与背景图进行蒙层操作 产出蒙层图片
UIImage *maskedImage = [UIImage maskImage:[UIImage imageWithUIView:self.supportView.imageView] withMask:ZImage];
// 6.使用蒙层图片
[self.bringView setImage:maskedImage];
通过截面GIF看一下
section.gif
通过PS制作一张中间透明的T-shirt的图片放在背景T-shirt之上也能达到相同的效果，至于我为什么这么做，额...
假设一件T-shirt有10种颜色，每种颜色都要P一次...
贴纸与文字
贴纸、文字都是UIView子类。控制图像的旋转缩放都是基于CGAffineTransform属性与手势UIPanGestureRecognizer进行调整。
核心代码如下:
- (void)circleViewDidPan:(UIPanGestureRecognizer*)sender
{
CGPoint p = [sender translationInView:self.superview];
static CGFloat tmpR = 1;
static CGFloat tmpA = 0;
if(sender.state == UIGestureRecognizerStateBegan)
{
_initialPoint = [self.superview convertPoint:_circleView.center fromView:_circleView.superview];
CGPoint p = CGPointMake(_initialPoint.x - self.center.x, _initialPoint.y - self.center.y);
tmpR = sqrt(p.x*p.x + p.y*p.y);
tmpA = atan2(p.y, p.x);
_initialArg = _arg;
_initialScale = _scale;
}
p = CGPointMake(_initialPoint.x + p.x - self.center.x, _initialPoint.y + p.y - self.center.y);
CGFloat R = sqrt(p.x*p.x + p.y*p.y);
CGFloat arg = atan2(p.y, p.x);
_arg = _initialArg + arg - tmpA;
[self setScale:MIN(_initialScale * R / tmpR, 10)];
}
- (void)setScale:(CGFloat)scale
{
[self setScale:scale andScaleY:scale];
}
- (void)setScale:(CGFloat)scaleX andScaleY:(CGFloat)scaleY
{
_scale = MIN(scaleX, scaleY);
self.transform = CGAffineTransformIdentity;
_imageView.transform = CGAffineTransformMakeScale(scaleX, scaleY);
CGRect rct = self.frame;
rct.origin.x += (rct.size.width - (_imageView.width)) / 2 - 5;
rct.origin.y += (rct.size.height - (_imageView.height)) / 2 - 5;
rct.size.width = _imageView.width+10;
rct.size.height = _imageView.height+10;
self.frame = rct;
_imageView.center = CGPointMake(rct.size.width/2, rct.size.height/2);
self.transform = CGAffineTransformMakeRotation(_arg);
_imageView.layer.borderWidth = 1/_scale;
}
