一个小demo
如果我们要把图片也实现气泡效果的话,通常我们要写以下代码:
图片的裁剪和添加阴影，其实这并没有什么难度，但是通过实践发现很多实例代码都无法使用。以下代码是OK的
- (UIImage*) maskWithImage:(constUIImage*) maskImage {
constCGColorSpaceRefcolorSpace =CGColorSpaceCreateDeviceRGB();
constCGImageRefmaskImageRef = maskImage.CGImage;
constCGContextRefmainViewContentContext =CGBitmapContextCreate(NULL, maskImage.size.width, maskImage.size.height,8,0, colorSpace,kCGImageAlphaPremultipliedLast);
CGColorSpaceRelease(colorSpace);
if(! mainViewContentContext) {
returnnil;
}
CGFloatratio = maskImage.size.width/self.size.width;
if(ratio *self.size.height< maskImage.size.height) {
ratio = maskImage.size.height/self.size.height;
}
constCGRectmaskRect=CGRectMake(0,0, maskImage.size.width, maskImage.size.height);
constCGRectimageRect=CGRectMake(-((self.size.width* ratio) - maskImage.size.width) /2,
-((self.size.height* ratio) - maskImage.size.height) /2,
self.size.width* ratio,
self.size.height* ratio);
CGContextClipToMask(mainViewContentContext, maskRect, maskImageRef);
CGContextSetShadowWithColor(mainViewContentContext,CGSizeMake(0,0),1, [UIColorblackColor].CGColor);
CGContextDrawImage(mainViewContentContext, imageRect,self.CGImage);
CGImageRefnewImage =CGBitmapContextCreateImage(mainViewContentContext);
CGContextRelease(mainViewContentContext);
UIImage*theImage = [UIImageimageWithCGImage:newImage];
CGImageRelease(newImage);
return theImage;
}
这个方法有一个小问题CGContextSetShadowWithColor(mainViewContentContext,CGSizeMake(0,0),1, [UIColorblackColor].CGColor);设置的阴影还有些问题，阴影总是在某一侧不完整.这样的话还是不太友好.所以下面的代码才是简单又粗暴的解决方案:
- (void)drawRect:(CGRect)rect {
[super drawRect:rect];
// 获取要裁剪的图片
UIImage *tailorImage = [UIImage imageNamed:@"meinv"];
[tailorImage drawInRect:rect];
// 获取气泡图片
UIImage *buddleImage = [UIImage imageNamed:@"ReceiverTextNodeBkg"];
[buddleImage drawInRect:rect blendMode:kCGBlendModeDestinationIn alpha:1.0];
// 添加立体效果
self.layer.shadowOffset = CGSizeMake(1, 1);
self.layer.shadowOpacity = 1.0;
}
效果如下:
我们只需要一张气泡的图片就OK,然后通过这个方法就可以拿到任何图片的气泡形式了!
同时可以设置立体效果和阴影.
简单说一下图形混合模式:
在计算机上的内容是通过颜色来表示的 形状是通过透明度来表示的
Color:(R G B)向量 alpha:常量 向量的数乘
结果就是:颜色以相乘之前的颜色为主 形状以相乘以前的形状为主 这就是 图形混合模式 它是一个跨平台的一种模式
图形混合模式的核心就是: 上D 下S D:目标 S:来源 R:结果 R = Dc * Sa
通过 图形混合模式 来实现的图片裁剪.就是这么简单 粗暴........
以下是blendMode其他的一些设置属性
kCGBlendModeClear, /* R = 0 */
kCGBlendModeCopy, /* R = S */
kCGBlendModeSourceIn, /* R = S*Da */
kCGBlendModeSourceOut, /* R = S*(1 - Da) */
kCGBlendModeSourceAtop, /* R = S*Da + D*(1 - Sa) */
kCGBlendModeDestinationOver, /* R = S*(1 - Da) + D */
kCGBlendModeDestinationIn, /* R = D*Sa */
kCGBlendModeDestinationOut, /* R = D*(1 - Sa) */
kCGBlendModeDestinationAtop, /* R = S*(1 - Da) + D*Sa */
kCGBlendModeXOR, /* R = S*(1 - Da) + D*(1 - Sa) */
kCGBlendModePlusDarker, /* R = MAX(0, (1 - D) + (1 - S)) */
kCGBlendModePlusLighter
有兴趣的朋友可以一起探讨一下图形混合.
