使用PorterDuffXfermode实现遮罩层
最近在开发一个小游戏中,用到一个显示当前进度的进度条,如下图所示
?
由于中间黄色部分是进度条区域,带有一定的弧度而不是规则的长方形。刚开始想偷懒用了很多办法来实现效果都不理想。后来想到使用遮罩层可以非常方便的实现这个功能。
可以通过修改Paint的Xfermode来实现遮罩的效果。Xfermode的功能非常强大,在API DEMO的Graphics中的最后一项有demo。看一下怎么实现我们的这个进度条吧。
?
?
首先用图片处理软件制作一个和中间黄色区域相同的图形,我们将在代码中设置它做为遮罩。
?
?
View的draw方法
?
public void draw(Canvas canvas) {//背景部分,也就是上面的图形Bitmap background = BitmapFactory.decodeResource(getResources(),R.drawable.guage);//遮罩,就是提取来部分Bitmap mask = BitmapFactory.decodeResource(getResources(),R.drawable.mask);canvas.drawColor(Color.WHITE);canvas.drawBitmap(background, 0, 0, null);Paint paint = new Paint();paint.setFilterBitmap(false);int x = 0;int y = 0;// draw the src/dst example into our offscreen bitmapint sc = canvas.saveLayer(x, y, x + background.getWidth(), y + background.getHeight(), null,Canvas.MATRIX_SAVE_FLAG | Canvas.CLIP_SAVE_FLAG| Canvas.HAS_ALPHA_LAYER_SAVE_FLAG| Canvas.FULL_COLOR_LAYER_SAVE_FLAG| Canvas.CLIP_TO_LAYER_SAVE_FLAG);// canvas.drawBitmap(mDstB, 0, 0, paint);canvas.drawRect(0, 0, background.getWidth() / 2, background.getHeight(), paint);paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));// canvas.drawBitmap(mSrcB, 0, 0, paint);canvas.drawBitmap(mask, 0f, 0f, paint);paint.setXfermode(null);canvas.restoreToCount(sc);}?
只用控制绘制的矩形的长度就可以实现进度条的效果了。
? ?
?
?
?
?
?
?
?
?
?
?
?
?
?