Penjelasan terperinci tentang koleksi kaedah pemotongan API Kanvas (Bahagian 2).


Pengenalan kepada bahagian ini:

Bahagian ini terus membawa penjelasan terperinci tentang siri lukisan Android - API Kanvas (Bahagian 2 Hari ini kami akan menerangkan Kanvas). Keluarga kaedah ClipXXx masuk! Kami dapat melihat bahawa terdapat tiga jenis kaedah Klip yang diberikan kepada kami dalam dokumen: clipPath( ), clipRect( ), clipRegion( ); >

Melalui gabungan Path, Rect, dan Region yang berbeza, hampir semua bentuk kawasan tanaman boleh disokong!

Laluan: Ia boleh menjadi lengkung terbuka atau tertutup, koleksi garisan kompleks yang terdiri daripada grafik

Rect: Kawasan segi empat tepat

Wilayah: Ia boleh difahami sebagai gabungan wilayah Contohnya, dua wilayah boleh ditambah, ditolak, digabungkan, dikelirukan, dsb.

Region.Op mentakrifkan jenis operasi antara wilayah yang disokong oleh Wilayah! Nanti kita bincangkan, Perkara lain yang perlu diperkatakan ialah perkara yang biasa kita fahami sebagai keratan mungkin untuk menggunting grafik sedia ada, tetapi dalam Android, keratan Klip pada Kanvas mesti dilakukan sebelum melukis Jika anda Klip pada Kanvas selepas melukis, ia tidak akan menjejaskan Pergi ke grafik yang dilukis, ingat bahawa Klip adalah untuk Kanvas, bukan grafik! Baiklah, tiada BB, mari mulakan bahagian ini secara langsung!

Dokumen API Rasmi: Kanvas

1. Penjelasan terperinci tentang kaedah gabungan Region.Op

Malah, kesukaran tidak lebih daripada ini adalah Wilayah mewakili rantau, yang mewakili kawasan tertutup tertentu pada lapisan Kanvas! Sudah tentu, jika anda mempunyai masa, anda boleh menolak kelas ini secara perlahan-lahan dan perkara yang biasanya kami fokuskan hanyalah salah satu daripada nilai penghitungannya:

Op

1.png Mari kita lihat lihat setiap satu Peranan nilai penghitungan: Kami menganggap dua kawasan tanaman A dan B, kemudian kami memanggil nilai penghitungan yang sepadan dengan Wilayah. Op:

PERBEZAAN: set perbezaan julat A dan B, Iaitu, A - B, hanya kandungan lukisan dalam julat ini yang akan dipaparkan; dalam julat ini Hanya kandungan lukisan dalam

UNION: iaitu, julat uni A dan B, iaitu kandungan lukisan julat yang disertakan dalam kedua-duanya akan dipaparkan. kandungan dalam julat ini akan dipaparkan;

REVERSE_DIFFERENCE: julat perbezaan B dan A, iaitu B - A, hanya kandungan lukisan dalam ini julat akan dipaparkan;

GANTIKAN: Tidak kira status koleksi A dan B, julat B akan dipaparkan sepenuhnya Jika ia bersilang dengan A, julat persilangan A akan dipaparkan dilindungi; Jika anda telah mempelajari set, maka lukisan Venn (rajah Venn) akan menjadi jelas kepada anda. Tidak mengapa, mari kita cuba dengan menulis contoh Hasil yang sepadan~! Tulis kaedah untuk memulakan berus dan melukis segi empat tepat: 

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.PERBEZAAN: 

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

Keputusan:

2.png

Menggunakan (10,10) dan (50,50) sebagai titik permulaan, dua segi empat tepat 100*100 telah dipotong Hasil pemangkasan ialah:

Perbezaan antara A dan B = A - (The. persimpangan A dan B)

Op.INTERSEK:

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

Hasil:

3.png

Menggunakan (10,10) dan (50,50) sebagai titik permulaan, dua segi empat tepat 100*100 telah dipotong A dan B

Op.UNION:
canvas.clipRect(10, 10, 110, 110);        //第一个
canvas.clipRect(40, 40, 140, 140, Region.Op.UNION); //第二个
drawScene(canvas);

Keputusan:

4.png

Menggunakan (10,10) dan (50,50) sebagai titik permulaan, dua segi empat tepat 100*100 telah dipotong Hasil pemangkasan ialah:

A dan B Penyatuan kawasan A + B <🎜. >

Op. >

Potong dua segi empat tepat 100*100 daripada (10,10) dan (50,50) sebagai titik permulaan. Hasil pemangkasan ialah:

A dan pelengkap B = set A dan B - persilangan A dan B

5.pngOp.REVERSE_DIFFERENCE

: 

canvas.clipRect(10, 10, 110, 110);        //第一个
canvas.clipRect(50, 50, 150, 150, Region.Op.XOR); //第二个
drawScene(canvas);
hasil

:

Potong dua 100*100 segi empat tepat daripada (10,10) dan (50,50) sebagai permulaan mata, dan hasil pemangkasan diperoleh Ia adalah:

Perbezaan antara B dan A = B - persilangan A dan B

6.pngOp.GANTIKAN

