Android自定义控件之基本图形绘制

入门示例代码

在Android中Paint类就是画笔,Canvas 就是画布

对于画笔的大小,粗细,颜色,透明度都在paint类中设置,对于画出的成品,比如圆,方形,等在canvas类中的函数生成

入门案例:

package com.loaderman.customviewdemo.paint;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.View;
public class BasisView extends View {
    public BasisView(Context context) {
        super(context);
    }

    public BasisView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    public BasisView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Paint paint = new Paint();//画笔
        paint.setColor(Color.RED);//设置颜色
        paint.setStyle(Paint.Style.STROKE); // 填充样式//Paint.Style.FILL填充内部  Paint.Style.FILL_AND_STROKE 填充内部和描边 Paint.Style.STROKE  仅描边
        paint.setStrokeWidth(50);//描边宽度值
        canvas.drawCircle(190,200,150,paint);//绘制圆
    }
}

---

画笔的基本设置

• setColor(int color)设置画笔颜色

参数color由0xAARRGGBB 组成 ,A代表透明度,R代表红色值,G代表绿色值,B代表蓝色值

• setStyle(tStyle style)设置填充样式

参数styl取值如下:

1. 　　Paint.Style.FILL                                     填充内部
2.        Paint.Style.FILL_AND_STROKE            填充内部和描边
3.        Paint.Style.STROKE                              仅描边

• setStrokeWidth(float width)

width参数单位是px,当画笔的样式不为FILl时有效

• setAntiAlias(boolean aa)

是否打开抗锯齿功能,一般在绘制不规则的图形中使用,比如圆文字等,在绘制菱角分明的图形中是不需要开启的

---

canvas基本使用

 画布背景设置

drawColor(int color)
drawARGB(int a, int r, int g, int b)
drawRGB(int r, int g, int b) 

画一条直线

drawLine(float startX, float startY, float stopX, float stopY, Paint paint)  
//画一条直线
如 canvas.drawLine(100,100,200,200,paint);
注意:画直线的错写和画布的style是没有关系

画多条直线

drawLines(float[] pts, Paint paint)
//pts是点的集合,这里不是形成连接线,而是每两个点形成两条直线,ps的组织方式为{x1,y1,x2,y2,x3,y3.....}
//如:
float[] pts ={10,10,100,100,200,200,400,400};
canvas.drawLines(pts,paint);//效果是两条直线

drawLines(float[] pts, int offset, int count, Paint paint)
//如:
 float[] pts ={10,10,100,100,200,200,400,400};
 canvas.drawLines(pts,2,4,paint);
//表示从pts数据中索引问的数组开始绘制,有4个数组参与绘图,也就是点100,100 和点200,200 效果就是这两个点的直线

画点

 drawPoint(float x, float y, Paint paint) //点x代表x坐标 y代表点y坐标
//如:
 canvas.drawPoint(100,100,paint);

画多个点

drawPoints(float[] pts, Paint paint) 
drawPoints(float[] pts, int offset, int count, Paint paint)
//说明:pts为点的集合 offset指集合中跳过数值的个数,不是点的个数,点的个数有二个数值
//如:
 float[] pts ={10,10,100,100,200,200,400,400};
 canvas.drawPoints(pts,paint);
 canvas.drawPoints(pts,2,4,paint);

画矩形

Rect构造函数

Rect() 
Rect(int left, int top, int right, int bottom)
Rect(Rect r)

RectF构造函数

public RectF()
public RectF(float left, float top, float right, float bottom) 
public RectF(RectF r)
public RectF(Rect r)

其实这两个构造函数基本相同只是参数的数据类型不同而已

构造矩形结构一般如下

//直接构造
canvas.drawRect(10, 10, 100, 100, paint);
//间接构造
Rect rect = new Rect();
rect.set(10,10,100,100)

绘制矩形

  public void drawRect(RectF rect, Paint paint)

    public void drawRect(Rect r, Paint paint)
    public void drawRect(float left, float top, float right, float bottom, Paint paint) 

绘制圆角矩形

 drawRoundRect(RectF rect, float rx, float ry, Paint paint)
 drawRoundRect(float left, float top, float right, float bottom, float rx, float ry, Paint paint)
//其中rx代表x轴的圆角半径,ry代表y轴的圆角半径

绘制圆形

drawCircle(float cx, float cy, float radius, Paint paint)//cx代表x轴坐标,cy代表y轴坐标,radius代表圆的半径
//如
canvas.drawCircle(200,200,100,paint);

绘制椭圆

RectF rectF = new RectF(100,10,300,100);    
canvas.drawOval(rectF,paint);

绘制弧

drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint) 
drawArc(float left, float top, float right, float bottom, float startAngle, float sweepAngle, boolean useCenter, Paint paint)
说明:
　　startAngle 代表弧开始的角度
　　sweepAngle 弧持续的角度
　　useCenter 是否有弧的两边,为true则有,false只有一条

---

color

android 定义了很多常量的颜色值可以直接使用

    public static final int BLACK = -16777216;
    public static final int BLUE = -16776961;
    public static final int CYAN = -16711681;
    public static final int DKGRAY = -12303292;
    public static final int GRAY = -7829368;
    public static final int GREEN = -16711936;
    public static final int LTGRAY = -3355444;
    public static final int MAGENTA = -65281;
    public static final int RED = -65536;
    public static final int TRANSPARENT = 0;
    public static final int WHITE = -1;
    public static final int YELLOW = -256;

上面可以通过Color.XXX来直接使用这些颜色

还有其他构造颜色

   public static int alpha(int color)) //提取颜色分量

    public static int red(int color) ) //提取颜色分量

    public static int green(int color)) //提取颜色分量

    public static int blue(int color) //提取颜色分量

    public static int rgb(int red, int green, int blue) //不带有透明度颜色
    
    public static int rgb(float red, float green, float blue)  //不带有透明度颜色

    public static int argb(int alpha, int red, int green, int blue)  //带有透明度颜色

    public static int argb(float alpha, float red, float green, float blue) //带有透明度颜色