普通版本完成的锯齿很严重
但是Ios系统中仅CGContextClearRect 并不存在cyclo等方法。
网上查了一些资料。
发现还是利用到了CG 中的Mask来实现
效果图:
这种效果可以自定义画笔的粗细等相关设置,不会像普通模式中出现比较严重的锯齿。
具体分析如下:
1.获取需要隐藏View的layer的CGImageRef用于后面配合掩码
2.开辟符合1的CGImageRef的CFMutableDataRef空间 给下面的掩码BitmapContext使用
3.通过CFMutableDataRef获得CGDataProviderRef (maskCreate用到)
3.BitmapContextCreate
4.BitmapContext填充黑色 并且设置画笔相关(白色,宽度,线帽(cap))
5.CGImageMaskCreate 将CGDataProviderRef 传入 则得到CGImageRef指向的是刚才创建BitmapContext。改变BitmapContext 则此CGImageRef内容也会改变
6.CGImageCreateWithMask - 通过Mask的CGImageRef创建CGImageRef 此CGImageRef随 Maskde CGImageRef变化(所以 BitmapContext改变 Mask改变 mask掩码后的CGImageRef改变)
7.释放
8.手指触摸时,根据上一个CGPoint 和此次的CGPoint 给bitmapContext新增path 并且绘制。然后调用【self setNeedsDisplay】,在重绘中(-drawRect) 重新获取通过mask后的CGImageRef 获取最新的UIImage
9.将最新的UIImage drawRect到界面
代码:
//
// PLLScrathView.h
// PLLScratchViewDemo
//
// Created by liu poolo on 14-7-31.
// Copyright (c) 2014年 liu poolo. All rights reserved.
//
#import <UIKit/UIKit.h>
#import <QuartzCore/QuartzCore.h>
@interface PLLScratchView : UIView
@property (nonatomic,assign) float sizeBrush;
-(void)setHideView:(UIView*) hideView;
@end
//
// PLLScrathView.m
// PLLScratchViewDemo
//
// Created by liu poolo on 14-7-31.
// Copyright (c) 2014年 liu poolo. All rights reserved.
//
#import "PLLScratchView.h"
@interface PLLScratchView(){
CGContextRef _contextMask;//maskContext 用户touch 改变的context
CGImageRef _scratchCGImg;//CGimageRef 封装_contextMask 图片信息 _contextMask改变 跟着改变 直到 调用生成UIImage
CGPoint currPonit;
CGPoint prePoint;
}
@end
@implementation PLLScratchView
@synthesize sizeBrush;
- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
[self setOpaque:NO];
//设置透明 如果不透明就没法看到下一层了
self.sizeBrush=10.0f;
}
return self;
}
- (void)drawRect:(CGRect)rect
{
[super drawRect:rect];
UIImage* imageToDraw=[UIImage imageWithCGImage:_scratchCGImg];
[imageToDraw drawInRect:self.frame];
}
//setSizeBrush before setHideView
-(void)setHideView:(UIView*) hideView{
CGColorSpaceRef colorSpace=CGColorSpaceCreateDeviceGray();
CGFloat scale = [UIScreen mainScreen].scale;
//获得当前传入View的CGImage
UIGraphicsBeginImageContextWithOptions(hideView.bounds.size, NO, 0);
hideView.layer.contentsScale=scale;
[hideView.layer renderInContext:UIGraphicsGetCurrentContext()];
CGImageRef hideCGImg=UIGraphicsGetImageFromCurrentImageContext().CGImage;
UIGraphicsEndImageContext();
//绘制Bitmap掩码
size_t width=CGImageGetWidth(hideCGImg);
size_t height=CGImageGetHeight(hideCGImg);
CFMutableDataRef pixels;
pixels=CFDataCreateMutable(NULL, width*height);
//创建一个可变的dataRef 用于bitmap存储记录
_contextMask = CGBitmapContextCreate(CFDataGetMutableBytePtr(pixels), width, height , 8, width, colorSpace, kCGImageAlphaNone);
//数据提供者
CGDataProviderRef dataProvider=CGDataProviderCreateWithCFData(pixels);
//填充黑色背景 mask中黑色范围为显示内容 白色为不显示
CGContextSetFillColorWithColor(_contextMask, [UIColor blackColor].CGColor);
CGContextFillRect(_contextMask, self.frame);
CGContextSetStrokeColorWithColor(_contextMask, [UIColor whiteColor].CGColor);
CGContextSetLineWidth(_contextMask, self.sizeBrush);
CGContextSetLineCap(_contextMask, kCGLineCapRound);
CGImageRef mask=CGImageMaskCreate(width, height, 8, 8, width, dataProvider, nil, NO);
_scratchCGImg=CGImageCreateWithMask(hideCGImg, mask);
CGImageRelease(mask);
CGColorSpaceRelease(colorSpace);
}
-(void)scratchViewFrom:(CGPoint)startPoint toEnd:(CGPoint)endPoint{
float scale=[UIScreen mainScreen].scale;
//CG的Y与UI的是反的 UI的y0在左上角 CG在左下
CGContextMoveToPoint(_contextMask, startPoint.x*scale, (self.frame.size.height-startPoint.y)*scale);
CGContextAddLineToPoint(_contextMask, endPoint.x*scale,(self.frame.size.height-endPoint.y)*scale);
CGContextStrokePath(_contextMask);
[self setNeedsDisplay];
}
-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{
[super touchesBegan:touches withEvent:event];
}
-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event{
[super touchesMoved:touches withEvent:event];
UITouch *touch=[touches anyObject];
currPonit=[touch locationInView:self];
prePoint=[touch previousLocationInView:self];
[self scratchViewFrom:prePoint toEnd:currPonit];
}
-(void)toucheseEnd:(NSSet *)touches withEvent:(UIEvent *)event{
[super touchesEnded:touches withEvent:event];
UITouch *touch=[touches anyObject];
currPonit=[touch locationInView:self];
prePoint=[touch previousLocationInView:self];
[self scratchViewFrom:prePoint toEnd:currPonit];
}
-(void)touchesCancelled:(NSSet *)touches withEvent:(UIEvent *)event{
[super touchesCancelled:touches withEvent:event];
}
@end
- 浏览: 426831 次
- 性别:
- 来自: 深圳/湛江
文章分类
最新评论
-
wangyudong:
很多API doc生成工具生成doc需要重度依赖代码里加注解的 ...
[ios]利用xcode自动生成项目文档 -
tiger1819:
有源码么,想学习
[android]仿360状态,类流量监控桌面浮动显示 -
119568242:
借我一双翅膀 写道大哥,求指教啊?
IOS 开发,调用打电话,发短信,打开网址 -
借我一双翅膀:
大哥,求指教啊
IOS 开发,调用打电话,发短信,打开网址 -
li247276297:
楼主 是不是要加个权限?
[android]仿360状态,类流量监控桌面浮动显示
发表评论
-
[转]使用CGContextDrawImage绘制图片上下颠倒
2014-08-03 23:39 8389转自:http://www.bennychen.cn/ta ... -
[ios]ios脱衣服/刮奖app-简单版
2014-07-31 12:21 1309其实就是两张图片,然后第一张图片被手指划过的地方clear ... -
[ios]视差动画
2014-07-16 09:19 962http://www.teehanlax.com/blog/ ... -
[ios]label增加边距-既左右对齐
2014-07-09 01:23 3469http://www.cocoachina.com/bbs/ ... -
[ios] iOS 富文本类库RTLabel
2014-06-30 16:09 1664转自:http://blog.csdn.net/duxinf ... -
[ios]CA animationWIthKeyPath的一些思考
2014-05-13 19:05 2363使用CABasicAnimation的时候 总会遇到 an ... -
[ios]UIVIew的初始化执行方法
2014-04-03 14:56 1568根据你需要执行的动作, 这里有几个方法: -(id)init ... -
[ios]Gesture与scrollView分别实现图片触控
2014-04-02 21:53 1298ScrollView方法 - (void)viewDidL ... -
[ios]Gesture与scrollView分别实现图片触控
2014-04-02 21:53 1... -
[ios]block写法
2014-04-02 21:46 1070参考:http://www.cnblogs.co ... -
[ios]Block分离DataSource -ios升级日记2
2014-04-02 21:44 840根据:http://objccn.io/issue-1-1 ... -
[ios]快速打印
2014-04-02 16:04 620以前打印frame老是用fram.x.x这样 太慢。 其实 ... -
[ios]自定义圆形滑动条-ios升级日记1
2014-04-01 21:53 6679学习下自定义控件。从开源项目中挖了一个 理解模仿了一个 ... -
[ios]iOS7状态栏隐藏
2014-04-01 10:39 706在iOS7中 ,如果你还想用UIApplication ... -
OC简写
2014-03-31 19:43 1066简写 OC的语法一直被认为比较麻烦,绝大多数的 ... -
[ios]NSNotification
2014-01-09 17:48 1607这是一个观察者模式。 [[NSNotific ... -
[ios]注销键盘
2014-01-09 17:17 794[[UIApplication sharedApplica ... -
[ios]GCD-Grand Central Dispatch - 2
2014-01-02 13:04 2583Grand Central Dispatch =GDC1.有两 ... -
[ios] NSLocale 获取当前语言版本
2013-12-02 17:08 2673获取当前手机情况NSLocale 获取当前语言版本: ... -
[ios]多语言支持
2013-12-02 14:04 1176转自:http://blog.csdn.net/songro ...
相关推荐
本篇将深入探讨“swift-iOS转场动画+刮奖卡”这一主题,介绍如何使用Swift开发UI相关控件,特别是如何实现转场动画和刮奖卡效果。 首先,我们来看转场动画。在iOS中,`UIViewControllerTransitioningDelegate`协议...
这是Android上的一个涂抹视图,用于实现刮奖效果项目地址:https://github.com/xiaopansky/RubberView效果图:...android-rubber-view-1.1.2.jarandroid-rubber-view-1.1.2-with-src.jar扫描上面的二维码可以安装demo。
刮奖效果
android刮奖效果demo,越来越流行的效果,仅作分享。
Version 1.0.0: 支持图片覆盖刮奖; 支持自定义view覆盖刮奖; 自动撤销遮罩层。 请关注我的github,不定期更新 https://github.com/PageGuo/PGScratchView
4. **自定义属性**:为了适应不同的设计需求,自定义刮奖视图应该提供一些可配置的属性,如刮奖区的形状、大小、颜色、刮开速度以及是否允许局部刮奖等。这些属性可以通过Swift的get和set方法来设置和获取。 5. **...
在这个项目中,CSS被用来美化刮奖区域,定义了刮奖区的背景色、边框样式、尺寸等视觉效果。可能使用了CSS选择器来定位HTML元素,以及动画效果来实现刮奖动作的平滑过渡,例如渐变、透明度变化等。 【JavaScript】:...
android刮奖简单实现
Android刮奖控件 功能特色: 1、可以设置刮开后显示文字或图片 2、可以统计已刮开区域所占百分比 3、可以分享刮开后的内容
4. **刮擦进度**: 实时计算并反馈刮擦进度,以便在用户达到一定刮擦面积时触发相应的逻辑,如完成刮奖或显示奖励。 5. **可恢复**: 支持用户撤销操作,允许他们刮擦后重新覆盖涂层。 6. **事件监听**: 提供刮擦开始...
4. **遮罩层与动画**: 实现刮奖效果通常需要一个遮罩层,它覆盖在图像上,随着用户的触摸动作逐渐露出底层图像。这个遮罩层可以是一个半透明的颜色层或纹理。在刮开过程中,可以通过改变遮罩层的透明度来模拟刮开的...
Android自定义view,实现刮奖效果,可以直接移植到工程里面直接使用。ScratchView对内存做了优化,最大程度避免OOM。不足之处就是没有做其他属性的扩展,比如自定义view的padding处理等。
向实现一些抽奖,刮奖作用,很有用的,不信你试试!
在移动互联网飞速发展的今天,手机端的交互体验变得尤为重要,而刮奖活动作为一种吸引用户参与、提升互动性的常见手段,被广泛应用于各种APP和移动网站中。"手机端刮奖效果jquery插件(完整)"是专为满足这一需求而...
微信的刮刮乐PHP代码,有需要的可以学习参考
在iOS应用开发中,为了提供丰富的用户体验,开发者经常会用到各种各样的自定义视图组件。其中,"刮奖组件"是一种常见的互动元素,常见于游戏或者促销活动中,让用户模拟刮开涂层查看结果,比如在支付宝等应用中就...
可能有一个JavaScript函数调用Flash对象的方法,如开始刮奖,或者接收Flash发送的刮奖状态更新。 【PHP】"getScratch.php"是服务器端的PHP脚本,它处理来自Flash的请求,比如验证刮奖结果,存储中奖信息,或者生成...
在Android开发中,实现刮奖功能是一项常见的交互设计,它能为用户带来趣味性和互动性。这个过程主要涉及到了Paint、Path、Canvas和Bitmap等核心组件。下面将详细讲解如何利用这些工具来创建一个基本的刮奖效果。 ...
4. **处理用户交互**:当用户在刮奖区域上移动鼠标时,插件会自动处理鼠标移动事件,擦除相应区域。用户停止移动时,如果整个区域都被擦除,可以触发特定的回调函数,如显示隐藏的兑换码或奖品信息。 5. **图层处理...