Android 通过图片进行自定义View绘制

通过Android自定义图表：ChartView和自定义View实现渲染
我们已经了解了如何简单的去绘制一个自定义View-图表和在如何去对一个自定义View中起部分内容进行渲染。
这次我们来了解一下，在自定义View的过程中如何通过图片来绘制一个View。

首先还是先看效果图

Images:

这个View其实是2张图片组成的，其中一张是背景图，一张是指针，现在我们传给这个View一个0-10的值，让这个指针指向我们给的这个值，需要注意的是，背景图给的刻度是不规则的。

那么如何实现这个效果呢，看，直接上代码：

View Code：

** * Created by JackWaiting on 2016/6/30. */public class RuleCircleView extends View {    private float mLeftPadding,mRightPadding,mTopPadding,mBottomPadding;  //上下左右边距    private float mRectFWidth,mRectFHeight;  //控件高与宽    private float mRadius;  //半径    private Bitmap mNum6VBitmap,mNumPointer;    private Rect mSrcRect,mDstRect;    private Matrix mPointMatrix;    private float mNum6VData = 0; //数据    private float mDegrees = 0; //指针角度    private float mScale = 0.7f;  //缩放比例    private float mFirstPoint = 0, mSecondPoint = 5.97f, mThirdPoint = 6.18f,   mFourthPoint = 6.43f, mFifthPoint = 6.94f, mSixthPoint = 7.45f, mMaxPoint = 10;  //每个区间的关键点    private int  mFristMaxDegrees = 270,mSecondMaxDegrees = 300,mThirdMaxDegrees = 330,mFourthMaxDegrees = 30,mFifthMaxDegrees = 90,mSixthMaxDegrees = 135;  //每个区间点的最大角度    private float mFristDegrees  = 45,mSecondDegrees= 30,mThirdDegrees = 30,mFourthDegrees = 60,mFifthDegrees = 60,mSixthDegrees = 45;  //每个区间的角度范围    public RuleCircleView(Context context) {        super(context);        init();    }    public RuleCircleView(Context context, AttributeSet attrs) {        super(context, attrs);        init();    }    public RuleCircleView(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        init();    }    //初始化    private void init() {        mLeftPadding = PixelUtil.dp2px(10, getContext());        mTopPadding = PixelUtil.dp2px(10, getContext());        mRightPadding = PixelUtil.dp2px(10, getContext());        mBottomPadding = PixelUtil.dp2px(10, getContext());        mRadius = PixelUtil.dp2px(150, getContext());        mNum6VBitmap= BitmapFactory.decodeResource(getResources(), R.mipmap.img_num_6v);        mNumPointer = BitmapFactory.decodeResource(getResources(), R.mipmap.img_num_pointer);    }    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        drawBitMapBackGround(canvas);        drawBitMapPointer(canvas);    }    //描绘指针    private void drawBitMapPointer(Canvas canvas) {        canvas.drawBitmap(mNumPointer, mPointMatrix, null);    }    //拿到界面传给我们的值    public void getNum6VData(float data) {        this.mNum6VData = data;    }    //描绘背景图    private void drawBitMapBackGround(Canvas canvas) {        canvas.drawBitmap(mNum6VBitmap, mSrcRect,mDstRect, null);    }    //把用户给的值换算成角度    private float getDegrees(float mNum6VData) {        if(mNum6VData>=mFirstPoint &&mNum6VData<=mSecondPoint){            return mFristMaxDegrees - ((mSecondPoint-mNum6VData)/mSecondPoint)*mFristDegrees;        }        else if(mNum6VData>mSecondPoint &&mNum6VData<=mThirdPoint){            return mSecondMaxDegrees - ((mThirdPoint-mNum6VData)/(mThirdPoint-mSecondPoint))*mSecondDegrees;        }        else if(mNum6VData>mThirdPoint &&mNum6VData<=mFourthPoint){            return mThirdMaxDegrees - ((mFourthPoint-mNum6VData)/(mFourthPoint-mThirdPoint))*mThirdDegrees;        }        else if(mNum6VData>mFourthPoint &&mNum6VData<=mFifthPoint){            float flagNum = mFourthMaxDegrees - ((mFifthPoint-mNum6VData)/(mFifthPoint-mFourthPoint))*mFourthDegrees;            //如果是负数，换算成对应的正数            if(flagNum<0){                flagNum = 360+flagNum;            }            return flagNum;        }        else if(mNum6VData>mFifthPoint &&mNum6VData<=mSixthPoint){            return mFifthMaxDegrees - ((mSixthPoint-mNum6VData)/(mSixthPoint-mFifthPoint))*mFifthDegrees;        }        else if(mNum6VData>mSixthPoint &&mNum6VData<=mMaxPoint){            return mSixthMaxDegrees - ((mMaxPoint-mNum6VData)/(mMaxPoint-mSixthPoint))*mSixthDegrees;        }        return 0;    }    @Override    protected void onSizeChanged(int w, int h, int oldw, int oldh) {        super.onSizeChanged(w, h, oldw, oldh);        mRectFWidth = w - mLeftPadding - mRightPadding;        mRectFHeight = h  - mTopPadding - mBottomPadding;        mSrcRect = new Rect(0, 0,mNum6VBitmap.getWidth(), mNum6VBitmap.getHeight());// BitMap源区域        mDstRect = new Rect((int)(mRectFWidth/2-mRadius),(int) (mRectFHeight/2-mRadius),(int)(mRectFWidth/2+mRadius), (int)(mRectFHeight/2+mRadius));// BitMap目标区域        mPointMatrix = new Matrix();        mDegrees= getDegrees(mNum6VData);        mPointMatrix.postRotate(mDegrees, mNumPointer.getWidth()/2,mNumPointer.getHeight()*12/13);        mPointMatrix.postScale(mScale,mScale);        mPointMatrix.postTranslate(mRectFWidth/2-mNumPointer.getWidth()/2*mScale,getHeight()/2 - mNumPointer.getHeight()*mScale);    }}

相信看了前面2篇的朋友在看这个代码，已经没多大压力了，这里多出了一个知识点是Matrix(),由于网上的内容已经讲解的很好了，这里就不重复了，推荐一个链接Android Matrix理论与应用详解，配合上面的注释，你可以下载源码体验一般，使用Bitmap进行View绘制，有时候会很省事。

以下是代码下载地址：

Github下载地址：https://github.com/JackWaiting/ChartView