UI笔记 - 训练营| Quart 2D：撕衣服

2021-11-21 23:34:20 阅读：187 来源： 互联网

标签：Quart touches self 2D imageFont UI imageBack touch view

撕衣服

1 - 设计思路

① 两张图层：底层图充当最终效果图；上层图充当绘制层（实际操作层）

② 两张图层的 frame 要保持一致且上层图背景颜色置透明色

2 - 代码示例

 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/1AoLNp_RA1qM7ECac7NFcTQ

rong

标签：Quart,touches,self,2D,imageFont,UI,imageBack,touch,view
来源： https://www.cnblogs.com/self-epoch/p/15586532.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

UI笔记 - 训练营| Quart 2D：撕衣服