关闭

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

标签: androidbitmap自定义ViewChartView
1059人阅读 评论(0) 收藏 举报
分类:

通过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

1
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

Android实现自定义view---绘制图片

主要原理是:extends view重载onDrow(),需要一bitmap,重载view,在 canvas上画临时bmp,当按下确定的时候按下    画到real_bmp上,其他的跟前面的基本上没...
  • a11123939
  • a11123939
  • 2014-05-04 18:21
  • 1331

android自定义View绘制几何图形

Android利用canvas画各种图形(点、直线、弧、圆、椭圆、文字、矩形、多边形、曲线、圆角矩形) 1、首先说一下canvas类: Class Overview The Canvas cla...
  • qq_34308476
  • qq_34308476
  • 2016-06-12 14:19
  • 2628

Android的绘图机制学习---自定义View

一、自定义View的使用: 通常我们为界面做UI设计时使用xml中的布局文件,这些布局文件及方法是androidAPI中所提供的。如果我们要实现一些复杂的布局或者一些特别的效果这样就会用到自定义V...
  • u011521890
  • u011521890
  • 2015-11-28 18:39
  • 811

android自定义View实现图片的绘制、旋转、缩放

1、图片 把一张JPG图片改名为i
  • wljun739
  • wljun739
  • 2014-07-11 13:20
  • 9327

Android 自定义View 绘制正N边形

从我的 "慕课-手记" 中搬过来   作者: stone86  链接:http://www.imooc.com/article/14599 来源:慕课网 支付宝芝麻信用分-分析...
  • jjwwmlp456
  • jjwwmlp456
  • 2016-12-13 10:53
  • 774

android自定义View绘制几何图形

1、MainActivity.class类 包
  • wljun739
  • wljun739
  • 2014-07-11 10:03
  • 4378

Android自定义View(一)View绘制流程以及invalidate()等相关方法分析

转自:http://blog.csdn.net/yanbober/article/details/46128379/      【工匠若水 http://blog.csdn.net/yanbober】...
  • TokgoLiang
  • TokgoLiang
  • 2016-01-08 10:18
  • 1397

Android使用自定义View继承SurfaceView实现动态折线图的绘制

转载请标明出处: 请先看效果: 废话不多说,直接上代码: 一、layout:activity_main <LinearLayout xmlns:android="http://schemas.an...
  • klxh2009
  • klxh2009
  • 2016-03-13 19:47
  • 4467

Android View 绘制流程 及 自定义View

View绘制流程调用链图 记清楚函数调用的顺序才能准确地进行调用。 根据调用链,可将整个绘制过程分为三部分:Measure - Layout - Draw Measu...
  • asdf717
  • asdf717
  • 2016-09-19 14:29
  • 579

Android应用自定义View绘制方法手册

这篇迟迟难产的文章算是对2015前半年的一个交代吧,那时候有一哥们要求来一发Android Canvas相关总结,这哥们还打赏了,实在不好意思,可是这事一放就给放忘了,最近群里小伙伴催着说没更新博客,...
  • yanbober
  • yanbober
  • 2016-04-04 13:09
  • 21790
    个人资料
    • 访问:254864次
    • 积分:2586
    • 等级:
    • 排名:第16318名
    • 原创:34篇
    • 转载:0篇
    • 译文:2篇
    • 评论:67条
    博客专栏
    文章分类
    最新评论