Android 高級UI8 Canvas的使用

Android 高級UI 目錄

1.Canvas基本繪制

1.1drawLine 繪制直線
public class MyView extends View {

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

    public MyView(Context context,
            @Nullable AttributeSet attrs) {
        super(context, attrs);
        /**
         *Paint最好在結構體中繪制
         *這里創建
         */
        //Paint paint = new Paint();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //繪制直線
        /**
         * Paint最好在結構體中繪制
         * 避免在onDraw中重復繪制
         */
        Paint paint = new Paint();
        paint.setColor(Color.RED);
        paint.setStyle(Style.FILL);
        paint.setStrokeWidth(5);

        canvas.drawLine(0, 0, 300, 300, paint);
    }
}
1.2drawLines 繪制虛線
    Paint paint = new Paint();
        paint.setColor(Color.RED);
        paint.setStyle(Style.FILL);
        paint.setStrokeWidth(5);

        //canvas.drawLine(0, 0, 300, 300, paint);
        float[] pts = {0,0,100,100,200,200,300,300};
        canvas.drawLines(pts,paint);
1.3drawPoints 繪制點
        Paint paint = new Paint();
        paint.setColor(Color.RED);
        paint.setStyle(Style.FILL);
        paint.setStrokeWidth(10);

        //canvas.drawLine(0, 0, 300, 300, paint);
        float[] pts = {0,0,100,100,200,200,300,300};
        //canvas.drawLines(pts,paint);
        canvas.drawPoints(pts,paint);
1.4drawRect 繪制矩形
        Paint paint = new Paint();
        paint.setColor(Color.RED);
        paint.setStyle(Style.FILL);
        paint.setStrokeWidth(10);
        RectF rectF = new RectF(100,100,400,500);
        canvas.drawRect(rectF,paint);
1.5drawRoundRect 繪制圓角矩形
      Paint paint = new Paint();
      paint.setColor(Color.RED);
      paint.setStyle(Style.FILL);
      paint.setStrokeWidth(10);
      RectF rectF = new RectF(100,100,400,500);

      /**
       * x-radius , y-radius圓角的半徑
       * 半徑30
       */
      canvas.drawRoundRect(rectF,30,30,paint);
1.6drawCircle 繪制圓形
        Paint paint = new Paint();
        paint.setColor(Color.RED);
        paint.setStyle(Style.FILL);
        paint.setStrokeWidth(10);

        /**
         * @param cx 圓心點x坐標
         * @param cy 圓心點y坐標
         * @param radius 圓點半徑
         * @param paint The paint used to draw the circle
         */
        canvas.drawCircle(200,200,100,paint);
1.7drawOval繪制橢圓
        Paint paint = new Paint();
        paint.setColor(Color.RED);
        /**
         * 設置空心圓
         */
        paint.setStyle(Style.STROKE);
        paint.setStrokeWidth(15);


        RectF rectF = new RectF(100,100,400,500);

        canvas.drawRect(rectF,paint);

        paint.setColor(Color.GREEN);
        /**
         * 默認內切圓
         */
        canvas.drawOval(rectF,paint);
1.8drawArc繪制弧線
     Paint paint = new Paint();
        paint.setColor(Color.RED);
        /**
         * 設置空心圓
         */
        paint.setStyle(Style.STROKE);
        paint.setStrokeWidth(15);

        RectF rectF = new RectF(100, 100, 400, 500);

        canvas.drawRect(rectF, paint);

        paint.setColor(Color.GREEN);
        /**
         * @param oval The bounds of oval used to define the shape and size of the arc
         * @param startAngle 起始角度，相對X軸正方向
         * @param sweepAngle 畫多少角度的弧度
         * @param useCenter boolean，false:只有一個純弧線 true：閉合的邊
         * @param paint The paint used to draw the arc
         */
        canvas.drawArc(rectF,0,90,true,paint);
1.9drawPath 繪制路徑
        Paint paint = new Paint();
        paint.setColor(Color.RED);
        paint.setStyle(Style.STROKE);
        paint.setStrokeWidth(15);

        Path path = new Path();
        path.moveTo(100, 100);//畫筆落筆的位置
        //移動
        path.lineTo(200,100);
        path.lineTo(200,200);



        canvas.drawPath(path, paint);
        //圓角矩形路徑

        Path path2 = new Path();
        path2.moveTo(300, 100);//畫筆落筆的位置
        //移動
        path2.lineTo(400,100);
        path2.lineTo(400,200);
        //自動閉合
        path2.close();

        canvas.drawPath(path2, paint);

        Paint paint = new Paint();
        paint.setColor(Color.RED);
        paint.setStyle(Style.STROKE);
        paint.setStrokeWidth(15);

        Path path = new Path();


        RectF rectF = new RectF(100, 100, 400, 500);

        //圓角矩形路徑
        float radius[] ={10,10,10,10,10,10,90,90};
        path.addRoundRect(rectF,radius,Direction.CCW);
        canvas.drawPath(path,paint);
