以前写as3的时候,遮罩效果一个mask属性就搞定了,真是方便。
转到android上以后,发现要实现类似的效果,可以使用Xfermode,android一共提供了三种:
AvoidXfermode;
PixelXorXfermode;
PorterDuffXfermode;
前两种已经不被推荐使用了(据说是因为不支持硬件加速,要生效得强制关闭硬件加速),就不细说了,主要说说第三种,一共提供了十六种效果(as3里也提供了类似,但是更加复杂的方法,所以对我而言还是比较熟悉的),如图所示:
但是要正确的在canvas上实现这些效果,还真是没那么容易,我也是研究了半天,终于实现了自己想要的效果,下面用一个例子说明下我的操作流程。
想要实现的效果是这样的:
简单分析一下,绘制一个圆形和一个矩形,计算好相应的坐标位置,然后使用SRC_IN进行混合就可以了,类似这样:
下面说一下我的操作流程:
1. 绘制border
2. 保存为单独层(canvas.saveLayer),特别注意这一步必须要有,否则无论如何出不来正常效果,起码我试了很久没有成功
3. 绘制填充的圆形,同时也是遮罩
4. 设置笔触的Xfermode为new PorterDuffXfermode(PorterDuff.Mode.SRC_IN)
5. 使用该笔触绘制矩形,进行混合
6. 恢复到canvas上
上代码,大家可以对照看一下各个步骤的具体代码
@Override
protected void onDraw(Canvas canvas) {
float strokeWidth = getResources().getDimension(R.dimen.stroke_width);
int borderColor = getResources().getColor(R.color.carnation);
int fillColor = getResources().getColor(R.color.carnation_lighter);
int percentColor = getResources().getColor(R.color.carnation_light);
int width = getWidth();
int height = getHeight(); //border
Paint stroke = new Paint(Paint.ANTI_ALIAS_FLAG);
stroke.setStrokeWidth(strokeWidth);
stroke.setStyle(Paint.Style.STROKE);
stroke.setColor(borderColor);
canvas.drawOval(new RectF(strokeWidth/2,strokeWidth/2,width-strokeWidth/2,height-strokeWidth/2),stroke); //save as new layer
int save = canvas.saveLayer(0,0,width,height,null,Canvas.ALL_SAVE_FLAG); //fill background
Paint fill = new Paint(Paint.ANTI_ALIAS_FLAG);
fill.setStyle(Paint.Style.FILL);
fill.setColor(fillColor);
canvas.drawOval(new RectF(strokeWidth - 1, strokeWidth - 1, width - strokeWidth + 1, height - strokeWidth + 1), fill); //mix rect
fill.setColor(percentColor);
fill.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
canvas.drawRect(0,(1-mPercent)*height,width,height,fill); //restore to canvas
canvas.restoreToCount(save); super.onDraw(canvas);
}
之前也查了不少文章,貌似没有看到多少着重说saveLayer的,还是我对照官方apidemos源码试出来的,希望对遇到同样疑问的朋友有所帮助!
2015/7/9 更新:
1. 要实现混合的两个图形,必须位于同一个layer上,经测试位于不同layer上是无法混合的,即使最后都绘制到了canvas上。
2. 不同的绘制顺序,可能有不同的效果,注意一下逻辑即可。
更新一段复杂点的例子
使用了两种混合方式SRC_IN和CLEAR,主要代码如下:
@Override
protected void onDraw(Canvas canvas) {
int width = getWidth();
int height = getHeight(); float strokeWidth = DimenUtils.dp2px(4);
float pointRadius = DimenUtils.dp2px(4);
float gap = DimenUtils.dp2px(4);
float monthRadius = height * 0.2f;
float textSize = DimenUtils.dp2px(14); int color = getResources().getColor(R.color.carnation);
int lightColor = getResources().getColor(R.color.carnation_light);
int lighterColor = getResources().getColor(R.color.carnation_lighter); float degree = 360*mRate; Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG); //new layer
int save = canvas.saveLayer(0, 0, width, height, null, Canvas.ALL_SAVE_FLAG); //draw percent
canvas.save();
float fillDistance = pointRadius+gap+strokeWidth/2;
canvas.translate(fillDistance,fillDistance);
RectF fillRect = new RectF(0,0,width-2*fillDistance,height-2*fillDistance);
paint.setColor(lightColor);
paint.setStyle(Paint.Style.FILL);
canvas.drawOval(fillRect,paint);
//mix rect
paint.setColor(color);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
canvas.drawRect(0, (1 - mPercent) * (height-2*fillDistance), width-2*fillDistance, height-2*fillDistance, paint);
canvas.restore(); //border
paint.setXfermode(null);
paint.setStrokeWidth(strokeWidth);
paint.setStyle(Paint.Style.STROKE);
paint.setColor(lighterColor);
RectF borderRect = new RectF(pointRadius,pointRadius,width-pointRadius,height-pointRadius);
canvas.drawOval(borderRect, paint);
paint.setColor(color);
canvas.drawArc(borderRect,270,degree,false,paint);
//draw point
canvas.save();
paint.setStyle(Paint.Style.FILL);
canvas.translate(width/2,height/2);
canvas.rotate(degree);
canvas.drawCircle(0,pointRadius-height/2,pointRadius,paint);
canvas.restore(); //draw month
canvas.save();
canvas.translate(width*0.7f,height*0.8f);
paint.setColor(Color.BLACK);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(gap);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
canvas.drawCircle(0,0,monthRadius+gap/2,paint);
paint.setXfermode(null);
paint.setStyle(Paint.Style.FILL);
paint.setColor(getResources().getColor(R.color.orange));
canvas.drawCircle(0,0,monthRadius,paint);
canvas.restoreToCount(save);
}