4. 2D绘制与控件绘制

绘制基本图形和文本

绘制图形和文本的基本方法

drawPoint(绘制点)、drawLine(绘制直线)、drawCircle(绘制圆) drawArc(绘制弧)、drawText(绘制文本) 

package cn.eoe.draw;

import android.app.Activity;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.graphics.Paint.Style;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;

public class Main extends Activity {
    class MyView extends View {
        private Paint paint1 = new Paint();
        private Paint paint2 = new Paint();
        private Paint paint3 = new Paint();
        private boolean useCenter = true;
        private float[] textSizeArray = new float[] { 15, 18, 21, 24, 27 };

        @Override
        public boolean onTouchEvent(MotionEvent event) {
            if (useCenter) {
                useCenter = false;
                paint1.setColor(Color.RED);
                paint2.setColor(Color.BLACK);
                paint3.setColor(Color.GREEN);

                paint1.setStrokeWidth(6);
                paint2.setStrokeWidth(4);
                paint3.setStrokeWidth(2);

            } else {
                useCenter = true;
                paint1.setColor(Color.BLACK);
                paint2.setColor(Color.RED);
                paint3.setColor(Color.BLUE);
                paint1.setStrokeWidth(2);
                paint2.setStrokeWidth(4);
                paint3.setStrokeWidth(6);
            }
            for (int i = 0; i < textSizeArray.length / 2; i++) {
                float textSize = textSizeArray[i];

                textSizeArray[i] = textSizeArray[textSizeArray.length - i - 1];
                textSizeArray[textSizeArray.length - i - 1] = textSize;
            }

            invalidate();
            return super.onTouchEvent(event);
        }

        public MyView(Context context) {
            super(context);
            setBackgroundColor(Color.WHITE);

            paint1.setColor(Color.BLACK);
            paint1.setStrokeWidth(2);
            paint2.setColor(Color.RED);
            paint2.setStrokeWidth(4);
            paint3.setColor(Color.BLUE);
            paint3.setStrokeWidth(6);

        }

        private void drawLinesExt(Canvas canvas, float[] pts, Paint paint) {

            float[] points = new float[pts.length * 2 - 4];
            for (int i = 0, j = 0; i < pts.length; i = i + 2) {
                points[j++] = pts[i];
                points[j++] = pts[i + 1];

                if (i > 1 && i < pts.length - 2) {
                    points[j++] = pts[i];
                    points[j++] = pts[i + 1];
                }
            }

            canvas.drawLines(points, paint);
        }

        @Override
        protected void onDraw(Canvas canvas) {
            canvas.drawPoint(60, 120, paint3);
            canvas.drawPoint(70, 130, paint3);
            canvas.drawPoints(new float[] { 70, 140, 75, 145, 75, 160 }, paint2);
            // canvas.drawPoints(new float[]
            // { 70, 140, 75, 145, 75, 160 }, 1,4,paint2);

            canvas.drawLine(10, 10, 300, 10, paint1);
            canvas.drawLine(10, 30, 300, 30, paint2);
            canvas.drawLine(10, 50, 300, 50, paint3);
            drawLinesExt(canvas, new float[] { 10, 70, 120, 70, 120, 170, 10,
                    170, 10, 70 }, paint2);
            drawLinesExt(canvas, new float[] { 25, 85, 105, 85, 105, 155, 25,
                    155, 25, 85 }, paint3);
            drawLinesExt(canvas, new float[] { 160, 70, 230, 150, 170, 155,
                    160, 70 }, paint2);
            paint2.setStyle(Style.STROKE);
            canvas.drawCircle(260, 110, 40, paint2);
            paint2.setStyle(Style.FILL);
            canvas.drawCircle(260, 110, 30, paint2);

            RectF rectF = new RectF();
            rectF.left = 30;
            rectF.top = 190;
            rectF.right = 120;
            rectF.bottom = 280;

            canvas.drawArc(rectF, 0, 200, useCenter, paint2);

            rectF.left = 140;
            rectF.top = 190;
            rectF.right = 280;
            rectF.bottom = 290;
            paint2.setStyle(Style.STROKE);
            canvas.drawArc(rectF, 0, 360, useCenter, paint2);

            rectF.left = 160;
            rectF.top = 190;
            rectF.right = 260;
            rectF.bottom = 290;
            paint3.setStyle(Style.STROKE);
            canvas.drawArc(rectF, 0, 360, useCenter, paint3);

            float y = 0;
            for (int i = 0; i < textSizeArray.length; i++) {
                paint1.setTextSize(textSizeArray[i]);

                paint1.setColor(Color.BLUE);
                canvas.drawText("Android（宽度：" + paint1.measureText("Android")
                        + "）", 20, 315 + y, paint1);
                y += paint1.getTextSize() + 5;
            }
            paint1.setTextSize(22);

        }
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);
        setContentView(new MyView(this));
    }
}

