[Android][抽獎轉盤]②---繪製轉盤的獎項文字

weixin_34146805發表於2017-03-22
2953340-1f9a55d13e585b39.png
Paste_Image.png
   private void draw() {
        try {
            mCanvas=mHolder.lockCanvas();
            if(mCanvas!=null){
                //繪製背景
                drawBg();
                //繪製盤塊

                float tmpAngle=mStartAngle;
                float sweepAngle=360/mItemCount;

                for(int i=0;i<mItemCount;i++)
                {
                    mArcPaint.setColor(mColors[i]);

                    //繪製盤塊
                    //繪製圓弧
                    //第一個引數:繪製區域
                    //第二個引數:起始角度
                    //第三個引數:每個盤塊角度
                    //第三個引數(useCenter):要不要使用中間原點
                    //第四個引數:畫筆
                    mCanvas.drawArc(mRange,tmpAngle,sweepAngle,true,mArcPaint);
                    //繪製文字
                    drawText(tmpAngle,sweepAngle,mStrs[i]);

                    tmpAngle+=sweepAngle;
                }

            }
        } catch (Exception e) {
        }finally {
            if(mCanvas!=null)
            {
                mHolder.unlockCanvasAndPost(mCanvas);
            }
        }
    }

    /**
     * 繪製每個盤塊的文字(弧形)
     * @param tmpAngle
     * @param sweepAngle
     * @param mStr
     */
    private void drawText(float tmpAngle, float sweepAngle, String mStr) {
        Path path=new Path();
        path.addArc(mRange,tmpAngle,sweepAngle);

        float textWidth=mTextPaint.measureText(mStr);
        //水平偏移量 mRadius是直徑
        int hOffset= (int) (mRadius*Math.PI/mItemCount/2-textWidth/2);
        //垂直偏移量
        int vOffset=mRadius/2/6;

        //第三個引數:水平偏移量
        //第四個引數:垂直偏移量
        mCanvas.drawTextOnPath(mStr,path,hOffset,vOffset,mTextPaint);
    }

    /**
     * 繪製背景
     */
    private void drawBg() {
        mCanvas.drawColor(0xFFFFFFFF);
        mCanvas.drawBitmap(mBigBitmap,null,
                new Rect(mPadding/2,mPadding/2,getMeasuredWidth()-mPadding/2,
                        getMeasuredHeight()-mPadding/2),null);
    }

完整程式碼

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Rect;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.SurfaceHolder;
import android.view.SurfaceView;

/**
 * Created by TONG on 2017/3/22.
 */

public class LuckyPan extends SurfaceView implements SurfaceHolder.Callback,Runnable {

    private SurfaceHolder mHolder;
    private Canvas mCanvas;
    /**
     * 用於繪製的執行緒
     */
    private Thread t;
    /**
     * 執行緒的控制開關
     */
    private boolean isRunning;

    /**
     * 盤塊的獎項
     */
    private String[] mStrs=new String[]{"單反相機","IPAD","恭喜發財","IPHONE","服裝一套","恭喜發財"};
    /**
     * 盤塊的圖片
     */
    private int[] mImgs=new int[]{R.mipmap.danfan, R.mipmap.ipad, R.mipmap.f040, R.mipmap.iphone, R.mipmap.meizi, R.mipmap.f040};
    /**
     * 與圖片對應的bitmap陣列
     */
    private Bitmap[] mImgBitmap;

    private Bitmap mBigBitmap= BitmapFactory.decodeResource(getResources(),R.mipmap.bg2);

    /**
     * 盤塊的顏色
     */
        private int[] mColors =new int[]{0XFFFFC300, 0XFFF17E01, 0XFFFFC300, 0XFFF17E01, 0XFFFFC300, 0XFFF17E01
    };

    private int mItemCount=6;

    /**
     * 繪製盤塊的畫筆
     */
    private Paint mArcPaint;
    /**
     * 繪製文字的畫筆
     */
    private Paint mTextPaint;

    /**
     * 盤塊的背景圖
     * RectF與Rect區別:1、精度不一樣,Rect是使用int型別作為數值,RectF是使用float型別作為數值
     2、兩個型別提供的方法也不是完全一致
     */
    private RectF mRange=new RectF();
    /**
     * 整個盤塊的直徑
     */
    private int mRadius;

