用MaskFilter画抽奖大转盘Demo

1、前言

MaskFilter类可以为Paint分配边缘效果。

对MaskFilter的扩展可以对一个Paint边缘的alpha通道应用转换。

Android包含了下面几种MaskFilter：BlurMaskFilter  指定了一个模糊的样式和半径来处理Paint的边缘。EmbossMaskFilter  指定了光源的方向和环境光强度来添加浮雕效果。

使用方法：

 // 设置光源的方向    
  float[] direction = new float[]{ 1, 1, 1 };    
 //设置环境光亮度    
  float light = 0.4f;    
 // 选择要应用的反射等级    
  float specular = 6;    
 // 向mask应用一定级别的模糊    
 float blur = 3.5f;    
 EmbossMaskFilter emboss=new EmbossMaskFilter(direction,light,specular,blur);    
    
// 应用mask    
myPaint.setMaskFilter(emboss); 

在Sdk 自带的apidemos里有很好的学习例子，两种效果图如下，有兴趣可以去细究

2、大转盘完成的效果图为

3、简单思路

先画一个半透明的背景，然后画不同颜色的扇形，画好扇形后在水平的右边画文字，然后在把文字旋转到对应的颜色条上，不明白的可以看一下Canvas的旋转。画完背景后就可以叠加两立体效果了，叠加完我们就开始画内园和箭头了，先画一个小园，然后我们以小园的直径为三角行的底边画一个等腰三角型，当然这个三角形的高要大于小园的半径，就可以画出一个带小箭头的圆了。后面只用旋转这个三角形的角度就可以简单的做成是一个旋转的小动画了。

4、具体核心代码

package com.spring.slider;

import android.app.Activity;
import android.content.Context;
import android.graphics.BlurMaskFilter;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.ColorMatrixColorFilter;
import android.graphics.EmbossMaskFilter;
import android.graphics.MaskFilter;
import android.graphics.Paint;
import android.graphics.PorterDuffXfermode;
import android.graphics.Paint.Style;
import android.graphics.PorterDuff.Mode;
import android.graphics.Path;
import android.graphics.RadialGradient;
import android.graphics.RectF;
import android.graphics.Shader.TileMode;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.View;

public class SlyderView extends View{