绘制图像

绘制图形两种方法：

protected void onDraw(Canvas canvas){

     // 方法一

     canvas.drawBitmap(bitmap, 10, 10, null);

    // 方法二
    drawable.draw(canvas);

} 

package cn.eoe.draw.bitmap;

import android.app.Activity;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.drawable.Drawable;
import android.os.Bundle;

import android.view.View;

public class Main extends Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(new MyView(this));
    }

    private static class MyView extends View {
        private Bitmap bitmap1;
        private Bitmap bitmap2;
        private Bitmap bitmap3;
        private Bitmap bitmap4;
        private Drawable drawable;

        public MyView(Context context) {
            super(context);
            setBackgroundColor(Color.WHITE);
            java.io.InputStream is = context.getResources().openRawResource(
                    R.drawable.panda);

            BitmapFactory.Options opts = new BitmapFactory.Options();
            opts.inSampleSize = 2;
            bitmap1 = BitmapFactory.decodeStream(is, null, opts);

            is = context.getResources().openRawResource(R.drawable.tiger);
            bitmap2 = BitmapFactory.decodeStream(is);

            int w = bitmap2.getWidth();
            int h = bitmap2.getHeight();
            int[] pixels = new int[w * h];
            bitmap2.getPixels(pixels, 0, w, 0, 0, w, h);
            bitmap3 = Bitmap.createBitmap(pixels, 0, w, w, h,
                    Bitmap.Config.ARGB_8888);
            bitmap4 = Bitmap.createBitmap(pixels, 0, w, w, h,
                    Bitmap.Config.ARGB_4444);

            drawable = context.getResources().getDrawable(R.drawable.button);
            drawable.setBounds(50, 350, 180, 420);
        }

        @Override
        protected void onDraw(Canvas canvas) {

            canvas.drawBitmap(bitmap1, 10, 10, null);
            canvas.drawBitmap(bitmap2, 10, 200, null);
            canvas.drawBitmap(bitmap3, 110, 200, null);
            canvas.drawBitmap(bitmap4, 210, 200, null);
            drawable.draw(canvas);

        }
    }
}

绘制指针时钟控件 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="fill_parent"
    android:layout_height="fill_parent" android:background="#FFF"
    android:gravity="center">
    <cn.eoe.handclock.widget.HandClock
        android:layout_width="wrap_content" android:layout_height="wrap_content"
        clockImageSrc="@drawable/clock1" scale="0.75" handCenterWidthScale="0.477"
        handCenterHeightScale="0.512" minuteHandSize="54" hourHandSize="40"/>
</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="fill_parent"
    android:layout_height="fill_parent" android:background="#FFF"
    android:gravity="center_horizontal">
    <cn.eoe.handclock.widget.HandClock
        android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:layout_marginTop="10dp" clockImageSrc="@drawable/clock2"
        scale="0.3" handCenterWidthScale="0.5" handCenterHeightScale="0.5"
        minuteHandSize="154" hourHandSize="100" />
    <cn.eoe.handclock.widget.HandClock
        android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:layout_marginTop="10dp" clockImageSrc="@drawable/clock3"
        scale="0.3" handCenterWidthScale="0.5" handCenterHeightScale="0.5"
        minuteHandSize="154" hourHandSize="100" />
</LinearLayout>
 

