UI基础 - 训练营:利用Quart 2D实现撕衣服的功能
撕衣服
1 - 思路:使用两张图片,底层图是将要展示的最终效果图;上层图充当绘制层(实际操作层),说白了就是要把两张图的 frame 要保持一致,在擦拭过程中将上层图背景颜色置透明色
1 #import "ViewController.h" 2 // 默认尺寸 3 #define SCREEN_WIDTH [UIScreen mainScreen].bounds.size.width 4 #define SCREENH_HEIGHT [UIScreen mainScreen].bounds.size.height 5 #import "SecondViewController.h" 6 @interface ViewController() 7 8 @property(nonatomic,strong)UIImageView *imageBack;// 显示底层图 9 @property(nonatomic,strong)UIImageView *imageFont;// 显示上层图 10 @property(nonatomic,assign) BOOL isTouch; 11 12 @end 13 14 @implementation ViewController 15 16 - (void)viewDidLoad { 17 [super viewDidLoad]; 18 self.view.backgroundColor = [UIColor yellowColor]; 19 20 // 底层 21 self.imageBack = [[UIImageView alloc] initWithFrame:CGRectMake(10, 84, SCREEN_WIDTH-20, SCREENH_HEIGHT-104)]; 22 self.imageBack.backgroundColor = [UIColor redColor]; 23 self.imageBack.image = [UIImage imageNamed:@"09B.jpg"]; 24 [self.view addSubview:self.imageBack]; 25 26 // 上层 27 self.imageFont = [[UIImageView alloc] initWithFrame:self.imageBack.frame]; 28 self.imageFont.backgroundColor = [UIColor clearColor]; 29 self.imageFont.userInteractionEnabled = YES; 30 self.imageFont.image = [UIImage imageNamed:@"09A.jpg"]; 31 [self.view addSubview:self.imageFont]; 32 33 } 34 35 // 判断上层图片,打开触摸 36 - (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{ 37 38 UITouch *touch = [touches anyObject]; 39 if (touch.view == self.imageFont) { 40 self.isTouch = YES; 41 } 42 } 43 44 - (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{ 45 46 if (self.isTouch) { 47 48 // 开启上下文 49 UIGraphicsBeginImageContext(self.imageFont.frame.size); 50 // 将上层图片绘制到图形上下文中 51 [self.imageFont.image drawInRect:self.imageFont.bounds]; 52 53 // 清空手指触摸的位置:拿到手指,根据手指的位置,让对应的位置成为透明 54 UITouch *touch = [touches anyObject]; 55 CGPoint point = [touch locationInView:touch.view]; 56 57 // 清空区域 58 CGRect rect = CGRectMake(point.x - 40, point.y - 40, 40, 40); 59 CGContextClearRect(UIGraphicsGetCurrentContext(), rect);// 清空 60 self.imageFont.image = UIGraphicsGetImageFromCurrentImageContext(); 61 UIGraphicsEndImageContext(); // 关闭 62 } 63 64 } 65 66 - (void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{ 67 self.isTouch = NO; 68 } 69 70 @end
运行效果:初始化 | 擦图...
素材下载:图片素材
https://pan.baidu.com/s/1H-8N7s3wjdIo1Og-S5Ej5Q
jbou
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 全程不用写代码,我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· .NET10 - 预览版1新功能体验(一)