Android-自定義控件之繪圖基礎

時間 2019-11-17

原文原文鏈接

畫圓形，效果圖：android

佈局中去指定自定義View：canvas

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

在代碼中去繪製圓形：ide

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);
    }
}

圓形並填充內部，效果圖：佈局

下面是繪製的代碼：spa

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相關知識：rest

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);

    }
}

效果圖：code

路徑（Path），區域（Region），配合繪製操做：blog

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);
        }
    }
}

效果圖：ip

平移：io

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);
    }
}