使用PorterDuffXfermode实现遮罩层

出处：

使用PorterDuffXfermode实现遮罩层

最近在开发一个小游戏中，用到一个显示当前进度的进度条，如下图所示

由于中间黄色部分是进度条区域，带有一定的弧度而不是规则的长方形。刚开始想偷懒用了很多办法来实现效果都不理想。后来想到使用遮罩层可以非常方便的实现这个功能。

可以通过修改Paint的Xfermode来实现遮罩的效果。Xfermode的功能非常强大，在API DEMO的Graphics中的最后一项有demo。看一下怎么实现我们的这个进度条吧。

 

 

首先用图片处理软件制作一个和中间黄色区域相同的图形，我们将在代码中设置它做为遮罩。

View的draw方法

 

Java代码  

1. public void draw(Canvas canvas) {  
2.         //背景部分，也就是上面的图形  
3.         Bitmap background = BitmapFactory.decodeResource(getResources(),  
4.                 R.drawable.guage);  
5.         //遮罩，就是提取来部分  
6.         Bitmap mask = BitmapFactory.decodeResource(getResources(),  
7.                 R.drawable.mask);  
8.           
9.         canvas.drawColor(Color.WHITE);  
10.         canvas.drawBitmap(background, 0, 0, null);  
11.         Paint paint = new Paint();  
12.         paint.setFilterBitmap(false);  
13.   
14.         int x = 0;  
15.         int y = 0;  
16.   
17.         // draw the src/dst example into our offscreen bitmap  
18.         int sc = canvas.saveLayer(x, y, x + background.getWidth(), y + background.getHeight(), null,  
19.                 Canvas.MATRIX_SAVE_FLAG | Canvas.CLIP_SAVE_FLAG  
20.                         | Canvas.HAS_ALPHA_LAYER_SAVE_FLAG  
21.                         | Canvas.FULL_COLOR_LAYER_SAVE_FLAG  
22.                         | Canvas.CLIP_TO_LAYER_SAVE_FLAG);  
23.         // canvas.drawBitmap(mDstB, 0, 0, paint);  
24.         canvas.drawRect(0, 0, background.getWidth() / 2, background  
25.                 .getHeight(), paint);  
26.         paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));  
27.         // canvas.drawBitmap(mSrcB, 0, 0, paint);  
28.         canvas.drawBitmap(mask, 0f, 0f, paint);  
29.         paint.setXfermode(null);  
30.         canvas.restoreToCount(sc);  
31.   
32.     }  

 

 

只用控制绘制的矩形的长度就可以实现进度条的效果了。