用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

廣告

      最近搞了個微信公衆號，爲各種程序員枯燥的寫碼生活添加一些生活調料，

      在等待編譯的過程看一篇美麗的圖文放鬆放鬆肌肉。希望各位看官賞臉關注一下

      公衆號：馬桶上的哲學

      讀哲名理，提升逼格