IOS-DEMO3 scrapeAward/刮奖/脱衣服 -简单


描述:ios曾经很火的脱衣服美女app 刮奖app的实现远离 是两张图片 第一张随着手指的滑动 清除部分像素然后再重新放上去。
效果图:


过程描述:
1.通过touchMove获得移动位置。
2.用 UIGraphicsBeginImageContext 重新载入图片
3.然后将图片绘制入imageContext
4.并通过 CGContextClearRect 清除不要的像素
5.图片重新设置给imageView.
6.关闭 UIGraphicsEndImageContext ();

代码:
//
//  PLLViewController.m
//  DemoScrapeAwrad
//
//  Created by liu poolo on 14-7-31.
//  Copyright (c) 2014年 liu poolo. All rights reserved.
//

#import "PLLViewController.h"

@interface PLLViewController (){
    BOOL isTouchImageView;
}

@end

@implementation PLLViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    self.topImageView.image=[UIImage imageNamed:@"2A.jpg"];
    self.bottomImageView.image=[UIImage imageNamed:@"2B.jpg"];
    [self.topImageView setUserInteractionEnabled:YES];
    isTouchImageView=NO;
     // Do any additional setup after loading the view, typically from a nib.
}

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{
 
    UITouch *touch= [touches anyObject];
    if([touch view]==self.topImageView){
        isTouchImageView=YES;
    }
}

-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event{
   
    if(isTouchImageView){
        UITouch* touch=[touches anyObject];
        CGPoint point=[touch locationInView:self.topImageView];
       
        UIGraphicsBeginImageContext(self.topImageView.frame.size);
        [self.topImageView.image drawInRect:self.topImageView.frame];
        CGContextClearRect(UIGraphicsGetCurrentContext(), CGRectMake(point.x-5, point.y-5, 10, 10));
        self.topImageView.image=UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsEndImageContext();
       
       
       
//        UIGraphicsBeginImageContext(self.topImageView.frame.size);
//        [self.topImageView.image drawInRect:self.topImageView.bounds];
//        CGContextClearRect(UIGraphicsGetCurrentContext(), CGRectMake(point.x-5, point.y-5, 10, 10));
//        self.topImageView.image=UIGraphicsGetImageFromCurrentImageContext();
//        UIGraphicsEndImageContext();
    }
   
   
}

-(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event{
    isTouchImageView=NO;
}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现刮奖效果,可以使用 Vue3 中的 `<canvas>` 标签来绘制刮奖区域和遮罩层,然后通过监听用户的鼠标或手指移动事件来擦除遮罩层,从而实现刮奖效果。 下面是一个简单的实现示例: ```vue <template> <div class="scratch-card"> <canvas ref="canvas" class="scratch-card__canvas"></canvas> </div> </template> <script> import { onMounted, onUnmounted, ref } from 'vue'; export default { name: 'ScratchCard', setup() { const canvasRef = ref(null); let ctx = null; let isDrawing = false; const handleStart = (e) => { isDrawing = true; ctx.beginPath(); ctx.moveTo(e.clientX, e.clientY); }; const handleMove = (e) => { if (isDrawing) { ctx.lineTo(e.clientX, e.clientY); ctx.stroke(); } }; const handleEnd = () => { isDrawing = false; }; onMounted(() => { const canvas = canvasRef.value; ctx = canvas.getContext('2d'); // 绘制刮奖区域 ctx.fillStyle = '#888'; ctx.fillRect(0, 0, canvas.width, canvas.height); // 绘制遮罩层 ctx.fillStyle = '#f00'; ctx.fillRect(0, 0, canvas.width, canvas.height); // 监听鼠标或手指移动事件 canvas.addEventListener('mousedown', handleStart); canvas.addEventListener('mousemove', handleMove); canvas.addEventListener('mouseup', handleEnd); canvas.addEventListener('touchstart', handleStart); canvas.addEventListener('touchmove', handleMove); canvas.addEventListener('touchend', handleEnd); }); onUnmounted(() => { const canvas = canvasRef.value; canvas.removeEventListener('mousedown', handleStart); canvas.removeEventListener('mousemove', handleMove); canvas.removeEventListener('mouseup', handleEnd); canvas.removeEventListener('touchstart', handleStart); canvas.removeEventListener('touchmove', handleMove); canvas.removeEventListener('touchend', handleEnd); }); return { canvasRef, }; }, }; </script> <style scoped> .scratch-card { position: relative; width: 300px; height: 200px; } .scratch-card__canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } </style> ``` 在这个示例中,我们使用 `<canvas>` 标签来创建一个刮奖区域,它的背景颜色是灰色的。然后,我们使用相同的大小和位置创建一个遮罩层,它的背景颜色是红色的。 在 `setup` 函数中,我们使用 `onMounted` 和 `onUnmounted` 生命周期钩子来监听鼠标或手指移动事件,并在事件处理程序中绘制用户的刮奖轨迹。我们还使用 `ref` 函数来创建一个引用,以便在模板中访问 `<canvas>` 元素。 最后,我们将组件的样式设置为相对定位,以便它的子元素(即 `<canvas>` 元素)可以使用绝对定位来覆盖它。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值