Canvas

一时失言乱红尘 2022-06-09 04:56 361阅读 0赞

**Canvas画布的正确理解**

> 往常我理解的是我们画的东西就存在一张画布上，那么我们rotate以后为什么原来画上的东西还在原位置显示上。原来当Canvas执行drawXXX的时候就会新建一个画布图层，类似于我们photoshop中的图层概念。  
> 当我们旋转后，新建一个图层会沿用旋转后的坐标  
> canvas的变换对填充颜色不影响，canvas.drawColor还是会填充整个屏幕，有影响的是那些有坐标的，比如画圆画矩形等

介绍一些不易理解的方法  
canvas.drawLines(pts,offset,count,paint);  
参数：

*  float \[\]pts float数组，四个数据决定一条直线
 *  int offset 跳过的数据个数，这些数据不参与绘制
 *  int count 实际参与绘制的数据个数
 *  Paint paint 画笔

drawLines还有个有两个参数的上面的去掉中间两个参数，绘制一系列直线

在我们自定义Drawable时，一定要重写，因为我们在执行ondraw 方法时drawable的宽高都是零，但他的实际宽高并不为0；我们需要给drawable设置大小才能绘制。为什么我们给ImageView设置背景时imageview就可以直接显示，因为Imageview内部处理了这个问题，他的宽高被设置为ImageView的大小。Drawable的bounds参数就是父类传递过来的大小如果我们在drawable里面画颜色canvas.drawColor(Color.RED);当然不需要在onBoundsChange设置什么了

@Override
        protected void onBoundsChange(Rect bounds) {
            // TODO Auto-generated method stub
            Log.i("width", drawable.getBounds().width()+"height"+drawable.getBounds().height());
            drawable.setBounds(bounds);
        }

而重写另外两个方法能改变我们绘制drawable时的大小，重写这两个方法后onBoundsChanged的height和width和下面的返回值有关，如果不重写则和ImageView（父类）宽高有关

@Override
        public int getIntrinsicWidth() {
            //得到Drawable的实际宽度
            Log.i("width1",""+drawable.getIntrinsicWidth());
            return drawable.getIntrinsicWidth();
        }
    
        @Override
        public int getIntrinsicHeight() {
            Log.i("width2",""+drawable.getIntrinsicHeight());
            //得到Drawable的实际高度
            return drawable.getIntrinsicHeight();
        }

而在Drawable中还有另一个方法也比较重要，我们可以通过setLevel改变level的值，然后就会回掉这个方法，还可以在draw方法中通过getLevel获得值，进行另类的绘制

@Override
        protected boolean onLevelChange(int level) {
            // 当设置level的时候回调---提醒自己重新绘制
            invalidateSelf();
            return true;
        }

Gravaity中apply方法讲解放，从指定矩形区域划分出来一块矩形

public static void apply(int gravity, int w, int h, Rect container, Rect outRect) {
            apply(gravity, w, h, container, 0, 0, outRect);
        }

参数讲解：

*  gravity 划分的方向左右上下
 *  w 水平宽度
 *  h竖直高度
 *  container 目标矩形
 *  outRect 输出矩形

Rect container=new Rect(0, 0,getBounds().width(), getBounds().height());
            Rect outRect=new Rect();
            Gravity.apply(Gravity.LEFT|Gravity.TOP, getBounds().width()/2, getBounds().height()/2, container, outRect);
            Paint paint=new Paint();
            paint.setColor(Color.BLACK);
            canvas.drawRect(outRect, paint);

![这里写图片描述][SouthEast]

Rect container=new Rect(0, 0,getBounds().width(), getBounds().height());
            Rect outRect=new Rect();
            Gravity.apply(Gravity.RIGHT, getBounds().width()/2, getBounds().height()/2, container, outRect);
            Paint paint=new Paint();
            paint.setColor(Color.BLACK);
            canvas.drawRect(outRect, paint);

![这里写图片描述][SouthEast 1]

下面介绍一个canvas的另一个方法与上面的结合使用canvas.clipRect(outRect);//截取一个矩形区域，下面的drawable是一张全屏的图，通过这个方法，可以只绘制一半

@Override
        public void draw(Canvas canvas) {
    
            //drawable.draw(canvas);
            //canvas.drawColor(Color.RED);
            Rect container=new Rect(0, 0,getBounds().width(), getBounds().height());
            Rect outRect=new Rect();
            //划分出一块矩形区域
            Gravity.apply(Gravity.RIGHT, getBounds().width()/2, getBounds().height(), container, outRect);
            Paint paint=new Paint();
            paint.setColor(Color.BLACK);
            canvas.save();//保存画布
            canvas.clipRect(outRect);//截取一个矩形区域
            //canvas.drawRect(outRect, paint);
            drawable.draw(canvas);//绘制drawable
            canvas.restore();//恢复画布
    
        }

![这里写图片描述][SouthEast 2]

[SouthEast]: /images/20220609/b06812bcbf55452d9fa8fcf2b9756bcd.png
[SouthEast 1]: /images/20220609/6ee9f73d3d074bb5b366f7cba72b977c.png
[SouthEast 2]: /images/20220609/99402fac84664f35aa8fbcdfbe4e7efa.png