android 切割畫布(clipRect)詳解

初次接觸到androidclip有以下兩點疑問:

1. Clip(剪切)的時機

2. Clip中的Op的參數的意思。

通常咱們理解的clip(剪切),是對已經存在的圖形進行clip的。但是,在android上是對canvas(畫布)上進行clip的,要在畫圖之前對canvas進行clip,如果畫圖之後再對canvas進行clip不會影響到已經畫好的圖形。一定要記住clip是針對canvas而非圖形。

接下來通過android自帶的APIdemo Clipping例子詳細講述Clip中的Op的參數的意思。Android提供clipRectclipPathclipRegion剪切區域的API

Op一共有 DIFFERENCE,INTERSECT,UNION,XOR, REVERSE_DIFFERENCE, REPLACE六種選擇。

例子:

1. 在canvas上剪切從(0,0)(60,60)的方塊。下圖藍色區域加紫色區域。

2. 在canvas上剪切從(40,40)(100,100)的方塊。下圖橄欖色區域加紫色區域。

3. 在canvas上剪切從(0,0)(100,100)的方塊。

先在第二方塊上加上Op參數例如:canvas.clipRect(40, 40, 100, 100, Region.Op. DIFFERENCE);

首先,需要搞清楚Op參數針對的對象。接着瞭解其含義。

Op參數針對的對象是之前剪切的區域以及當前要剪切的區域。

在本例中涉及到區域是從(0,0)(60,60)的方塊和從(40,40)(100,100)的方塊。

那有哪些含義呢?就是表示當前要剪切的區域與之前剪切過的之間的關係。

DIFFERENCE:之前剪切過除去當前要剪切的區域(藍色區域)。

INTERSECT:當前要剪切的區域在之前剪切過內部的部分(紫色區域)。

UNION:當前要剪切的區域加上之前剪切過內部的部分(藍色區域+紫色區域+橄欖色區域)。

XOR:異或,當前要剪切的區域與之前剪切過的進行異或。(藍色區域+橄欖色區域)。

REVERSE_DIFFERENCE:與DIFFERENCE相反,以當前要剪切的區域爲參照物,當前要剪切的區域除去之前剪切過的區域(橄欖色區域);

REPLACE:用當前要剪切的區域代替之前剪切過的區域。(橄欖色區域+紫色區域);

沒帶Op參數效果與INTERSECT的效果一樣,兩個區域的交集。


下面給個例子


canvas.clipRect(30, 30, 70, 70, Region.Op.XOR);最後一個參數有多個選擇分別是://DIFFERENCE是第一次不同於第二次的部分顯示出來 
            //REPLACE是顯示第二次的 
            //REVERSE_DIFFERENCE 是第二次不同於第一次的部分顯示 
            //INTERSECT交集顯示 
            //UNION全部顯示 
            //XOR補集 就是全集的減去交集生育部分顯示



import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Region;
import android.util.AttributeSet;
import android.view.View;

public class sBook extends View{
    Context mContext;
    Paint mPaint;
    Path mPath;
    public sBook(Context context) {
        super(context);
        init();
    }
    
    public sBook(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public sBook(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init();
    }
    
    private void init(){
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setStrokeWidth(6);
        mPaint.setTextSize(16);
        mPaint.setTextAlign(Paint.Align.RIGHT); 
        
        mPath = new Path();
    }
    
    protected void onDraw(Canvas canvas){
        canvas.drawColor(Color.GRAY);            
        
        canvas.save();
        canvas.translate(10, 10);
        drawScene(canvas); 
        canvas.restore(); 
        
        canvas.save();
        canvas.translate(160, 10);
        canvas.clipRect(10, 10, 90, 90);
        canvas.clipRect(30, 30, 70, 70, Region.Op.XOR);
        drawScene(canvas);
        canvas.restore();
       
        canvas.save();
        canvas.translate(10, 160);
        mPath.reset();
//        canvas.clipPath(mPath); // makes the clip empty
//        mPath.addCircle(50, 50, 50, Path.Direction.CCW);
        mPath.cubicTo(0, 0, 100, 0, 100, 100);
        mPath.cubicTo(100, 100, 0, 100, 0, 0);
        canvas.clipPath(mPath, Region.Op.REPLACE);
        drawScene(canvas);
        canvas.restore();
       
        canvas.save();
        canvas.translate(160, 160);
        canvas.clipRect(0, 0, 60, 60);
        canvas.clipRect(40, 40, 100, 100, Region.Op.UNION);
        drawScene(canvas);
        canvas.restore();
       
        canvas.save();
        canvas.translate(10, 310);
        canvas.clipRect(0, 0, 60, 60);
        canvas.clipRect(40, 40, 100, 100, Region.Op.XOR);
        drawScene(canvas);
        canvas.restore();
       
        canvas.save();
       
        canvas.translate(160, 310);
        canvas.clipRect(0, 0, 60, 60);
        canvas.clipRect(40, 40, 100, 100, Region.Op.REVERSE_DIFFERENCE);
        drawScene(canvas);
        canvas.restore(); 
    }
    
    private void drawScene(Canvas canvas) {
        canvas.clipRect(0, 0, 100, 100);
       
        canvas.drawColor(Color.WHITE);
       
        mPaint.setColor(Color.RED);
        canvas.drawLine(0, 0, 100, 100, mPaint);
       
        mPaint.setColor(Color.GREEN);
        canvas.drawCircle(30, 70, 30, mPaint);
       
        mPaint.setColor(Color.BLUE);
        canvas.drawText("Clipping", 100, 30, mPaint);
    }
}

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章