自定义View绘制形, 圆形, 三角形, 扇形, 椭圆, 曲线,文字和图片的坐标讲解

原文：http://blog.csdn.net/qq_26787115/article/details/50466655

1.矩形——RectActivity

好的，上面写ListView的代码是不是很简单？拿我们新建一个RectActivity去画点了，首先我们要新建一个RectView继承View

package com.lgl.view.view;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;

/**
 * 矩形
 * Created by LGL on 2016/1/7.
 */
public class RectView extends View {

//无参
public RectView(Context context) {
super(context);
    }

//有参
public RectView(Context context, AttributeSet attrs) {
super(context, attrs);
    }

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);

// 创建画笔
        Paint p = new Paint();
//设置实心
        p.setStyle(Paint.Style.FILL);
// 设置红色
        p.setColor(Color.BLACK);
// 设置画笔的锯齿效果
        p.setAntiAlias(true);
//绘制
        canvas.drawRect(50, 100, 300, 300, p);

    }
}

 
 

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43

大致的坐标思维

截图

1.圆形——CircleActivity

我们还是新建一个CircleActivity去画点了，首先我们要新建一个CircleView继承View

package com.lgl.view.view;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;
import android.view.WindowManager;

/**
 * 圆
 * Created by LGL on 2016/1/7.
 */
public class CircleView extends View {

int width;
int height;

//无参
public CircleView(Context context) {
super(context);
        init();
    }

//有参
public CircleView(Context context, AttributeSet attrs) {
super(context, attrs);
        init();
    }

private void init() {
//获取屏幕的宽高
//Android绘图机制（一）——自定义View的基础属性和方法里面有讲
        WindowManager wm = (WindowManager) getContext()
                .getSystemService(Context.WINDOW_SERVICE);

        width = wm.getDefaultDisplay().getWidth();
        height = wm.getDefaultDisplay().getHeight();
    }

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);

        Paint p = new Paint();
        p.setColor(Color.BLACK);
// 设置画笔的锯齿效果
        p.setAntiAlias(true);
        canvas.drawCircle(width / 2, height / 2, width / 2, p);
    }
}

 
 

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53

大致的坐标思维

截图

3.三角形——TrigonActivity

我们还是新建一个TrigonActivity去画点了，首先我们要新建一个trigonView继承View

package com.lgl.view.view;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.util.AttributeSet;
import android.view.View;

/**
 * 三角形
 * Created by LGL on 2016/1/7.
 */
public class TrigonView extends View {

//无参
public TrigonView(Context context) {
super(context);
    }

//有参
public TrigonView(Context context, AttributeSet attrs) {
super(context, attrs);
    }

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);

        Paint p = new Paint();
        p.setColor(Color.BLACK);
//实例化路径
        Path path = new Path();
        path.moveTo(80, 200);// 此点为多边形的起点
        path.lineTo(120, 250);
        path.lineTo(80, 250);
        path.close(); // 使这些点构成封闭的多边形
        canvas.drawPath(path, p);

    }
}

 
 

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43

大致的坐标思维

截图

4.扇形——SectorActivity

package com.lgl.view.view;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;

/**
 * 扇形
 * Created by LGL on 2016/1/8.
 */
public class SectorView extends View {

public SectorView(Context context) {
super(context);
    }

public SectorView(Context context, AttributeSet attrs) {
super(context, attrs);
    }

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
// 创建画笔
        Paint p = new Paint();
        p.setColor(Color.BLACK);
        RectF rectF = new RectF(60, 100, 200, 240);
        canvas.drawArc(rectF, 200, 130, true, p);
    }
}

 
 

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35

大致的坐标思维

canvas.drawArc(rect,90,200,true,p);

截图

5.椭圆——OvalActivity

package com.lgl.view.view;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;

/**
 * 椭圆
 * Created by LGL on 2016/1/8.
 */
public class OvalView extends View {

public OvalView(Context context) {
super(context);
    }

public OvalView(Context context, AttributeSet attrs) {
super(context, attrs);
    }

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);

// 创建画笔
        Paint p = new Paint();
        p.setColor(Color.BLACK);
        RectF rectF = new RectF(60, 100, 200, 240);
        rectF.set(210,100,250,130);
        canvas.drawOval(rectF, p);
    }
}

 
 

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37

椭圆的思路和扇形是一样的，这里就不演示了

截图

6.曲线——PathActivity

package com.lgl.view.view;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.util.AttributeSet;
import android.view.View;

/**
 * Created by LGL on 2016/1/8.
 */
public class PathView extends View {

public PathView(Context context) {
super(context);
    }

public PathView(Context context, AttributeSet attrs) {
super(context, attrs);
    }

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);

// 创建画笔
        Paint p = new Paint();
        p.setColor(Color.BLACK);

        p.reset();
//设置空心
        p.setStyle(Paint.Style.STROKE);
        Path path = new Path();
        path.moveTo(100, 320);//设置Path的起点
        path.quadTo(150, 310, 170, 400);  //设置路径点和终点
        canvas.drawPath(path, p);
    }
}

 
 

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41

大致的坐标思维

截图

7.文字和图片——TvIvActivity

package com.lgl.view.view;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;

import com.lgl.view.R;

/**
 * Created by LGL on 2016/1/8.
 */
public class TvIvView extends View {
public TvIvView(Context context) {
super(context);
    }

public TvIvView(Context context, AttributeSet attrs) {
super(context, attrs);
    }

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);

        Paint p = new Paint();
        p.setColor(Color.RED);

//文本
        canvas.drawText("自定义文本", 250, 330, p);
        Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.ic_launcher);
//图片
        canvas.drawBitmap(bitmap, 250, 360, p);
    }
}

 
 

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40

文字和图片感觉不用多说，图片加载需要一个bitmap，而加载bitmap又需要一个工厂类，就是这样

大致的坐标思维

截图

———————————————————————————————————————————————————————

1.画空心圆

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Paint p = new Paint();
        p.setColor(Color.GREEN);
        p.setStrokeWidth(50);  //线宽
        p.setStyle(Paint.Style.STROKE); //空心
        RectF rect = new RectF(0,0,200,200);
        canvas.drawArc(rect,90,200,false,p);
    }