package cn.eoe.handclock.widget;

import java.util.Calendar;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Rect;
import android.os.Handler;
import android.util.AttributeSet;
import android.view.View;

public class HandClock extends View implements Runnable {
    private int clockImageResourceId;
    private Bitmap bitmap;
    private float scale;
    private float handCenterWidthScale;
    private float handCenterHeightScale;
    private int minuteHandSize;
    private int hourHandSize;
    private Handler handler = new Handler();

    @Override
    public void run() {
        // 重新绘制View
        invalidate();
        // 重新设置定时器，在60秒后调用run方法
        handler.postDelayed(this, 60 * 1000);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        // 根据图像的实际大小等比例设置View的大小
        setMeasuredDimension((int) (bitmap.getWidth() * scale),
                (int) (bitmap.getHeight() * scale));
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Paint paint = new Paint();
        Rect src = new Rect();
        Rect target = new Rect();
        src.left = 0;
        src.top = 0;
        src.right = bitmap.getWidth();
        src.bottom = bitmap.getHeight();

        target.left = 0;
        target.top = 0;
        target.bottom = (int) (src.bottom * scale);
        target.right = (int) (src.right * scale);
        // 画表盘图像
        canvas.drawBitmap(bitmap, src, target, paint);
        // 计算表盘中心点的横纵坐标
        float centerX = bitmap.getWidth() * scale * handCenterWidthScale;
        float centerY = bitmap.getHeight() * scale * handCenterHeightScale;
        // 表表盘中心点画一个半径为5的实心圆圈
        canvas.drawCircle(centerX, centerY, 5, paint);
        // 设置分针为3个象素粗
        paint.setStrokeWidth(3);
        Calendar calendar = Calendar.getInstance();
        int currentMinute = calendar.get(Calendar.MINUTE);
        int currentHour = calendar.get(Calendar.HOUR);
        // 计算分针和时间的弧度
        double minuteRadian = Math
                .toRadians((360 - ((currentMinute * 6) - 90)) % 360);
        double hourRadian = Math.toRadians((360 - ((currentHour * 30) - 90))
                % 360 - (30 * currentMinute / 60));
        // 在表盘上画分针
        canvas.drawLine(centerX, centerY, (int) (centerX + minuteHandSize
                * Math.cos(minuteRadian)), (int) (centerY - minuteHandSize
                * Math.sin(minuteRadian)), paint);
        // 设置实针为4个象素粗
        paint.setStrokeWidth(4);
        // 在表盘上画时针
        canvas.drawLine(centerX, centerY,
                (int) (centerX + hourHandSize * Math.cos(hourRadian)),
                (int) (centerY - hourHandSize * Math.sin(hourRadian)), paint);
    }

    public HandClock(Context context, AttributeSet attrs) {
        super(context, attrs);
        // 读取相应的属性值
        clockImageResourceId = attrs.getAttributeResourceValue(null,
                "clockImageSrc", 0);
        if (clockImageResourceId > 0)
            bitmap = BitmapFactory.decodeResource(getResources(),
                    clockImageResourceId);
        scale = attrs.getAttributeFloatValue(null, "scale", 1);
        handCenterWidthScale = attrs.getAttributeFloatValue(null,
                "handCenterWidthScale", bitmap.getWidth() / 2);
        handCenterHeightScale = attrs.getAttributeFloatValue(null,
                "handCenterHeightScale", bitmap.getHeight() / 2);
        // 在读取分针和时针长度后，将其值按图像的缩放比例进行缩放
        minuteHandSize = (int) (attrs.getAttributeIntValue(null,
                "minuteHandSize", 0) * scale);
        hourHandSize = (int) (attrs.getAttributeIntValue(null, "hourHandSize",
                0) * scale);
        int currentSecond = Calendar.getInstance().get(Calendar.SECOND);
        // 将定时器设在0分时执行run方法
        handler.postDelayed(this, (60 - currentSecond) * 1000);
    }

    @Override
    protected void onDetachedFromWindow() {
        super.onDetachedFromWindow();
        // 删除回调类
        handler.removeCallbacks(this);
    }

}