swift 實現(xiàn)遮罩部分區(qū)域“挖洞”效果和點擊事件穿透

在日常開發(fā)中有時候我們需要在APP中做用戶指導老虫,比如第一次進入某個頁面的時候顯示遮罩覆蓋烫沙, 但是又需要將遮罩下的某些區(qū)域暴露出來镣隶,便于文字說明漫试,比如我們需要在視圖上加個遮罩六敬,并且遮罩上要顯示 按鈕2 :


原圖

期待的效果圖:按鈕1被蓋住,而 按鈕2顯示出來

效果

我們可以 在視圖上加個遮罩驾荣,再往遮罩上畫一個同樣位置和樣式的 按鈕2 外构,作為一個有追求的程序猿,我們是不能容忍這種 低效實現(xiàn)方式的播掷。

我們可以通過iOS 的 Core Graphics 來實現(xiàn)审编,也很簡單,只需要兩句代碼
重寫 遮罩視圖里面的 draw 方法:

    override func draw(_ rect: CGRect) {
        
        //利用  UIBezierPath  繪制出 按鈕2 的外觀路徑,
        let path = UIBezierPath.init(roundedRect: CGRect.init(x: 100, y: 300, width: 100.0, height: 40.0), cornerRadius: 20.0)
        //設(shè)置 路徑填充樣式為 clear 清除樣式歧匈,  就能 使設(shè)置的路徑中的 繪圖區(qū)域被擦除掉
        path.fill(with: .clear, alpha: 0.1)
        
    }

點擊穿透:

如果我們需要在遮罩上點擊按鈕2 區(qū)域響應(yīng) 按鈕2的事件垒酬,點擊其它區(qū)域響應(yīng)遮罩上的點擊事件,我們可以重寫 遮罩上的 事件傳遞方法hitTest:

    override func hitTest(_ point: CGPoint, with event: UIEvent?) -> UIView? {
        //按鈕2區(qū)域的路徑
        let path = UIBezierPath.init(roundedRect: CGRect.init(x: 100, y: 300, width: 100.0, height: 40.0), cornerRadius: 20.0)
        //判斷 點擊事件在 按鈕2區(qū)域則 返回nil
        if path.contains(point) {
            return nil
        }else{
            return super.hitTest(point, with: event)
        }
    }
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末件炉,一起剝皮案震驚了整個濱河市勘究,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌斟冕,老刑警劉巖口糕,帶你破解...
    沈念sama閱讀 216,470評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異磕蛇,居然都是意外死亡景描,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,393評論 3 392
  • 文/潘曉璐 我一進店門秀撇,熙熙樓的掌柜王于貴愁眉苦臉地迎上來囊榜,“玉大人铃芦,你說我怎么就攤上這事。” “怎么了饵蒂?”我有些...
    開封第一講書人閱讀 162,577評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我,道長适肠,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,176評論 1 292
  • 正文 為了忘掉前任候引,我火速辦了婚禮侯养,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘澄干。我一直安慰自己逛揩,他們只是感情好,可當我...
    茶點故事閱讀 67,189評論 6 388
  • 文/花漫 我一把揭開白布麸俘。 她就那樣靜靜地躺著辩稽,像睡著了一般。 火紅的嫁衣襯著肌膚如雪从媚。 梳的紋絲不亂的頭發(fā)上逞泄,一...
    開封第一講書人閱讀 51,155評論 1 299
  • 那天,我揣著相機與錄音拜效,去河邊找鬼喷众。 笑死,一個胖子當著我的面吹牛紧憾,可吹牛的內(nèi)容都是我干的到千。 我是一名探鬼主播,決...
    沈念sama閱讀 40,041評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼赴穗,長吁一口氣:“原來是場噩夢啊……” “哼憔四!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起望抽,我...
    開封第一講書人閱讀 38,903評論 0 274
  • 序言:老撾萬榮一對情侶失蹤加矛,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后煤篙,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體斟览,經(jīng)...
    沈念sama閱讀 45,319評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,539評論 2 332
  • 正文 我和宋清朗相戀三年辑奈,在試婚紗的時候發(fā)現(xiàn)自己被綠了苛茂。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,703評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡鸠窗,死狀恐怖妓羊,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情稍计,我是刑警寧澤躁绸,帶...
    沈念sama閱讀 35,417評論 5 343
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響净刮,放射性物質(zhì)發(fā)生泄漏剥哑。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,013評論 3 325
  • 文/蒙蒙 一淹父、第九天 我趴在偏房一處隱蔽的房頂上張望株婴。 院中可真熱鬧,春花似錦暑认、人聲如沸困介。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,664評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽座哩。三九已至,卻和暖如春粮彤,著一層夾襖步出監(jiān)牢的瞬間八回,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,818評論 1 269
  • 我被黑心中介騙來泰國打工驾诈, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人溶浴。 一個月前我還...
    沈念sama閱讀 47,711評論 2 368
  • 正文 我出身青樓乍迄,卻偏偏與公主長得像,于是被迫代替她去往敵國和親士败。 傳聞我的和親對象是個殘疾皇子闯两,可洞房花燭夜當晚...
    茶點故事閱讀 44,601評論 2 353

推薦閱讀更多精彩內(nèi)容

  • Swift1> Swift和OC的區(qū)別1.1> Swift沒有地址/指針的概念1.2> 泛型1.3> 類型嚴謹 對...
    cosWriter閱讀 11,097評論 1 32
  • 問題 最近要在iPad上實現(xiàn)一個很獨特的功能,簡單描述一下就是要顯示一個帶有半透明背景的彈出界面谅将,在其上加一個不規(guī)...
    從小荔枝炸清華閱讀 4,027評論 2 3
  • 在iOS開發(fā)中經(jīng)常會涉及到觸摸事件漾狼。本想自己總結(jié)一下,但是遇到了這篇文章饥臂,感覺總結(jié)的已經(jīng)很到位逊躁,特此轉(zhuǎn)載。作者:L...
    WQ_UESTC閱讀 6,009評論 4 26
  • 1 CALayer IOS SDK詳解之CALayer(一) http://doc.okbase.net/Hell...
    Kevin_Junbaozi閱讀 5,148評論 3 23
  • 本文主要講解iOS觸摸事件的一系列機制隅熙,涉及的問題大致包括: 觸摸事件由觸屏生成后如何傳遞到當前應(yīng)用稽煤? 應(yīng)用接收觸...
    baihualinxin閱讀 1,208評論 0 9