Android-自定义控件之绘图基础

画圆形，效果图：

布局中去指定自定义View：

<view.custom.androidcustomviewbook.a_draw_base.BaseView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

在代码中去绘制圆形：

public class BaseView extends View {

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

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

    public BaseView(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.BLUE);
        // 设置画笔填充的样式
        paint.setStyle(Paint.Style.FILL);
        // 设置画笔的宽度
        paint.setStrokeWidth(60);

        // 设置画布，把画笔画上去，画布是圆形
        canvas.drawCircle(300,300,160, paint);
    }
}

---

圆形并填充内部，效果图：

下面是绘制的代码：

public class BaseView extends View {
    public BaseView(Context context) {
        super(context);
    }

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

    public BaseView(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(0xFFFF0000);

        paint.setStyle(Paint.Style.FILL); // 仅填充内部
        // paint.setStyle(Paint.Style.FILL_AND_STROKE); // 填充内部和描边
        // paint.setStyle(Paint.Style.STROKE); // 仅描边

        paint.setStrokeWidth(80); // 单位是px，需要设置为FILL_AND_STROKE才有效

        canvas.drawCircle(300, 800, 160, paint);

        paint.setColor(0x7EFFFF00);
        canvas.drawCircle(300, 800, 130, paint);
    }
}

---

画一条线，画一个点，Rect，RectF相关知识：

public class BaseView extends View{

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

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

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

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // canvas.drawColor(0xFFFF00FF);
        // canvas.drawRGB(255, 0, 255);

        // 注意：drawLine与setStyle无关，不管设置什么样式，再设置setStrokeWidth是生效的

        // 画一条直线
        /*Paint paint = new Paint();
        paint.setColor(Color.RED);
        paint.setStyle(Paint.Style.FILL_AND_STROKE);
        paint.setStrokeWidth(6);

        canvas.drawLine(200, 200, 400, 200, paint);*/

        /*// 画点 画点和画线一样 与 drawLine与setStyle无关
        Paint mPaint = new Paint();
        mPaint.setColor(Color.RED);
        mPaint.setStrokeWidth(9);

        canvas.drawPoint(200,200, mPaint);*/

        // Rect
        Paint paint = new Paint();
        paint.setColor(Color.BLUE);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(20);

        // 直接构造
        // canvas.drawRect(10, 10, 100, 100, paint);

        // 使用RectF构造
        RectF  rectF = new RectF(10f, 10f, 100f, 100f);
        canvas.drawRect(rectF, paint);

    }
}

效果图：

---

路径（Path），区域（Region），配合绘制操作：

public class BaseView4 extends View {

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

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

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

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

        // 路径 path
        /*Paint mPaint = new Paint();
        mPaint.setColor(Color.YELLOW);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(6);*/

        /*Path mPath = new Path();
        mPath.moveTo(200, 200); // 设置起始点
        mPath.lineTo(300, 800); // 第一条直线的终点，也是第二条线的起始点
        mPath.lineTo(600, 800); // 画第二条线的起始点
        mPath.close(); // 闭环

        canvas.drawPath(mPath, mPaint);*/

        /*Path mPaht = new Path();
        mPaht.moveTo(10, 10); // 设置起始位置
        RectF rectF = new RectF(100, 10, 200, 100);
        // mPaht.addArc(rectF, 0, 90);
        // mPaht.arcTo(rectF, 0 ,99);
        mPaht.arcTo(rectF, 0 ,99, true);

        canvas.drawPath(mPaht, mPaint);*/

        /*Paint mPaint = new Paint();
        mPaint.setColor(Color.RED);
        mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
        mPaint.setStrokeWidth(6);

        // 区域的意思
        Region region = new Region(new Rect(10, 20, 60, 80));

        // 定义Region迭代器
        RegionIterator regionIterator = new RegionIterator(region);

        Rect rect = new Rect();

        while (regionIterator.next(rect)) {
            canvas.drawRect(rect, mPaint);
        }*/

