浅谈Android Canvas绘图类

android中的绘图类主要涉及Canvas和Paint两个类。Canvas相当于画布,而Paint相当于画笔。有了画布和画笔,就可以进行绘图了。
要绘图,首先得调整画笔,待画笔调整好之后,再将图像绘制到画布上,这样才可以显示在手机屏幕上。Android 中的画笔是 Paint类,Paint 中包含了很多方法对其属性进行设置,主要方法如下:

setAntiAlias: 设置画笔的锯齿效果。
setColor: 设置画笔颜色
setARGB: 设置画笔的a,r,p,g值。
setAlpha: 设置Alpha值
setTextSize: 设置字体尺寸。
setStyle: 设置画笔风格,空心或者实心。
setStrokeWidth: 设置空心的边框宽度。
getColor: 得到画笔的颜色
getAlpha: 得到画笔的Alpha值。
首先我们举一个例子来了解一下这些属性
下面这张图片是一张圆形进度条 ,那么我们该怎么绘制他呢?
这里写图片描述
1.首先准备好3个画笔Paint类 分别为

    private Paint mPaintBackground; // 绘制背景圆环的画笔
    private Paint mPaintProgress; // 绘制背景进度的画笔
    private Paint mPaintText; // 绘制背景字体的画笔

另外还有一些圆环的基本属性

    private int bgColor = Color.WHITE; // 背景圆环的颜色
    private int textColor = Color.CYAN; // 字体的颜色
    private int progressColor = Color.CYAN; // 进度条的颜色
    private float mStrokeWidth = 10;// 背景圆环的宽度
    private float mRadius = 60; // 背景圆环的半径
    private RectF rectPro;// 进度条的绘制外接矩形
    private int mProgress = 0; // 当前进度
    private int mMaxProgress = 100; // 最大进度

接下来 初始化我们的画笔

mPaintBackground = new Paint();
        mPaintBackground.setColor(bgColor);
        // 设置抗锯齿
        mPaintBackground.setAntiAlias(true);
        // 设置防抖动
        mPaintBackground.setDither(true);
        // 设置样式为环形
        mPaintBackground.setStyle(Style.STROKE);
        // 设置环形的宽度
        mPaintBackground.setStrokeWidth(mStrokeWidth);

        mPaintProgress = new Paint();
        mPaintProgress.setColor(progressColor);
        // 设置抗锯齿
        mPaintProgress.setAntiAlias(true);
        // 设置防抖动
        mPaintProgress.setDither(true);
        // 设置样式为环形
        mPaintProgress.setStyle(Style.STROKE);
        // 设置环形的宽度
        mPaintProgress.setStrokeWidth(mStrokeWidth);

        mPaintText = new Paint();
        mPaintText.setColor(textColor);
        // 设置抗锯齿
        mPaintText.setAntiAlias(true);
        mPaintText.setTextAlign(Align.CENTER);
        mPaintText.setTextSize(40);

画笔的准备工作已经做完了,接下来我们使用Canvas画布对象。
下图中列举了API中Canvas绘图的各种方法。
这里写图片描述
绘制上图中的进度条 我们需要用到drawCircle方法绘制圆;drawArc绘制圆弧;drawText方法绘制字体。

@Override
    protected void onDraw(Canvas canvas) {
        float angle = mProgress / (mMaxProgress * 1.0f) * 360; // 圆弧角度
        initRect();
        //绘制背景圆环
        canvas.drawCircle(mWidth / 2, mHeight / 2, mRadius,
                mPaintBackground);
        //绘制进度条
        canvas.drawArc(rectPro, -90, angle, false, mPaintProgress);
        //绘制字体
        canvas.drawText(mProgress + "%", mWidth / 2, mHeight / 2, mPaintText);
        if (mProgress < mMaxProgress) {
            mProgress += 2;
            invalidate();
        }

最终效果图为:
这里写图片描述
想知道关于绘制上图中自定义的环形进度条的详细实现,请转到
http://blog.csdn.net/a253664942/article/details/45115407

发布了61 篇原创文章 · 获赞 14 · 访问量 15万+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章