上午有個哥們問我有沒有獲取圓形圖片的方法,就是要把正方形的圖片變成圓形的來顯示。最近也有再搞flash,所以第一反應就是遮罩,里面自己也沒搞過。搜索“ mask“挺多資料的,這里把例子與大家分享。先上效果圖:
未命名.jpg (21.63 KB)
2013-4-27 12:52
好了現在開始代碼部分,這里使用了自定義組件以及自定義屬性的方式來進行編碼
。
1、添加資源文件:attrs.xml
復制內容到剪貼板
代碼:
2、創建自定義組件.java
復制內容到剪貼板
代碼: com.xzw.mask.;
..;
..res.;
..;
...;
..;
..;
..Paint;
..;
..;
.util.;
..;
com.xzw.mask.R;
class {
int =0;
int =0;
;
( , attrs) {
super(, attrs);
= ().es(attrs, R.., 0, 0);
= .(R.., 0);
= .(R.., 0);
if ( == 0 || == 0) {
= new tion(.on() +
": The is and must refer to a valid image.");
}
if ( != null)
throw ;
/**
* 主要代碼實現
*/
//獲取圖片的資源文件
= .((), );
//獲取遮罩層圖片
mask = .((), );
= .(mask.(), mask.(), .);
//將遮罩層的圖片放到畫布中
= new ();
Paint paint = new Paint(Paint.);
//設置兩張圖片相交時的模式
paint.(new (.Mode.));
.(, 0, 0, null);
.(mask, 0, 0, paint);
paint.(null);
();
(.);
.();
}
}3、在布局文件中添加
復制內容到剪貼板
代碼:
xmlns:=""
:=""
:=""
:="" >
:=""
:=""
:text="以下為正常圖片" />
:id="@+id/"
:=""
:=""
:src="@/" />
:=""
:=""
:text="以下為遮罩圖片變成圓形的圖片" />
:id="@+id/"
:=""
:=""
:image="@/"
:mask="@/" />
這里要記得添加也就是xml的命名空間
復制內容到剪貼板
代碼:xmlns:=""xmlns:的自我們自定義的命名空間方式。
命名規則是:
包名
這樣代碼就實現了遮罩效果了。說了這么多什么是遮罩還沒說呢?就是有兩張圖片,一張圖片放在另外一張圖片的上面,放在上面的圖片叫做遮罩層,下面的叫做被遮罩層設置遮罩沒有反應,兩張圖片重疊的部分會顯示出來,就形成了遮罩的效果。遮罩用在哪里了,就比如說頭像,頭像原來是正方形設置遮罩沒有反應,突然想變成圓形的,這樣搞就很簡單的實現了。
嘿嘿希望這個功能對大家有幫助哈。 源碼:
mask.zip (1.06 MB)
mask.zip (1.06 MB)
2013-4-27 12:54
參考: