自定义View Canvas详解(下)

本章节讲述Canvas 中的ClipXxx方法。即 clipPath( )，clipRect( )，clipRegion( )方法。

 

Path：可以是开放或闭合的曲线，线构成的复杂的集合图形。

Rect：矩形区域。

Region：可以理解为区域组合，比如可以将两个区域相加，相减，并，疑惑等。

Region.Op定义了Region支持的区域间运算种类。我们平时理解的剪切可能是对已经存在的图形进行Clip，但是Android中对 Canvas进行Clip，是要在画图前进行的，如果画图后再对Canvas进行Clip的话将不会影响到已经画好的图形，记住Clip是针对Canvas而非图形。

 

 

一.Region.Op组合方式详解

图解

 

DIFFERENCE：A和B的差集范围，即A - B，只有在此范围内的绘制内容才会被显示。

INTERSECT：即A和B的交集范围，只有在此范围内的绘制内容才会被显示。

UNION：即A和B的并集范围，即两者所包括的范围的绘制内容都会被显示。

XOR：A和B的补集范围，此例中即A除去B以外的范围，只有在此范围内的绘制内容才会被显示。

REVERSE_DIFFERENCE：B和A的差集范围，即B - A，只有在此范围内的绘制内容才会被显示。

REPLACE：不论A和B的集合状况，B的范围将全部进行显示，如果和A有交集，则将覆盖A的交集范围。

 

 

DIFFERENCE举例

A和B的差集范围，即A - B，只有在此范围内的绘制内容才会被显示。

A和B的差集 = A - (A和B相交的部分)

 

代码

canvas.drawRect(0, 0, 200, 200, paint);

 

效果

即画一个长200 宽200的矩形

 

使用clipRect方法剪切上面的矩形 

canvas.clipRect(10, 10, 110, 110);//第一个

canvas.clipRect(50, 50, 150, 150, Region.Op.DIFFERENCE);//第二个

canvas.drawRect(0, 0, 200, 200, paint);

 

必须在画的矩形代码前执行

 

先后在(10,10)以及(50,50)为起点，裁剪了两个100*100的矩形

 

效果

 

图解

 

 

Op.XOR举例

A和B的补集范围，此例中即A除去B以外的范围，只有在此范围内的绘制内容才会被显示。

A和B的补集 = A和B的合集 - A和B的交集

 

代码

canvas.drawRect(0, 0, 200, 200, paint);

 

效果

即画一个长200 宽200的矩形

 

使用clipRect方法剪切上面的矩形

canvas.clipRect(10, 10, 110, 110);//第一个
canvas.clipRect(50, 50, 150, 150, Region.Op.XOR); //第二个
canvas.drawRect(0, 0, 200, 200, paint);

 

必须在画的矩形代码前执行

 

先后在(10,10)以及(50,50)为起点，裁剪了两个100*100的矩形 

效果

 

图解

 

 

同理

Op.INTERSECT

即A和B的交集范围，只有在此范围内的绘制内容才会被显示。

A和B的交集 = A和B相交的部分

 

Op.UNION

即A和B的并集范围，即两者所包括的范围的绘制内容都会被显示。

A和B的并集 = A的区域 + B的区域

 

Op.REVERSE_DIFFERENCE

B和A的差集范围，即B - A，只有在此范围内的绘制内容才会被显示。

B和A的差集 = B - A和B的交集

 

Op.REPLACE

不论A和B的集合状况，B的范围将全部进行显示，如果和A有交集，则将覆盖A的交集范围。

不论A和B的集合状况，B的范围将全部进行显示，如果和A有交集，则将覆盖A的交集范围

 

 

 

 

二.clipRect方法

 

clipRect重载方法

 

参数

rect：Rect对象，用于定义裁剪区的范围，Rect和RectF功能类似，精度和提供的方法不同而已。

left：矩形裁剪区的左边位置。

top：矩形裁剪区的上边位置。

right：矩形裁剪区的右边位置。

bottom：矩形裁剪区的下边位置。

op：裁剪区域的组合方式。

上述四个值可以是浮点型或者整型。

 

 

 

 

三.clipPath方法

 

重载方法

 

 

使用clipPath剪切一个圆形ImageView Demo

 

自定义ImageView

public class RoundImageView extends android.support.v7.widget.AppCompatImageView {


    private Bitmap mBitmap;
    private Rect mRect = new Rect();
    private PaintFlagsDrawFilter pdf = new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG);
    private Paint mPaint = new Paint();
    private Path mPath = new Path();


    public RoundImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }




    //传入一个Bitmap对象
    public void setBitmap(Bitmap bitmap) {
        this.mBitmap = bitmap;
    }




    private void init() {
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setFlags(Paint.ANTI_ALIAS_FLAG);
        mPaint.setAntiAlias(true);// 抗锯尺
    }




    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if (mBitmap == null) {
            return;
        }
        mRect.set(0, 0, getWidth(), getHeight());
        canvas.save();
        canvas.setDrawFilter(pdf);
        mPath.addCircle(getWidth() / 2, getWidth() / 2, getHeight() / 2, Path.Direction.CCW);
        canvas.clipPath(mPath, Region.Op.REPLACE);
        canvas.drawBitmap(mBitmap, null, mRect, mPaint);
        canvas.restore();
    }

}

 

布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <com.wjn.sqlitedemo.view.RoundImageView
        android:id="@+id/roundimageview"
        android:layout_width="200dp"
        android:layout_centerInParent="true"
        android:layout_height="200dp" />



</RelativeLayout>

 

 

Java代码使用

roundImageView= (RoundImageView) findViewById(R.id.roundimageview);
Bitmap bitmap = BitmapFactory.decodeResource(getResources(),R.mipmap.index_listattachment);
roundImageView.setBitmap(bitmap);

 

 

效果

 

 

 

 

四.clipRegion方法

 

clipRegion重载方法

 

Demo

自定义View

public class MyView extends View{


    private Bitmap mBitmap = null;
    private int limitLength = 0;     //
    private int width;
    private int heigth;
    private static final int CLIP_HEIGHT = 50;


    private boolean status = HIDE;//显示还是隐藏的状态，最开始为HIDE
    private static final boolean SHOW = true;//显示图片
    private static final boolean HIDE = false;//隐藏图片


    public MyView(Context context) {
        this(context, null);
        mBitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.fristshow1);
        limitLength = width = mBitmap.getWidth();
        heigth = mBitmap.getHeight();
    }


    public MyView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mBitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.fristshow1);
        limitLength = width = mBitmap.getWidth();
        heigth = mBitmap.getHeight();
    }


    public MyView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }


    @Override
    protected void onDraw(Canvas canvas) {
        Region region = new Region();
        int i = 0;
        while (i * CLIP_HEIGHT <= heigth) {//计算clip的区域
            if (i % 2 == 0) {
                region.union(new Rect(0, i * CLIP_HEIGHT, limitLength, (i + 1) * CLIP_HEIGHT));
            } else {
                region.union(new Rect(width - limitLength, i * CLIP_HEIGHT, width, (i + 1)
                        * CLIP_HEIGHT));
            }
            i++;
        }
        canvas.clipRegion(region);
        canvas.drawBitmap(mBitmap, 0, 0, new Paint());
        if (status == HIDE) {//如果此时是隐藏
            limitLength -= 10;
            if(limitLength <= 0)
                status=SHOW;
        } else {//如果此时是显示
            limitLength += 5;
            if(limitLength >= width)
                status=HIDE;
        }
        invalidate();
    }
}

 

java代码使用

MyView myView=new MyView(this);
setContentView(myView);

 

思路

初始化的时候获得宽高，然后循环，可以理解把图片分割成一条条的线，循环条件是：i * 每条的高度 不大于高度，然后线又分两种情况，调用的是Region的union，其实就是结合方式为UNINO的剪切方式 而已，最后是对此时图片的是否显示做下判断，隐藏和显示的情况做不同的处理，最后调用invalidate() 重绘。

 

效果

 

 

附：Canvas官方链接

http://androiddoc.qiniudn.com/reference/android/graphics/Canvas.html