Canvas API詳解(Part 2)剪切方法合集
本節(jié)引言:
本節(jié)繼續(xù)帶來Android繪圖系列詳解之Canvas API詳解(Part 2),今天要講解的是Canvas 中的ClipXxx方法族!我們可以看到文檔中給我們提供的Clip方法有三種類型:clipPath( ),clipRect( ),clipRegion( );
通過Path,Rect,Region的不同組合,幾乎可以支持任意形狀的裁剪區(qū)域!
Path:可以是開放或閉合的曲線,線構(gòu)成的復(fù)雜的集合圖形
Rect:矩形區(qū)域
Region:可以理解為區(qū)域組合,比如可以將兩個(gè)區(qū)域相加,相減,并,疑惑等!
Region.Op定義了Region支持的區(qū)域間運(yùn)算種類!等下我們會(huì)講到, 另外要說一點(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)無非這個(gè),Region代表著區(qū)域,表示的是Canvas圖層上的某一塊封閉區(qū)域! 當(dāng)然,有時(shí)間你可以自己慢慢去扣這個(gè)類,而我們一般關(guān)注的只是他的一個(gè)枚舉值:Op
下面我們來看看個(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é)過集合,那么畫個(gè)Venn(韋恩圖)就一清二楚了,沒學(xué)過?沒事,我們寫個(gè)例子來試試 對(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é)果:
先后在(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é)果:
先后在(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é)果:
先后在(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é)果:
先后在(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é)果:
先后在(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é)果:
先后在(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)行效果圖:
關(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)單的,自己理解理解吧~
另外要說一點(diǎn):Canvas的變換對(duì)clipRegion沒有作用
3.clipRect方法詳解:
clipRect提供了七個(gè)重載方法:
參數(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)了沒? clipRect會(huì)受Canvas變換的影響,白色區(qū)域是不花的區(qū)域,所以clipRect裁剪的是畫布, 而我們的繪制是在這個(gè)裁剪后的畫布上進(jìn)行的!超過該區(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è)置了 抗鋸齒也沒用~假如你要求高的,可以使用Xfermode-PorterDuff設(shè)置圖像混排來實(shí)現(xiàn), 基本沒鋸齒,可見:Android基礎(chǔ)入門教程——8.3.6 Paint API之—— Xfermode與PorterDuff詳解(三)
5.本節(jié)示例代碼下載:
本節(jié)小結(jié):
好的,本節(jié)給大家講解了下Canvas中剪切有個(gè)的三個(gè)方法:clipPath( ),clipRect( ), clipRegion( ),難點(diǎn)應(yīng)該是在最后一個(gè)上,六種不同的Op組合方式,其實(shí)也不難,集合 的概念而已,放在開頭,消化了就好,而clipPath( ),clipRect( )則沒什么難點(diǎn)~ 對(duì)喔,今天雙11,不知道你剁手了沒~