Android Canvas API詳解(Part 2)剪切方法合集

本節(jié)引言：

本節(jié)繼續(xù)帶來(lái)Android繪圖系列詳解之Canvas API詳解(Part 2)，今天要講解的是Canvas 中的ClipXxx方法族！我們可以看到文檔中給我們提供的Clip方法有三種類型： clipPath( )，clipRect( )，clipRegion( )；

通過(guò)Path，Rect，Region的不同組合，幾乎可以支持任意形狀的裁剪區(qū)域！

Path：可以是開(kāi)放或閉合的曲線，線構(gòu)成的復(fù)雜的集合圖形

Rect：矩形區(qū)域

Region：可以理解為區(qū)域組合，比如可以將兩個(gè)區(qū)域相加，相減，并，疑惑等！

Region.Op定義了Region支持的區(qū)域間運(yùn)算種類！等下我們會(huì)講到， 另外要說(shuō)一點(diǎn)，我們平時(shí)理解的剪切可能是對(duì)已經(jīng)存在的圖形進(jìn)行Clip，但是Android中對(duì) Canvas進(jìn)行Clip，是要在畫圖前進(jìn)行的，如果畫圖后再對(duì)Canvas進(jìn)行Clip的話將不會(huì)影響 到已經(jīng)畫好的圖形，記住Clip是針對(duì)Canvas而非圖形！ 嗯，不BB，直接開(kāi)始本節(jié)內(nèi)容！

官方API文檔：Canvas

1.Region.Op組合方式詳解

其實(shí)難點(diǎn)無(wú)非這個(gè)，Region代表著區(qū)域，表示的是Canvas圖層上的某一塊封閉區(qū)域！ 當(dāng)然，有時(shí)間你可以自己慢慢去扣這個(gè)類，而我們一般關(guān)注的只是他的一個(gè)枚舉值：Op

參數(shù)介紹如下：

rect：Rect對(duì)象，用于定義裁剪區(qū)的范圍，Rect和RectF功能類似，精度和提供的方法不同而已

left：矩形裁剪區(qū)的左邊位置

top：矩形裁剪區(qū)的上邊位置

right：矩形裁剪區(qū)的右邊位置

bottom：矩形裁剪區(qū)的下邊位置

op：裁剪區(qū)域的組合方式

上述四個(gè)值可以是浮點(diǎn)型或者整型

使用示例：

mPaint = new Paint();
mPaint.setAntiAlias(true);
mPaint.setColor(Color.BLACK);
mPaint.setTextSize(60);

canvas.translate(300,300);
canvas.clipRect(100, 100, 300, 300);                //設(shè)置顯示范圍
canvas.drawColor(Color.WHITE);                      //白色背景
canvas.drawText("雙11，繼續(xù)吃我的狗糧...", 150, 300, mPaint); //繪制字符串

運(yùn)行結(jié)果：

從上面的例子，不知道你發(fā)現(xiàn)了沒(méi)？ clipRect會(huì)受Canvas變換的影響，白色區(qū)域是不花的區(qū)域，所以clipRect裁剪的是畫布， 而我們的繪制是在這個(gè)裁剪后的畫布上進(jìn)行的！超過(guò)該區(qū)域的不顯示！

---

4.clipPath方法詳解：

相比起clipRect，clipPath就只有兩個(gè)重載方法，使用方法非常簡(jiǎn)單，自己繪制一個(gè)Paht然后 傳入即可！

使用示例：

這里復(fù)用我們以前在ImageView那里寫的圓形ImageView的例子~

實(shí)現(xiàn)代碼：

自定義ImageView：RoundImageView.java

/**
 * Created by coder-pig on 2015/7/18 0018.
 */
public class RoundImageView extends ImageView {

    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();
    }

    //傳入一個(gè)Bitmap對(duì)象
    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();
    }
}

布局代碼：activity_main.xml:

<com.jay.demo.imageviewdemo.RoundImageView
        android:id="@+id/img_round"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_margin="5px"/>

MainActivity.java:

public class MainActivity extends AppCompatActivity {

    private RoundImageView img_round;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        img_round = (RoundImageView) findViewById(R.id.img_round);
        Bitmap bitmap = BitmapFactory.decodeResource(getResources(),R.mipmap.meinv);
        img_round.setBitmap(bitmap);
    }
}

運(yùn)行效果圖：

另外使用該方法制作的圓角ImageView會(huì)有鋸齒明顯，即使你為Paint，Canvas設(shè)置了 抗鋸齒也沒(méi)用~假如你要求高的，可以使用Xfermode-PorterDuff設(shè)置圖像混排來(lái)實(shí)現(xiàn)， 基本沒(méi)鋸齒，可見(jiàn)：Android基礎(chǔ)入門教程——8.3.6 Paint API之—— Xfermode與PorterDuff詳解(三)

---

5.本節(jié)示例代碼下載：

CanvasDemo2.zip

XfermodeDemo_1.zip

---

本節(jié)小結(jié)：

好的，本節(jié)給大家講解了下Canvas中剪切有個(gè)的三個(gè)方法：clipPath( )，clipRect( )， clipRegion( )，難點(diǎn)應(yīng)該是在最后一個(gè)上，六種不同的Op組合方式，其實(shí)也不難，集合 的概念而已，放在開(kāi)頭，消化了就好，而clipPath( )，clipRect( )則沒(méi)什么難點(diǎn)~ 對(duì)喔，今天雙11，不知道你剁手了沒(méi)~