iOS 刮刮卡

先看下效果圖


預覽.gif

項目里需要做個刮刮卡功能,網上簡單搜了一下臭胜,基本都是采用清除圖層的方式來實現(xiàn):
如下所示:


    // 觸摸任意位置
    UITouch *touch = touches.anyObject;
    // 觸摸位置在圖片上的坐標
    CGPoint cententPoint = [touch locationInView:self.imageView];
    // 設置清除點的大小
    CGRect  rect = CGRectMake(cententPoint.x, cententPoint.y, 20, 20);
    // 默認是去創(chuàng)建一個透明的視圖
    UIGraphicsBeginImageContextWithOptions(self.imageView.bounds.size, NO, 0);
    // 獲取上下文(畫板)
    CGContextRef ref = UIGraphicsGetCurrentContext();
    // 把imageView的layer映射到上下文中
    [self.imageView.layer renderInContext:ref];
    // 清除劃過的區(qū)域
    CGContextClearRect(ref, rect);
    // 獲取圖片
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    // 結束圖片的畫板, (意味著圖片在上下文中消失)
    UIGraphicsEndImageContext();
 
    self.imageView.image = image;

如果粗略使用沒什么問題莫其,但是一旦快速滑動的過程浇揩,劃痕就非常難看。而且由于每次采用繪制圖片的方式憨颠,比較消耗性能胳徽。
本人也嘗試過優(yōu)化劃痕形狀,或者修改繪制方式爽彤,始終不理想养盗。

解決方案:
后來采用mask+UIBezierPath的方案來實現(xiàn)。(對于layer的mask不理解的同學可以去簡單看下mask的原理)

就是把刮刮卡的思路反過來适篙,原本是把遮蓋層劃掉爪瓜,反過來也可以直接將目標圖層劃出來。這種做法就是遮蓋界面在下層匙瘪,獎勵界面在上層铆铆。剛好和常識相反。

創(chuàng)建maskLayer

- (CAShapeLayer *)maskLayer{
    if(!_maskLayer) {
        _maskLayer = [CAShapeLayer layer];
        _maskLayer.lineCap = kCALineCapRound;
        _maskLayer.lineWidth = self.ScratchSize;
        _maskLayer.strokeColor = [UIColor blackColor].CGColor;
    }
    return _maskLayer;
}

將maskLayer作為獎品界面的mask

  self.prizeView.layer.mask = self.maskLayer;

然后在手勢劃過的地方丹喻,繪制線條(劃痕)薄货,將路徑傳遞給maskLayer。

- (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    UITouch *touch = touches.anyObject;
    CGPoint prePoint = [touch previousLocationInView:self.prizeView];
    CGPoint currentPoint = [touch locationInView:self.prizeView];
    [self.maskPath moveToPoint:prePoint];
    [self.maskPath addLineToPoint:currentPoint];
    self.maskLayer.path = self.maskPath.CGPath;
}

完整代碼地址:https://github.com/yitezh/YTScratchyCard

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末碍论,一起剝皮案震驚了整個濱河市谅猾,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌鳍悠,老刑警劉巖税娜,帶你破解...
    沈念sama閱讀 217,406評論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異藏研,居然都是意外死亡敬矩,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,732評論 3 393
  • 文/潘曉璐 我一進店門蠢挡,熙熙樓的掌柜王于貴愁眉苦臉地迎上來弧岳,“玉大人,你說我怎么就攤上這事业踏∏菥妫” “怎么了?”我有些...
    開封第一講書人閱讀 163,711評論 0 353
  • 文/不壞的土叔 我叫張陵勤家,是天一觀的道長腹尖。 經常有香客問我,道長伐脖,這世上最難降的妖魔是什么热幔? 我笑而不...
    開封第一講書人閱讀 58,380評論 1 293
  • 正文 為了忘掉前任乐设,我火速辦了婚禮,結果婚禮上断凶,老公的妹妹穿的比我還像新娘伤提。我一直安慰自己巫俺,他們只是感情好认烁,可當我...
    茶點故事閱讀 67,432評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著介汹,像睡著了一般却嗡。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上嘹承,一...
    開封第一講書人閱讀 51,301評論 1 301
  • 那天窗价,我揣著相機與錄音,去河邊找鬼叹卷。 笑死撼港,一個胖子當著我的面吹牛,可吹牛的內容都是我干的骤竹。 我是一名探鬼主播帝牡,決...
    沈念sama閱讀 40,145評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼蒙揣!你這毒婦竟也來了靶溜?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 39,008評論 0 276
  • 序言:老撾萬榮一對情侶失蹤懒震,失蹤者是張志新(化名)和其女友劉穎罩息,沒想到半個月后,有當地人在樹林里發(fā)現(xiàn)了一具尸體个扰,經...
    沈念sama閱讀 45,443評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡瓷炮,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,649評論 3 334
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了递宅。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片崭别。...
    茶點故事閱讀 39,795評論 1 347
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖恐锣,靈堂內的尸體忽然破棺而出茅主,到底是詐尸還是另有隱情,我是刑警寧澤土榴,帶...
    沈念sama閱讀 35,501評論 5 345
  • 正文 年R本政府宣布诀姚,位于F島的核電站,受9級特大地震影響玷禽,放射性物質發(fā)生泄漏赫段。R本人自食惡果不足惜呀打,卻給世界環(huán)境...
    茶點故事閱讀 41,119評論 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望糯笙。 院中可真熱鬧贬丛,春花似錦、人聲如沸给涕。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,731評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽够庙。三九已至恭应,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間耘眨,已是汗流浹背昼榛。 一陣腳步聲響...
    開封第一講書人閱讀 32,865評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留剔难,地道東北人胆屿。 一個月前我還...
    沈念sama閱讀 47,899評論 2 370
  • 正文 我出身青樓,卻偏偏與公主長得像偶宫,于是被迫代替她去往敵國和親非迹。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,724評論 2 354