1.10區域迭代器RegionIterator的使用
        Paint paint = new Paint();
        paint.setColor(Color.RED);
        paint.setStyle(Style.STROKE);
        paint.setStrokeWidth(15);

        RectF rectF = new RectF(100, 100, 400, 500);

        Region region = new Region(100, 100, 200, 200);


        Path path = new Path();
        path.addOval(rectF,Direction.CCW);

        Region region1 = new Region();
        //path的矩形與橢圓取交集的結果
        region1.setPath(path,region);
        //創建一塊矩形的區域
        //結合區域迭代器的使用
        RegionIterator iterator = new RegionIterator(region1);

        Rect rect = new Rect();

        while (iterator.next(rect)) {
            canvas.drawRect(rect, paint);
        }

        Paint paint = new Paint();
        paint.setColor(Color.RED);
        paint.setStyle(Style.STROKE);
        paint.setStrokeWidth(1);

        RectF rectF = new RectF(100, 100, 400, 500);

        Region region = new Region(100, 100, 400, 500);


        Path path = new Path();
        path.addOval(rectF,Direction.CCW);

        Region region1 = new Region();
        //path的矩形與橢圓取交集的結果
        region1.setPath(path,region);
        //創建一塊矩形的區域
        //結合區域迭代器的使用
        RegionIterator iterator = new RegionIterator(region1);

        Rect rect = new Rect();

        while (iterator.next(rect)) {
            canvas.drawRect(rect, paint);
        }
注意：灰色是屏幕截圖的原因

2.Canvas變換技巧

2.1translate 平移
        Paint paint = new Paint();
        paint.setColor(Color.RED);
        paint.setStyle(Style.STROKE);
        paint.setStrokeWidth(15);



        Paint paint = new Paint();
        paint.setColor(Color.RED);
        paint.setStyle(Style.STROKE);
        paint.setStrokeWidth(15);

        RectF rectF = new RectF(100, 100, 400, 500);
        canvas.drawRect(rectF, paint);
        paint.setColor(Color.BLUE);
        //將畫布平移
        canvas.translate(50, 50);
        //當canvas執行drawXXX的時候就會創建一個新的畫布，但是還是會沿用之前設置的平移變換。不可逆的。（save和restore）
        canvas.drawRect(rectF, paint);
2.2scale縮放
        Paint paint = new Paint();
        paint.setColor(Color.RED);
        paint.setStyle(Style.STROKE);
        paint.setStrokeWidth(15);
        RectF r = new RectF(0,0,400,500);
        canvas.drawRect(r,paint);
        paint.setColor(Color.BLUE);
        /**
         * sx,sy:分別對x/y方向的一個縮放系數
         * 畫布的縮放會導致里面所有的繪制的東西否會有一個縮放的效果
         */
        canvas.scale(1.5f,0.5f);
        canvas.drawRect(r,paint);
2.3rotate旋轉
        Paint paint = new Paint();
        paint.setColor(Color.RED);
        paint.setStyle(Style.STROKE);
        paint.setStrokeWidth(15);
    
        RectF rectF = new RectF(200, 200, 400, 500);
        canvas.drawRect(rectF, paint);
        paint.setColor(Color.BLUE);
        /**
         * canvas.rotate(45,200, 200);
         * 以(200,200)為原點旋轉
         */
        canvas.rotate(45, 200, 200);
        canvas.drawRect(rectF, paint);
2.4skew斜拉畫布
        Paint paint = new Paint();
        paint.setColor(Color.RED);
        paint.setStyle(Style.STROKE);
        paint.setStrokeWidth(15);

        RectF r = new RectF(100,100,400,500);
        canvas.drawRect(r,paint);
        paint.setColor(Color.BLUE);
        //sx,sy傾斜度：X軸方向上傾斜60度，tan60=根號3
        canvas.skew(1.73f,0);
        canvas.drawRect(r,paint);
2.5clipRect裁剪
        Paint paint = new Paint();
        paint.setColor(Color.RED);
        paint.setStyle(Style.STROKE);
        paint.setStrokeWidth(15);
        RectF r = new RectF(200,200,400,500);
        canvas.drawRect(r,paint);
        paint.setColor(Color.BLUE);
        canvas.clipRect(new Rect(250,250,300,400));
        canvas.drawColor(Color.GREEN);
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。