Android中canvas基本使用

canvas绘制

基本方法：

• canvas.drawArc ()//（扇形）
• canvas.drawCircle()//（圆）
• canvas.drawOval()//（椭圆）
• canvas.drawLine()//（线）
• canvas.drawPoint()//（点）
• canvas.drawRect()//（矩形）
• canvas.drawRoundRect()//（圆角矩形）
• canvas.drawVertices()//（顶点）(不了解)
• canvas.drawPath()//（路径）
• canvas.drawBitmap()// （位图）
• canvas.drawText()// （文字）

1.扇形：

  /**
     * author : zhangy
     *
     * des    : 画扇形,圆心为外接矩形的中心
     *
     * date   : 2016/4/18
     */
    private void drawArc(Canvas canvas) {
        RectF rectF = new RectF(0, 0, 100, 100);
        Log.d("yang","left:" + rectF.left + "top:" +rectF.top + "right:" + rectF.right + "bottom:" + rectF.bottom);
        paint.setColor(Color.parseColor("#33333333"));
        //oval :指定圆弧的外轮廓矩形区域。
        //startAngle: 圆弧起始角度，单位为度。从180°为起始点
        //sweepAngle: 圆弧扫过的角度，顺时针方向，单位为度。
        //useCenter: 如果为True时，在绘制圆弧时将圆心包括在内，通常用来绘制扇形。如果false会将圆弧的两端用直线连接
        //paint: 绘制圆弧的画板属性，如颜色，是否填充等
        // public void drawArc(@NonNull RectF oval, float startAngle, float sweepAngle, boolean useCenter,@NonNull Paint paint)
        canvas.drawRect(rectF,paint);
        paint.setColor(Color.parseColor("#ff0000"));
        canvas.drawArc(rectF,0,90,true,paint);
    }

第三个参数传true

第三个参数传false

2.圆：

     
    /**
     * author : zhangy
     *
     * des    : 画圆
     *
     * date   : 2016/4/18
     */
    private void drawCircle(Canvas canvas) {
        paint.setColor(Color.GREEN);
        //cx ： 圆心在x轴上的坐标
        //cy :  圆心的y轴上的坐标
        //radius:  半径
        //public void drawCircle(float cx, float cy, float radius, @NonNull Paint paint)
        canvas.drawCircle(50,50,50,paint);
    }

3.椭圆：

/**
     * author : zhangy
     *
     * des    : 画椭圆
     *
     * date   : 2016/4/18
     */
    private void drawOval(Canvas canvas) {
        paint.setColor(Color.BLACK);
        RectF rectF = new RectF(0, 0, 150, 100);
        //oval : 外接矩形
        //public void drawOval(@NonNull RectF oval, @NonNull Paint paint)
        canvas.drawOval(rectF,paint);
    }

4.线：

  /**
     * author : zhangy
     *
     * des    : 画线
     *
     * date   : 2016/4/18
     */
    private void drawLine(Canvas canvas) {
        //public void drawLine(float startX, float startY, float stopX, float stopY,@NonNull Paint paint)
        canvas.drawLine(0,0,100,100,paint);
        canvas.translate(0,110);

        //画一组线
        float[] pts={0,0,100,0,
                100,0,100,100,
                100,100,0,100,
                1,100,1,0};
        //线宽
        paint.setStrokeWidth((float) 2.0);
        //pts : 绘制直线的端点数组，每条直线占用4个数据。
        //public void drawLines(@Size(min=4,multiple=2) @NonNull float[] pts, @NonNull Paint paint)
//        canvas.drawLines(pts, paint);
        //offset : 指定跳过的数据个数
        //count : 指定取出数据的个数
        //public void drawLines(@Size(min=4,multiple=2) float[] pts, int offset, int count, Paint paint)
        canvas.drawLines(pts,4,12,paint);
    }

5.点：

 /**
     * author : zhangy
     *
     * des    : 画点
     *
     * date   : 2016/4/18
     */
    private void drawPoint(Canvas canvas) {
        paint.setStrokeWidth((float) 5.0);
        canvas.drawPoint(50,50,paint);
        canvas.translate(0,100);

        float[] pst = {20,20,40,40,60,60};
        paint.setColor(Color.RED);
        canvas.drawPoints(pst,paint);
        canvas.translate(0,100);
        //跳过前两个元素
        canvas.drawPoints(pst,2,4,paint);

    }

6.矩形：

    /**
     * author : zhangy
     *
     * des    : 画矩形
     *
     * date   : 2016/4/18
     */
    private void drawRect(Canvas canvas) {
        canvas.drawRect(0,0,100,100,paint);
        canvas.translate(0,110);

        canvas.drawRect(new RectF(0,0,100,100),paint);
        canvas.translate(0,110);

        canvas.drawRect(new Rect(0,0,100,100),paint);
    }