    /**
     * 文字大小 20sp
     */
    private float mTextSize= TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP,20,getResources().getDisplayMetrics());

    /**
     * 滾動的速度
     */
    private double mSpeed;
    /**
     *
     * 可能有兩個執行緒操作
     * 保證執行緒間變數的可見性
     */
    private volatile int mStartAngle=0;
    /**
     * 是否點選了停止按鈕
     */
    private boolean isShouldEnd;
    /**
     * 轉盤的中心位置
     */
    private int mCenter;
    /**
     * 這裡我們的padding直接以paddingLeft為準
     */
    private int mPadding;


    public LuckyPan(Context context) {
        this(context,null);
    }

    public LuckyPan(Context context, AttributeSet attrs) {
        super(context, attrs);
        mHolder=getHolder();
        mHolder.addCallback(this);
        //獲得焦點
        setFocusable(true);
        setFocusableInTouchMode(true);
        //設定常亮
        setKeepScreenOn(true);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        int width=Math.min(getMeasuredWidth(),getMeasuredHeight());

        mPadding=getPaddingLeft();
        //直徑
        mRadius=width-mPadding*2;
        //中心點
        mCenter=width/2;
        setMeasuredDimension(width,width);
    }

    @Override
    public void surfaceCreated(SurfaceHolder surfaceHolder) {

        //初始化繪製盤塊的畫筆
        mArcPaint=new Paint();
        //防止邊緣的鋸齒
        mArcPaint.setAntiAlias(true);
        //設定遞色
        mArcPaint.setDither(true);

        //初始化繪製文字的畫筆
        mTextPaint=new Paint();
        mTextPaint.setColor(0xffffffff);
        mTextPaint.setTextSize(mTextSize);

        //初始化盤塊繪製的範圍
        mRange=new RectF(mPadding,mPadding,mPadding+mRadius,mPadding+mRadius);

        //初始化圖片
        mImgBitmap=new Bitmap[mItemCount];

        for(int i=0;i<mImgBitmap.length;i++){
            mImgBitmap[i]=BitmapFactory.decodeResource(getResources(),mImgs[i]);
        }


        isRunning=true;
        t=new Thread(this);
        t.start();
    }

    @Override
    public void surfaceChanged(SurfaceHolder surfaceHolder, int i, int i1, int i2) {

    }

    @Override
    public void surfaceDestroyed(SurfaceHolder surfaceHolder) {
        isRunning=false;
    }

    @Override
    public void run() {
        //不斷進行繪製
        while (isRunning){
            long start=System.currentTimeMillis();
            draw();

            long end=System.currentTimeMillis();
            if(end-start<50)
            {
                try {
                    Thread.sleep(50-(end-start));
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
            }

        }
    }

    private void draw() {
        try {
            mCanvas=mHolder.lockCanvas();
            if(mCanvas!=null){
                //繪製背景
                drawBg();
                //繪製盤塊

                float tmpAngle=mStartAngle;
                float sweepAngle=360/mItemCount;

                for(int i=0;i<mItemCount;i++)
                {
                    mArcPaint.setColor(mColors[i]);

                    //繪製盤塊
                    //繪製圓弧
                    //第一個引數:繪製區域
                    //第二個引數:起始角度
                    //第三個引數:每個盤塊角度
                    //第三個引數(useCenter):要不要使用中間原點
                    //第四個引數:畫筆
                    mCanvas.drawArc(mRange,tmpAngle,sweepAngle,true,mArcPaint);
                    //繪製文字
                    drawText(tmpAngle,sweepAngle,mStrs[i]);

                    tmpAngle+=sweepAngle;
                }

            }
        } catch (Exception e) {
        }finally {
            if(mCanvas!=null)
            {
                mHolder.unlockCanvasAndPost(mCanvas);
            }
        }
    }

    /**
     * 繪製每個盤塊的文字(弧形)
     * @param tmpAngle
     * @param sweepAngle
     * @param mStr
     */
    private void drawText(float tmpAngle, float sweepAngle, String mStr) {
        Path path=new Path();
        path.addArc(mRange,tmpAngle,sweepAngle);

        float textWidth=mTextPaint.measureText(mStr);
        //水平偏移量 mRadius是直徑
        int hOffset= (int) (mRadius*Math.PI/mItemCount/2-textWidth/2);
        //垂直偏移量
        int vOffset=mRadius/2/6;

        //第三個引數:水平偏移量
        //第四個引數:垂直偏移量
        mCanvas.drawTextOnPath(mStr,path,hOffset,vOffset,mTextPaint);
    }

    /**
     * 繪製背景
     */
    private void drawBg() {
        mCanvas.drawColor(0xFFFFFFFF);
        mCanvas.drawBitmap(mBigBitmap,null,
                new Rect(mPadding/2,mPadding/2,getMeasuredWidth()-mPadding/2,
                        getMeasuredHeight()-mPadding/2),null);
    }
}

2953340-751f1df2f0b53f51.png
Paste_Image.png

相關文章