canvas.clipRect(10, 10, 110, 110);        //第一个
canvas.clipRect(50, 50, 150, 150, Region.Op.REVERSE_DIFFERENCE); //第二个
drawScene(canvas);
Keputusan

:

potong dua 100*100 segi empat tepat daripada (10,10) dan (50,50) sebagai permulaan mata, dan pemangkasan yang terhasil Hasilnya ialah:

Tanpa mengira status set A dan B, julat B akan dipaparkan sepenuhnya Jika ia bersilang dengan A, julat persimpangan A akan diliputi;

2. Contoh penggunaan Wilayah.Op:

7.pngContoh rujukan daripada:

Pembelajaran Grafik 2D Android (2), Bahagian Kanvas 2, Keratan Kanvas dan Wilayah, RegionIterator

Jalankan Rendering
:

Kod bahagian utama MyView.java:

rreee

Analisis pelaksanaan

: 8.gif

Dapatkan lebar dan ketinggian semasa pemulaan, dan kemudian gelung Anda boleh memahami bahawa gambar dibahagikan kepada garisan Keadaan gelung ialah: i * ketinggian setiap baris. Tidak lebih tinggi daripada ketinggian, dan kemudian garis dibahagikan kepada dua situasi Kesatuan Wilayah dipanggil, yang sebenarnya kaedah pemotongan UNINO. Itu sahaja, kami membuat pertimbangan sama ada imej dipaparkan pada masa ini, mengendalikan situasi penyembunyian dan paparan secara berbeza, dan akhirnya memanggil invalidate() Lukis semula! Ia agak mudah, cuma faham sendiri~

Perkara lain: Transformasi kanvas tidak mempunyai kesan pada clipRegion

3. Penjelasan terperinci kaedah clipRect:

clipRect menyediakan tujuh kaedah terlebih beban:

9.png

Parameter diperkenalkan seperti berikut:

betul: Rect object, digunakan untuk mentakrifkan julat kawasan pemangkasan Rect dan RectF mempunyai fungsi yang sama, tetapi ketepatannya berbeza daripada kaedah yang disediakan

kiri: Kedudukan kiri. kawasan tanaman segi empat tepat

atas: Kedudukan atas kawasan tanaman segi empat tepat

kanan: Kedudukan kanan kawasan tanaman segi empat tepat

bawah : Kedudukan bawah kawasan tanaman segi empat tepat

op: Kaedah gabungan kawasan tanaman

Empat nilai di atas ​​boleh menjadi titik terapung atau integer

Contoh penggunaan:

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

Hasil jalankan:

10.png

Daripada contoh di atas, saya tidak tahu Adakah anda perasan? clipRect akan dipengaruhi oleh transformasi Kanvas Kawasan putih ialah kawasan yang tidak disimbah, jadi clipRect memangkas kanvas. Dan lukisan kami dilakukan pada kanvas yang dipotong ini! Apa-apa di luar kawasan ini tidak akan dipaparkan!

4. Penjelasan terperinci kaedah clipPath:

11.png

Berbanding dengan clipRect, clipPath hanya mempunyai dua kaedah penggunaan yang sangat mudah Anda boleh Lukis Paht kemudian Masukkan sahaja!

Contoh penggunaan:

Di sini kami menggunakan semula contoh ImageView bulat yang kami tulis sebelum ini dalam ImageView~

Kod pelaksanaan:

Paparan Imej Tersuai: RoundImageView.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;//显示还是隐藏的状态，最开始为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) {//计算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 = width)
                status=HIDE;
        }
        invalidate();
    }
}

Kod reka letak: activity_main.xml:

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

canvas.translate(300,300);
canvas.clipRect(100, 100, 300, 300);                //设置显示范围
canvas.drawColor(Color.WHITE);                      //白色背景
canvas.drawText("双11，继续吃我的狗粮...", 150, 300, mPaint); //绘制字符串

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


    //传入一个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();
    }
}

Menjalankan rendering:

12.png

Selain itu, ImageView bulat yang dihasilkan menggunakan kaedah ini akan mempunyai tepi bergerigi yang jelas, walaupun anda Tetapkan untuk Cat, Kanvas Anti-aliasing tidak berguna~ Jika anda mempunyai keperluan yang tinggi, anda boleh menggunakan Xfermode-PorterDuff untuk menetapkan shuffling imej untuk mencapainya. Pada asasnya tiada aliasing, anda boleh lihat:

Tutorial pengenalan asas Android - 8.3.6 Paint API - Penjelasan terperinci tentang Xfermode dan PorterDuff (3)

5. Muat turun contoh kod dalam bahagian ini:

CanvasDemo2.zip

XfermodeDemo1.zip

Ringkasan bahagian ini:

Baiklah, bahagian ini akan menerangkan kepada anda tiga kaedah pemotongan dalam Kanvas: clipPath(), clipRect(), clipRegion(), kesukaran harus dalam yang terakhir Terdapat enam kombinasi Op yang berbeza, sebenarnya, ia tidak sukar Ia hanya satu konsep, letak sahaja di permulaan dan cernakannya, tetapi clipPath() dan clipRect() tidak sukar~ Ya, ia adalah Double 11 hari ini, saya tertanya-tanya jika anda telah melakukannya~13.jpg