    public SlyderView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context);
    }
    public SlyderView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }
    public SlyderView(Context context) {
        super(context);
        init(context);
    }

    /**
     * 屏幕宽度
     */
    private int screenW;
    /**
     * 屏幕的高度
     */
    private int screenH;
    /**
     * 分割的度数
     */
    private int [] drgrees = {20,50,40,90,70,40,50};
    /***
     * 分割的文字
     */
    private String [] strs = {"level1","level2","level3","level4","level5","level6","level7"};
    /**
     * 分割的颜色
     */
    private int [] colos = new int[] { 0xfed9c960, 0xfe57c8c8, 0xfe9fe558, 0xfef6b000, 0xfef46212, 0xfecf2911, 0xfe9d3011 };
    /**
     * 画笔
     */
    private Paint paint;
    /**
     * 文字的大小
     */
    private float textSize  = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 15, getResources().getDisplayMetrics());
    /**
     * 文字的颜色
     */
    private int textcolor = Color.WHITE;
    /**
     * 园的半径
     */
    private float radius = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 100, getResources().getDisplayMetrics());
    /**
     * 画文字的距离
     */
    private float textdis = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 80, getResources().getDisplayMetrics());
    /**
     * 画箭头的大小
     */
    private float roketSize = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 10, getResources().getDisplayMetrics());
    
    private float initDegress = 0;
    /**
     * 圆心
     */
    private float centerX;
    /**
     * 圆心
     */
    private float centerY;
    /**
     * 立体边缘
     */
    private MaskFilter filter = new EmbossMaskFilter(new float[] { 1, 1, 1 },
            0.4f, 6, 3.5f);  
    
    private MaskFilter outerFilter = new BlurMaskFilter(10, BlurMaskFilter.Blur.OUTER);
    
    private MaskFilter innerFilter = new BlurMaskFilter(10, BlurMaskFilter.Blur.INNER);
    @SuppressWarnings("deprecation")
    private void init(Context context){
        paint = new Paint();
        paint.setAntiAlias(true);
        paint.setStyle(Style.FILL);
        paint.setColor(Color.WHITE);
        screenW = ((Activity)context).getWindowManager().getDefaultDisplay().getWidth();
        screenH = ((Activity)context).getWindowManager().getDefaultDisplay().getHeight();
        
        int[] colores = new int[3];
        colores[0] = Color.rgb(0xfF, 0x99, 0x00);
        colores[1] = Color.rgb(0xff, 0xff, 0x00);
        colores[2] = Color.rgb(0xff, 0x99, 0x00);
        float[] positions = new float[3];
        positions[0] = 0.0f;
        positions[1] = 0.5f;
        positions[2] = 1.0f;
        
        gradient = new RadialGradient(centerX, centerY, radius/5, colores, positions, TileMode.CLAMP);
        
    }
    /**
     * 绘制三角箭头
     */
    private Path path = new Path(); 
    /**
     * 绘制矩形框
     */
    private RectF oval;
    
    /**
     * 外圆内阴影矩阵
     */
    private ColorMatrixColorFilter colorFilter = new ColorMatrixColorFilter(new float[]{
            1,0,0,0,0,
            0,1,0,0,0,
            0,0,1,0,0,
            0,0,0,-1,255
    });
    
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        centerX = screenW/2;
        centerY = screenH/2;
        oval = new RectF(centerX-radius,centerY-radius,centerX+radius,centerY+radius);
        float start = 0;
        
        paint.setColor(Color.rgb(0xdd, 0xdd, 0xdd));
        paint.setAlpha(127);
        canvas.drawCircle(centerX, centerY, radius+10, paint);
        paint.setAlpha(255);
        
        //画扇形
        paint.setAntiAlias(true);
        for(int i=0;i<drgrees.length;i++){
            float sweepAngle = drgrees[i];
            float startAngle = start;
            paint.setColor(colos[i%colos.length]);
            canvas.drawArc(oval, startAngle, sweepAngle, true, paint);
            start += drgrees[i];
        }
        
        //画文字
        paint.setColor(textcolor);
        paint.setAntiAlias(true);
        paint.setTextSize(textSize);
        paint.setTextAlign(Paint.Align.RIGHT);
        start = 0;
        for(int i=0;i<drgrees.length;i++){
            canvas.save();
            canvas.rotate(start+drgrees[i]/2, centerX, centerY);
            canvas.drawText(strs[i], centerX+textdis, centerY, paint);
            canvas.restore();
            start += drgrees[i];
        }
        int saveCount = canvas.save();

        //画外层立体效果
        paint.setColorFilter(colorFilter);
        canvas.saveLayer(oval,paint,Canvas.ALL_SAVE_FLAG);
        paint.setColorFilter(null);
        canvas.drawARGB(255, 0, 0, 0);
        paint.setXfermode(new PorterDuffXfermode(Mode.CLEAR));
        canvas.drawCircle(centerX, centerY, radius, paint);
        paint.setXfermode(null);
        paint.setMaskFilter(innerFilter);
        paint.setColor(Color.argb(0xff, 0, 0, 0));
        canvas.drawCircle(centerX, centerY, radius, paint);
        paint.setMaskFilter(null);
        canvas.restoreToCount(saveCount);
        
        //画内圆和内园效果
        canvas.save();
        paint.setColor(Color.argb(0xff, 0, 0, 0));
        paint.setAntiAlias(true);
        paint.setMaskFilter(outerFilter);
        canvas.rotate(initDegress, centerX, centerY);
        canvas.drawCircle(centerX, centerY, radius/3, paint);
        paint.setMaskFilter(null);
        paint.setColor(Color.WHITE);
        canvas.drawCircle(centerX, centerY, radius/3, paint);
        
        //画三角型叠加当箭头
        path.moveTo(centerX-radius/3, centerY);
        path.lineTo(centerX, centerY-radius/3-roketSize);
        path.lineTo(centerX+radius/3, centerY);
        path.close();
        canvas.drawPath(path, paint);
        canvas.restore();

        paint.setMaskFilter(filter);
        paint.setColor(Color.GREEN);
        paint.setShader(gradient);
        canvas.drawCircle(centerX, centerY, radius/5, paint);
        paint.setMaskFilter(null);
        paint.setShader(null);
        //重绘调整三角的指向达到滚动的效果，现实项目中可不能这样用的，效率太低下了，拆分View用动画完成滚动才是王道
        if(isRunning){
            if(initDegress>=360){
                initDegress = 0;
            }
            initDegress +=4;
            invalidate();
        }
        if(isStoping){
            if(initDegress<=360){
                initDegress+=4;
                invalidate();
            }else{
                if(initDegress-360<stop_degress){
                    initDegress+=2;
                    invalidate();
                }
            }
        }
        
    }
    
    private boolean isRunning = false;
    
    private boolean isStoping = false;
    
    private int stop_degress =90;

    /**
     * 渐变
     */
    private RadialGradient gradient;
    
    public void play(){
        isRunning = true;
        invalidate();
    }
    
    public void stop(int count){
        for(int i =0;i<=count;i++){
            if(i == count){
                stop_degress +=drgrees[i]/2; 
            }else{
                stop_degress +=drgrees[i]; 
            }
        }
        isStoping = true;
        isRunning = false;
        invalidate();
    }
    
}

5、后续

上面的实现方式还是有点不理想，特别是旋转的动画，这里是用重绘实现的。每次绘制都会耗费大量的资源，后续用旋转的动画来改进这个大转盘。

有时候这个MaskFilter会不起作用，解决看这个http://stackoverflow.com/questions/15690873/emboss-mask-filter-not-working

工程下载地址：

http://download.csdn.net/detail/hxc2008q/6703111

广告

      最近搞了个微信公众号，为各种程序员枯燥的写码生活添加一些生活调料，

      在等待编译的过程看一篇美丽的图文放松放松肌肉。希望各位看官赏脸关注一下

      公众号：马桶上的哲学

      读哲名理，提升逼格