国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

Android 開發(fā)手冊(cè) / Canvas API詳解(Part 2)剪切方法合集

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:可以是開放或閉合的曲線,線構(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,直接開始本節(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

1.png

下面我們來(lái)看看個(gè)個(gè)枚舉值所起的作用: 我們假設(shè)兩個(gè)裁剪區(qū)域A和B,那么我們調(diào)用Region.Op對(duì)應(yīng)的枚舉值:

DIFFERENCE:A和B的差集范圍,即A - B,只有在此范圍內(nèi)的繪制內(nèi)容才會(huì)被顯示;

INTERSECT:即A和B的交集范圍,只有在此范圍內(nèi)的繪制內(nèi)容才會(huì)被顯示

UNION:即A和B的并集范圍,即兩者所包括的范圍的繪制內(nèi)容都會(huì)被顯示;

XOR:A和B的補(bǔ)集范圍,此例中即A除去B以外的范圍,只有在此范圍內(nèi)的繪制內(nèi)容才會(huì)被顯示;

REVERSE_DIFFERENCE:B和A的差集范圍,即B - A,只有在此范圍內(nèi)的繪制內(nèi)容才會(huì)被顯示;

REPLACE:不論A和B的集合狀況,B的范圍將全部進(jìn)行顯示,如果和A有交集,則將覆蓋A的交集范圍;

如果你學(xué)過(guò)集合,那么畫個(gè)Venn(韋恩圖)就一清二楚了,沒學(xué)過(guò)?沒事,我們寫個(gè)例子來(lái)試試 對(duì)應(yīng)的結(jié)果~!寫個(gè)初始化畫筆以及畫矩形的方法:

private void init() {
    mPaint = new Paint();
    mPaint.setAntiAlias(true);
    mPaint.setStrokeWidth(6);
    mPaint.setColor(getResources().getColor(R.color.blush));
}

private void drawScene(Canvas canvas){
    canvas.drawRect(0, 0, 200, 200, mPaint);
}

Op.DIFFERENCE

canvas.clipRect(10, 10, 110, 110);        //第一個(gè)
canvas.clipRect(50, 50, 150, 150, Region.Op.DIFFERENCE); //第二個(gè)
drawScene(canvas);

結(jié)果

2.png

先后在(10,10)以及(50,50)為起點(diǎn),裁剪了兩個(gè)100*100的矩形,得出的裁剪結(jié)果是:

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


Op.INTERSECT

canvas.clipRect(10, 10, 110, 110);        //第一個(gè)
canvas.clipRect(50, 50, 150, 150, Region.Op.INTERSECT); //第二個(gè)
drawScene(canvas);

結(jié)果

3.png

先后在(10,10)以及(50,50)為起點(diǎn),裁剪了兩個(gè)100*100的矩形,得出的裁剪結(jié)果是:A和B的交集 =  A和B相交的部分


Op.UNION

canvas.clipRect(10, 10, 110, 110);        //第一個(gè)
canvas.clipRect(40, 40, 140, 140, Region.Op.UNION); //第二個(gè)
drawScene(canvas);

結(jié)果

4.png

先后在(10,10)以及(50,50)為起點(diǎn),裁剪了兩個(gè)100*100的矩形,得出的裁剪結(jié)果是:A和B的并集 =  A的區(qū)域 + B的區(qū)域


Op.XOR

canvas.clipRect(10, 10, 110, 110);        //第一個(gè)
canvas.clipRect(50, 50, 150, 150, Region.Op.XOR); //第二個(gè)
drawScene(canvas);

結(jié)果

5.png

先后在(10,10)以及(50,50)為起點(diǎn),裁剪了兩個(gè)100*100的矩形,得出的裁剪結(jié)果是:A和B的補(bǔ)集 =   A和B的合集 - A和B的交集


Op.REVERSE_DIFFERENCE

canvas.clipRect(10, 10, 110, 110);        //第一個(gè)
canvas.clipRect(50, 50, 150, 150, Region.Op.REVERSE_DIFFERENCE); //第二個(gè)
drawScene(canvas);

結(jié)果

6.png

先后在(10,10)以及(50,50)為起點(diǎn),裁剪了兩個(gè)100*100的矩形,得出的裁剪結(jié)果是:B和A的差集 =   B - A和B的交集


Op.REPLACE

canvas.clipRect(10, 10, 110, 110);        //第一個(gè)
canvas.clipRect(50, 50, 150, 150, Region.Op.REPLACE); //第二個(gè)
drawScene(canvas);

結(jié)果

7.png

先后在(10,10)以及(50,50)為起點(diǎn),裁剪了兩個(gè)100*100的矩形,得出的裁剪結(jié)果是:不論A和B的集合狀況,B的范圍將全部進(jìn)行顯示,如果和A有交集,則將覆蓋A的交集范圍;


2.Region.Op使用實(shí)例:

例子參考自:Android 2D Graphics學(xué)習(xí)(二)、Canvas篇2、Canvas裁剪和Region、RegionIterator

運(yùn)行效果圖

8.gif

關(guān)鍵部分代碼 MyView.java:

/**
 * Created by Jay on 2015/11/10 0010.
 */
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;//顯示還是隱藏的狀態(tài),最開始為HIDE
    private static final boolean SHOW = true;//顯示圖片
    private static final boolean HIDE = false;//隱藏圖片

    public MyView(Context context) {
        this(context, null);
    }

    public MyView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mBitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.img_meizi);
        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) {//計(jì)算clip的區(qū)域
            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) {//如果此時(shí)是隱藏
            limitLength -= 10;
            if(limitLength = width)
                status=HIDE;
        }
        invalidate();
    }
}

實(shí)現(xiàn)分析

初始化的時(shí)候獲得寬高,然后循環(huán),可以理解把圖片分割成一條條的線,循環(huán)條件是:i * 每條的高度 不大于高度,然后線又分兩種情況,調(diào)用的是Region的union,其實(shí)就是結(jié)合方式為UNINO的剪切方式 而已,最后是對(duì)此時(shí)圖片的是否顯示做下判斷,隱藏和顯示的情況做不同的處理,最后調(diào)用invalidate() 重繪!還是蠻簡(jiǎn)單的,自己理解理解吧~

另外要說(shuō)一點(diǎn):Canvas的變換對(duì)clipRegion沒有作用


3.clipRect方法詳解:

clipRect提供了七個(gè)重載方法:

9.png

參數(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é)果

10.png

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


4.clipPath方法詳解:

11.png

相比起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)行效果圖

12.png

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


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

CanvasDemo2.zip

XfermodeDemo1.zip


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

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