7.圆角矩形：

    /**
     * author : zhangy
     *
     * des    : 画圆角矩形
     *
     * date   : 2016/4/18
     */
    private void drawRoundRect(Canvas canvas) {
        paint.setColor(Color.BLUE);
        //rect : 要绘制的矩形
        //rx : x轴方向的弧度
        //ry : y轴方向上的弧度
        //public void drawRoundRect(@NonNull RectF rect, float rx, float ry, @NonNull Paint paint)
        canvas.drawRoundRect(new RectF(0,0,100,100),10,10,paint);
        //其他重载方法类似
    }

8.路径：

    /**
     * author : zhangy
     *
     * des    : 画路径
     *
     * date   : 2016/4/18
     */
    private void drawPath(Canvas canvas) {
        Path path = new Path();                     //Path对象
        path.moveTo(10, 50);                           //起始点
        path.lineTo(50, 50);                           //连线到下一点
        path.lineTo(10, 150);                      //连线到下一点
        path.lineTo(50, 100);                      //连线到下一点
        path.lineTo(50, 100);                      //连线到下一点
        paint.setColor(Color.RED);
        canvas.drawPath(path, paint);                   //绘制任意多边形
    }

9.位图：

    /**
     * author : zhangy
     *
     * des    : 画位图
     *
     * date   : 2016/4/18
     */
    private void drawBitmap(Canvas canvas) {
        Bitmap bitmap=((BitmapDrawable)getResources().getDrawable(R.mipmap.ic_launcher)).getBitmap();
        //left : 位图距左边的偏移量
        //top : 位图距顶部的偏移量
        //public void drawBitmap(@NonNull Bitmap bitmap, float left, float top, @Nullable Paint paint)
//        canvas.drawBitmap(bitmap,0,0,paint);
        Rect rect = new Rect(0, 0, 100, 100);
        RectF rectf = new RectF(0, 0, 50, 50);

        //src : 是对图片进行裁截，若是空null则显示整个图片
        //dst ：是图片在Canvas画布中显示的区域，大于src则把src的裁截区放大， 小于src则把src的裁截区缩小。
        //public void drawBitmap(@NonNull Bitmap bitmap, @Nullable Rect src, @NonNull RectF dst,@Nullable Paint paint)
        canvas.drawBitmap(bitmap,rect,rectf,paint);
    }

canvas.drawBitmap(bitmap,rect,rectf,paint)该方法是先用rect对原图进行裁剪，再根据rectf对裁剪后的图进行放大或缩小

10.文字：

     /**
     * author : zhangy
     *
     * des    : 绘制文字
     *
     * date   : 2016/4/18
     */
    private void drawText(Canvas canvas) {
        paint.setTextSize(30);
        Paint.FontMetrics fm = paint.getFontMetrics();
        //x : 绘制时x轴偏移量
        //y ：绘制时y轴偏移量
        //drawText(@NonNull String text, float x, float y, @NonNull Paint paint)
        canvas.drawText("zhangy",0,(fm.bottom - fm.top) / 2,paint);//这里要计算文字绘制的起点，因为文字是按baseLine来绘制的。
    }

绘制文字时注意文字绘制的起点位置如果不是很清楚如何计算，请参考这里

---

Canvas裁剪：

Canvas提供了ClipPath, ClipRect, ClipRegion 等方法来裁剪，通过Path, Rect ,Region 的不同组合，Android几乎可以支持任意现状的裁剪区域。

android.graphics包中定义了Point, Rect, Path, Region 这几种几何形状，Path可以为有圆弧，椭圆，二次曲线，三次曲线，线段，矩形等基本几何图形或是由这些基本几何图形组合而成，Path可以为开放或是闭合曲线。Rect提供了定义矩形的简洁方法。Region则支持通过区域的“加”，“减”，“并”，“异或”等逻辑运算由多个Region组合而成。Region.Op定义了Region支持的区域间运算种类。

Op是一个枚举，定义在Region类中。
假设用region1 去组合region2

    public enum Op {
            DIFFERENCE(0), //最终区域为region1 与 region2不同的区域
            REPLACE(1); //最终区域为为region2的区域
            INTERSECT(2), // 最终区域为region1 与 region2相交的区域
            UNION(3),      //最终区域为region1 与 region2组合一起的区域
            XOR(4),        //最终区域为region1 与 region2相交之外的区域
            REVERSE_DIFFERENCE(5), //最终区域为region2 与 region1不同的区域
     }