        /*Paint paint = new Paint();
        paint.setColor(Color.BLUE);
        paint.setStyle(Paint.Style.FILL);
        paint.setStrokeWidth(6);*/

        /*// 构造一条椭圆路径
        Path ovalPaht = new Path();
        RectF rectF = new RectF(50, 50, 200, 500);
        ovalPaht.addOval(rectF, Path.Direction.CCW);

        // 【区域】 在 setPath方法中，传入椭圆区域小的矩形区域，让其区交集
        Region region = new Region();
        region.setPath(ovalPaht, new Region(50, 50, 200, 200));

        // 画出路径
        Rect r = new Rect();
        RegionIterator regionIterator = new RegionIterator(region);
        while (regionIterator.next(r)) {
            canvas.drawRect(r, paint);
        }*/

        // 区域相交
        /*Region region = new Region(10, 10, 200, 100);
        region.union(new Rect(10, 10, 50, 300));
        RegionIterator regionIterator = new RegionIterator(region);
        Rect resultRect = new Rect();
        while(regionIterator.next(resultRect)) {
            canvas.drawRect(resultRect, paint);
        }*/

        /**
         * 区域更加灵活的操作
         */
        // 构建出两个矩形
        Rect rect1 = new Rect(100, 100, 400, 200);
        Rect rect2 = new Rect(200, 0, 300, 300);

        // 需要一个画笔，可以画出矩形的轮廓
        Paint paint = new Paint();
        paint.setColor(Color.BLUE);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(2);

        canvas.drawRect(rect1, paint);
        canvas.drawRect(rect2, paint);

        // 然后利用 rect1 rect2 来构造 Region，并在rect1的基础上与rect2来交集
        Region region1 = new Region(rect1);
        Region region2 = new Region(rect2);

        // 进行交集
        // region1.op(region2, Region.Op.INTERSECT);
        region1.op(region2, Region.Op.DIFFERENCE);

        // 在搞个画笔，所选区域用绿色去填充
        Paint paint2 = new Paint();
        paint2.setColor(Color.GREEN);
        paint2.setStyle(Paint.Style.FILL);

        RegionIterator regionIterator = new RegionIterator(region1);
        Rect resultRect = new Rect();
        while (regionIterator.next(resultRect)) {
            canvas.drawRect(resultRect, paint2);
        }
    }
}

效果图：

---

平移：

public class BaseView5 extends View {

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

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

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

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

        // 平移 translate
        /*Paint paint = new Paint();
        paint.setColor(Color.BLUE);
        paint.setStyle(Paint.Style.FILL);

        canvas.translate(200, 100);

        canvas.drawRect(new Rect(10, 10, 400, 220), paint);*/

        /**
         * 定义两个画笔，一个红色画笔，一个绿色画笔
         */
        Paint paintRed = new Paint();
        paintRed.setColor(Color.RED);
        paintRed.setStyle(Paint.Style.STROKE);
        paintRed.setStrokeWidth(2);

        Paint paintGreen = new Paint();
        paintGreen.setColor(Color.GREEN);
        paintGreen.setStyle(Paint.Style.STROKE);
        paintGreen.setStrokeWidth(2);

        // 构建一个矩形
        Rect rect = new Rect(10, 10, 400, 200);
        canvas.drawRect(rect, paintRed);

        // 进行平移
        canvas.translate(200, 400);

        canvas.drawRect(rect, paintGreen);

    }
}

效果图：

---

裁剪：

public class BaseView6 extends View {

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

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

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

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

        canvas.drawColor(Color.YELLOW);
        // 保存当前画笔大小，整个屏
        canvas.save();

        // 裁剪
        // canvas.drawColor(Color.BLUE);
        canvas.clipRect(new Rect(100, 100, 400, 800));
        canvas.drawColor(Color.RED);

        // 恢复 整个屏 然后设置蓝色
        // canvas.restore();
        // canvas.drawColor(Color.BLUE);
    }
}

效果图：