关闭

iPhone撕衣服游戏-图片擦除

2805人阅读 评论(0) 收藏 举报
分类:

原理:

       撕衣服游戏的原理就是用两张几乎一样的照片(两张照片的区别就是一张比较保守,一张比较开放,实质是设计师在原本开放的模特照片上P了一层衣服),把开放的图片放在下面,把保守的图片放在上面(每一张图片都放在一张imageView上)。撕衣服的过程也就是擦除图片的过程,把手势接触过的地方图片擦除。

步骤:

       1.给控制器添加pan手势,并设置监听方法。

       2.在监听方法里

         2.1 获取当前点

         2.2 获取擦除的矩形范围(以当前点为中心,擦除当前点四周指定范围)

         2.3 开启上下文

         2.4 把控件上的layer渲染到上下文中

         2.5 擦除图片

         2.6 把生成的新图片赋给原来的imageView


代码:

- (void)viewDidLoad {
    [super viewDidLoad];
    // 给控制器添加pan手势
    UIPanGestureRecognizer *panGesutre = [[UIPanGestureRecognizer alloc] initWithTarget:self action: @selector(pan:)];
    
    [self.view addGestureRecognizer:panGesutre];
}

- (void)pan:(UIPanGestureRecognizer *)panGesture
{
    //1.获取当前点
    CGPoint currentPoint = [panGesture locationInView:self.view];
    
    //2.获取擦除的矩形范围
    CGFloat wipeWidth = 30;
    CGFloat wipeHeight = 30;
    CGFloat wipeX = currentPoint.x - wipeWidth * 0.5;
    CGFloat wipeY = currentPoint.y - wipeHeight * 0.5;
    
    CGRect rect = CGRectMake(wipeX, wipeY, wipeWidth, wipeHeight);
    //3.开启上下文
    UIGraphicsBeginImageContextWithOptions(self.view.frame.size, NO, 0);
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    
    //4.控件的layer渲染上去
    [self.imageView.layer renderInContext:ctx];
    
    //5.擦除图片
    CGContextClearRect(ctx, rect);
    
    //6.生成一张新的图片
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    self.imageView.image = image;
}
效果演示:

图片素材分享:撕衣服游戏图片素材


1
0
查看评论

55.模拟撕衣服游戏编辑图片

撕衣服游戏的原理:原本有2个图片,一个原图片,一个被撕了衣服以后的图片。两个图片放在一起,原图片放在上面,收滑动的时候上面图片的像素点设置成透明,下面的图片自然露出来了。 布局文件 activity_main.xml <RelativeLayout xmlns:android="ht...
  • augfun
  • augfun
  • 2017-02-17 02:43
  • 752

Android 撕衣服(刮刮乐游戏)

项目简介:  该项目为撕衣服,类似刮刮乐游戏详细介绍:用户启动项目后,加载一张图片,当用户点击图片的时候,点击的一片区域就会消失,从而显示出在这张图片下面的图片 这个小游戏类似与刮奖一样,刮开涂层就会显示文字。 这里则是撕掉美女身上的衣服,漏出里面的图片。该应用涉及到的知识有: 1.如何实现画图...
  • qq_36642554
  • qq_36642554
  • 2017-04-01 21:26
  • 3851

HTML5游戏:《撕掉MM的衣服》

游戏99.9%都是程序猿写的,为什么玩游戏的人99.9%都不是程序猿? 有人说,咱是操着卖白粉的心,挣着卖白菜的钱!!! 有人说,每个IT产品和应用背后都是无数程序猿的血与泪!! 有人说,每个程序猿上辈子都是折了护翼的卫生巾!!! 程序猿,伤不起!!! 弄了个让亲们放松的HTM...
  • cuixiping
  • cuixiping
  • 2011-12-29 13:59
  • 4979

撕美女衣服应用的原理及做法

现在教大家做一款在市场上非常火的的应用,撕美女衣服。其实原理很简单: 1.准备两张一样的图片,一张是穿有衣服的,另一张是没有穿衣服的。 2.通过FrameLayout进行布局,穿衣服的放上面,没穿衣服的图片放下面。 3.通过触摸事件进行判断,手指划过的地方,让穿衣服的图片变成透明,就显示到了下面没穿...
  • loongggdroid
  • loongggdroid
  • 2014-01-21 12:32
  • 8092

android撕衣服应用介绍

/**  * 主要原理就是利用canvas绘制一层透明色,让后将穿完整衣服的那个图片绘制上。他们之前的层次模型为PorterDuff.Mode.DST_OUT;  * View的draw的时候先绘制没穿衣服的那张图片,然后绘制刚才canvas绘制的两张图叠加起来的那张图; ...
  • linghu_java
  • linghu_java
  • 2015-04-03 10:12
  • 1353

Android 仿美女撕衣服效果

因为我写demo的时候不是用一整屏幕来放置当前图片View的,且资源图也不小,所以用到了bitmap缩放 代码注释比较详尽,直接上了 package com.stone.guaguaka.view; import android.content.Context; import android....
  • jjwwmlp456
  • jjwwmlp456
  • 2016-01-28 15:17
  • 1527

撕衣服小游戏代码

public class MainActivity extends Activity { private ImageView iv; // 可以修改的位图 private Bitmap alertBitmap; private Canvas canvas; @Override protected...
  • salahelx
  • salahelx
  • 2015-01-30 11:41
  • 557

Android之Canvas撕衣服

前几篇都涉及到了Canvas,Paint,Bitmap的结合使用,这里就不多说了~ 现在我要写的是撕衣服的这个项目~ 其实这个项目只是涉及到了一张图片到另一张图片的变换 先看效果图: 布局文件也是俩张图片,一张穿了衣服的图片在没穿衣服的图片上面~ 布局代码: <RelativeLayout...
  • qq_33642117
  • qq_33642117
  • 2016-07-06 14:53
  • 533

模拟撕衣服的代码

<!DOCTYPE html> <html> <head> </head> <body><canvas id="c"></canvas> <script>...
  • sandstom_1985
  • sandstom_1985
  • 2015-07-02 14:51
  • 379

自定义View 实现 刮刮卡效果和美女撕衣服

直奔高潮,不对,直奔主题。 效果图: 下面上代码: public class TearView extends View { private Paint paint,paintB; private Canvas canva; private Bitmap bf; ...
  • zhuwentao16
  • zhuwentao16
  • 2016-03-15 16:15
  • 437
    个人资料
    • 访问:68928次
    • 积分:1390
    • 等级:
    • 排名:千里之外
    • 原创:79篇
    • 转载:11篇
    • 译文:0篇
    • 评论:4条
    最新评论