1.裁剪普通矩形：
我们先在canvas画布上裁剪出一个矩形作为背景(不贴图了)
这里canvas.save();和canvas.restore();是两个相互匹配出现的，作用是用来保存画布的状态和取出保存的状态的。这里稍微解释一下，
当我们对画布进行旋转，缩放，平移等操作的时候其实我们是想对特定的元素进行操作，比如图片，一个矩形等，但是当你用canvas的方法来进行这些操作的时候，其实是对整个画布进行了操作，那么之后在画布上的元素都会受到影响，所以我们在操作之前调用canvas.save()来保存画布当前的状态，当操作之后取出之前保存过的状态，这样就不会对其他的元素进行影响

    /**
     * author : zhangy
     *
     * des    : 绘制背景
     *
     * date   : 2016/4/18
     */
    private void drawBg(Canvas canvas) {
         canvas.clipRect(0, 0, 100, 100);

        canvas.drawColor(Color.WHITE);

        paint.setColor(Color.RED);
        canvas.drawLine(0, 0, 100, 100, paint);

        paint.setColor(Color.GREEN);
        canvas.drawCircle(30, 70, 30, paint);

        paint.setColor(Color.BLUE);
        canvas.drawText("Clipping", 50, 50, paint);
    }

2.相减(DIFFERENCE)： 最终区域为region1 与 region2不同的区域

    /**
     * author : zhangy
     *
     * des    : 相减
     *
     * date   : 2016/4/18
     */
    private void drawDiff(Canvas canvas) {
        canvas.save();
        canvas.translate(10, 10);
        canvas.clipRect(0, 0, 100, 100);
        canvas.clipRect(30, 30, 70, 70, Region.Op.DIFFERENCE);
        drawBg(canvas);
        canvas.restore();
    }

3.替代(REPLACE)： 最终区域为为region2的区域

     /**
     * author : zhangy
     *
     * des    : 替代
     *
     * date   : 2016/4/18
     */
    private void drawReplace(Canvas canvas) {
         Path path = new Path();
        canvas.save();
        canvas.translate(10, 10);
        path.reset();
        canvas.clipPath(path); // makes the clip empty
        path.addCircle(50, 50, 50, Path.Direction.CCW);
        canvas.clipPath(path, Region.Op.REPLACE);
        drawBg(canvas);
        canvas.restore();

        canvas.save();
        canvas.translate(10, 10);
        canvas.clipRect(0, 0, 60, 60);
        canvas.clipRect(40, 40, 100, 100, Region.Op.REPLACE);
        drawBg(canvas);
        canvas.restore();
    }

4.相交(INTERSECT)：最终区域为region1 与 region2相交的区域

    /**
     * author : zhangy
     *
     * des    : 交集
     *
     * date   : 2016/4/18
     */
    private void drawIntersect(Canvas canvas) {
        canvas.save();
        canvas.translate(10, 10);
        canvas.clipRect(0, 0, 100, 100);
        canvas.clipRect(30, 30, 70, 70, Region.Op.INTERSECT);
        drawBg(canvas);
        canvas.restore();
    }

5.并集(UNION)：最终区域为region1 与 region2组合一起的区域

     /**
     * author : zhangy
     *
     * des    : 并集
     *
     * date   : 2016/4/18
     */
    private void drawUnion(Canvas canvas) {
        canvas.save();
        canvas.translate(10, 10);
        canvas.clipRect(0, 0, 60, 60);
        canvas.clipRect(40, 40, 100, 100, Region.Op.UNION);
        drawBg(canvas);
        canvas.restore();
    }

6.除相交(XOR)：最终区域为region1 与 region2相交之外的区域

     /**
     * author : zhangy
     *
     * des    : 除相交
     *
     * date   : 2016/4/18
     */
    private void drawXor(Canvas canvas) {
        canvas.save();
        canvas.translate(10, 10);
        canvas.clipRect(0, 0, 60, 60);
        canvas.clipRect(40, 40, 100, 100, Region.Op.XOR);
        drawBg(canvas);
        canvas.restore();
    }

7.求同存异(REVERSE_DIFFERENCE)：最终区域为region2 与 region1不同的区域（后画的减去交集）

      /**
     * author : zhangy
     *
     * des    : 求同存异
     *
     * date   : 2016/4/18
     */
    private void drawReverse(Canvas canvas) {
        canvas.save();
        canvas.translate(10, 10);
        canvas.clipRect(0, 0, 60, 60);
        canvas.clipRect(40, 40, 100, 100,
                Region.Op.REVERSE_DIFFERENCE);
        drawBg(canvas);
        canvas.restore();
    }