資訊專欄INFORMATION COLUMN
摘要：蒙版需要引入圖片，如果要引入圖片那還不如直接叫把這每個進度的圖給我算了，又覺得小題大做，所以這里使用蒙版。代碼實現(xiàn)首先畫出蒙版圖形標簽用于自定義形狀，它內(nèi)部的代碼不會顯示，僅供引用。
起因
最近做需求時發(fā)現(xiàn)有個這樣的UI圖
第一眼看到這圖時腦子就像著用著幾個div加border-radio來實現(xiàn)，仔細一看發(fā)現(xiàn)這個圖形整體的背景色是帶漸變的，那就不能用幾個元素去拼湊了，這只能用于單一背景色的圖形。
整體帶漸變背景色就需要用一個元素去畫出這個圖形，但是這太麻煩了，還有一種方法就是使用蒙版。前端中蒙版有CSS蒙版，SVG蒙版，Canvas蒙版。CSS蒙版需要引入圖片，如果要引入圖片那還不如直接叫UI把這每個進度的圖給我算了，Canvas又覺得小題大做，所以這里使用SVG蒙版。
代碼實現(xiàn)首先畫出蒙版圖形
再定義下漸變色
再畫個矩形，并引入蒙版
注意該元素的位置要在蒙版元素位置內(nèi)才能看到效果
效果完成
大體上差不多了，在進度顯示上只要控制蒙版矩形的寬和圓的個數(shù)就可以了。
SVG還有組的概念，試了下在組上加入漸變，結(jié)果不行。
然而不行，相當于在每個元素上加了個漸變。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/54228.html
摘要：接下來我先以為例，簡單解釋蒙版的工作原理。先創(chuàng)建紅色前景和藍色背景在中使用蒙版需要在使用前在中定義并為其設(shè)置一個唯一，然后在需要應(yīng)用蒙版的元素上添加一條屬性。在蒙版中的黑白漸變，應(yīng)用到彩色圖層上就會產(chǎn)生透明度的漸變。 蒙版工作原理 設(shè)計師或者會用Sketch、Photoshop一類設(shè)計工具的朋友應(yīng)該都了解蒙版(mask)這個東西。接下來我先以Photoshop為例，簡單解釋蒙版的工作原...
摘要：接下來我先以為例，簡單解釋蒙版的工作原理。先創(chuàng)建紅色前景和藍色背景在中使用蒙版需要在使用前在中定義并為其設(shè)置一個唯一，然后在需要應(yīng)用蒙版的元素上添加一條屬性。在蒙版中的黑白漸變，應(yīng)用到彩色圖層上就會產(chǎn)生透明度的漸變。 蒙版工作原理 設(shè)計師或者會用Sketch、Photoshop一類設(shè)計工具的朋友應(yīng)該都了解蒙版(mask)這個東西。接下來我先以Photoshop為例，簡單解釋蒙版的工作原...
摘要：組件提供了一系列的操作接口以方便用戶對彈幕的相關(guān)特性進行定制。對于這種類型的圖像，我們可以使用色鍵的方式進行摳圖生成蒙版。其中，用于更新蒙版的接口為。 導(dǎo)讀：本文內(nèi)容是筆者最近實現(xiàn)的 web 端彈幕組件—— Barrage UI 的一個延伸。在閱讀本文的實例和相關(guān)代碼之前，不妨先瀏覽項目文檔，對組件的使用方式和相關(guān)接口進行了解。 各位童鞋如果經(jīng)常上 B 站（bilibili.com） ...
閱讀 785·2021-11-24 10:30
閱讀 1331·2021-09-24 09:48
閱讀 3129·2021-09-24 09:47
閱讀 3674·2019-08-29 17:11
閱讀 2959·2019-08-29 15:38
閱讀 2360·2019-08-29 11:03
閱讀 3668·2019-08-26 12:15
閱讀 1075·2019-08-26 10:45
