androidclippath

1. android 圓角、圓形 ImageView 實現

我們要實現的圖片控制項繼承自 AppCompatImageView ，它是 ImageView 的子類，但提供了更好的兼容性，我們在此基礎上添加了若干自定義的屬性和方法以實現最終的 NiceImageView ：

要實圓角或者圓形的顯示效果，就是對圖片顯示的內容區域進行「裁剪」，只顯示指定的區域即可。如何做呢？

一種比較直接的辦法是這樣的，由於圖片是被繪制在畫布上的，所以用 canvas 的 clipPath() 方法先將畫布裁剪成指定形狀，這樣就能讓圖片按指定形狀顯示了，重新 draw() 方法即可：

這樣使用 src 、 background 屬性給ImageView設置顯示的圖片都能達到預期的顯示效果。但是由於 clipPath() 方法不支持抗鋸齒，圖片邊緣會有明顯的毛糙感，體驗並不理想，所以需要尋找其它方法。

另一種方法是使用圖像的 Alpha 合成模式 ，即
PorterDuff 來實現， 官方文檔 。這里我們使用其中的 DST_IN 模式。整個過程就是先繪制目標圖像，也就是圖片；再繪制原圖像，即一個圓角矩形或者圓形，這樣最終目標圖像只顯示和原圖像重合的區域。

到這里就實現了顯示為圓角或者圓形了。但是需要通過 src 屬性或者對應的方法來設置圖片，否則不能達到預期效果。

繪制邊框就相對容易理解了，只需要繪制一個指定樣式的圓角矩形或者圓形即可：

當圖片顯示為圓形時，還可以繪制一個內邊框，但圓角矩形的話由於圓角大小的問題，目前只能設置一個邊框咯。

但是有個問題，繪制的邊框會覆蓋在圖片上，如果邊框太寬會導致圖片的可見區域變小了，影像顯示效果，像這樣，左下角的花盆不見了：

那麼如何讓邊框不覆蓋在圖片上呢？可以在 Alpha 合成繪制前先將畫布縮小一定比例，最後再繪制邊框，這樣問題就解決了。

縮放後的ImageView顯示區域的寬高就是原寬、高分別減去2倍的邊框寬度，這樣縮小的比例也就顯而易見了。效果如下，左下角的花盆出來了：

遮罩可以理解為一層帶透明度的顏色，遮罩默認不繪制，當制定了遮罩顏色時才會繪制，實現很簡單：

例如加一個透明度30%的紅色遮罩後的效果：

核心的實現邏輯就這些了，剩下的就是自定義屬性和方法了，有興趣的可以看源碼，都很簡單，希望對你有所幫助吧！

更多細節及用法見GitHub： https://github.com/SheHuan/NiceImageView

如果你需要實現類似釘釘的圓形組合頭像，例如：

2. Android繪圖之Canvas變換（6）

前面講解了Canvas的基本概念， Android繪圖之Canvas概念理解（5） ，
對Canvas的概念進行了分析，但是沒有說明和屏幕的關系，Canvas不等於屏幕，屏幕不會動的，我們也無法對屏幕進行（平移，縮放等）操作，只能對Canvas進行操作，所以對Canvas進行操作，屏幕不動，最終會導致看到的圖像不同。

下面開始講解Canvas的變幻操作：
包括：translate,rotate,scale,skew,clip，clipout，matrix

先從最簡單的平移開始：

對Canvas進行平移，
dx: x軸方向進行平移,正值向屏幕右側
dy：y軸方向進行平移，正值向屏幕下方

繪制兩個點查看原點位置。

原點顯然改變了，以後再繪制任何形狀都是以translate後的原點開始繪制。

參數說明
sx:橫向的縮放，默認為1，小數縮小，整數放大
sy:縱向的縮放，默認為1，小數縮小，整數放大

px，py，看源碼知道是先translate，執行sx,sy然後再translate反方向。
第二次translate的坐標為（-px sx,-px sy）,最終的效果就是px,py是縮放後不動的點。

縮放後坐標減半。

如果想控制縮放後的位置，如何控制呢，這就需要第二個函數。

還可以控制其他位置，例如控制縮放後在中心。

rotate有兩個函數：
rotate(float degrees)
rotate(float degrees, float px, float py)
Degree:旋轉的角度，正值為順時針，負值為逆時針
Px,py:旋轉的中心，如果不指定旋轉中心默認為（0,0）點

指定旋轉中心為矩形中心

參數說明：
sx:畫布在x方向上傾斜相應的角度，sx傾斜角度的tan值，
sy:畫布在y軸方向上傾斜相應的角度，sy為傾斜角度的tan值，

根據矩形或者路徑裁剪畫布，畫布被切割之後，只有部分區域可用，其他區域無法繪制內容。
Clip函數切割的區域可用，clipOut未被切割的區域可用。（過時函數不再講解）

Matrix提供了一些方法來控制變換：

android繪圖之Paint(1)
android繪圖之Canvas基礎（2）
Android繪圖之Path（3）
Android繪圖之drawText繪制文本相關（4）
Android繪圖之Canvas概念理解（5）
Android繪圖之Canvas變換（6）
Android繪圖之Canvas狀態保存和恢復（7）
Android繪圖之PathEffect （8）
Android繪圖之LinearGradient線性漸變（9）
Android繪圖之SweepGradient（10）
Android繪圖之RadialGradient 放射漸變（11）
Android繪制之BitmapShader（12）
Android繪圖之ComposeShader，PorterDuff.mode及Xfermode（13）
Android繪圖之drawText,getTextBounds,measureText,FontMetrics,基線（14）
Android繪圖之貝塞爾曲線簡介（15）
Android繪圖之PathMeasure（16）
Android 動態修改漸變 GradientDrawable

3. android Canvas 裁剪clipPath的時候怎麼過濾鋸齒

去除鋸齒有2中方法
1、mPaint.setAntiAlias(true);

2canvas.setDrawFilter(new PaintFlagsDrawFilter(0, Paint.FILTER_BITMAP_FLAG|Paint.ANTI_ALIAS_FLAG));

4. android的項目里怎麼規定文件路徑的

方法一：把目標文件放入resources文件中，以通過讀取R的資源文件來獲取，具體方式如下：

1、在res下新建raw文件，將帶讀取文件添加到raw文件目錄下。

2、添加如下代碼：

// 如果要使用文件名獲取文件數據：首先獲取資源id然後再通過id獲取輸入流

InputStream im = getResources().openRawResource(R.raw.h_data11);

BufferedReader read = new BufferedReader(new InputStreamReader(im));

String line = "";

StringBuilder sb = new StringBuilder();

try {

while((line = read.readLine()) != null) {

sb.append(line).append("\n");

}

} catch (IOException e) {

e.printStackTrace();

} finally {

if(read != null) {

try {

read.close();

read = null;

} catch (IOException e) {

e.printStackTrace();

}

}

if(im != null) {

try {

im.close();

im = null;

} catch (IOException e) {

e.printStackTrace();

}

}

}

Log.v("", "result = " + sb.toString());

方法二：使用assets 只讀文件進行讀取。

1、將文件到assets下，可以新建文件夾如：「www」然後將文件放入www文件夾中，讀取的path為："www/filename"

String result = "";

ObjectInputStream ois = null;

AssetManager am = context.getResources().getAssets();

try {

ois = new ObjectInputStream(am.open("www/filename"));

result = (String) ois.readObject();

} catch (StreamCorruptedException e) {

e.printStackTrace();

} catch (FileNotFoundException e) {

e.printStackTrace();

} catch (IOException e) {

e.printStackTrace();

} catch (ClassNotFoundException e) {

e.printStackTrace();

} finally {

try {

if (ois != null) {

ois.close();

ois = null;

}

} catch (IOException e) {

e.printStackTrace();

}

}

以對象的方式讀取文件中的數據，如果沒有新建文件夾，把前面的「www/」去掉就ok啦

以上方式我都還有疑問的地方：
1、raw下新建多級目錄是否真的不能夠使用。

5. android 如何重寫imageview 讓圖片有圓角效果

android 自定義圓角ImageView以及鋸齒的處理

看到很多人開發過程中要使用圓角圖片時，解決方法有：

1.重新繪制一張圖片

2.通過布局來配置

3.通過重寫View來實現

其中1，2在這里就不講了，重點講講方法三的實現。

實現一：通過截取畫布一個圓形區域與圖片的相交部分進行繪制，缺點：鋸齒明顯，設置Paint,Canvas抗鋸齒無效。

package com.open.circleimageview.widget;

import android.content.Context;

import android.graphics.Bitmap;

import android.graphics.Canvas;

import android.graphics.Paint;

import android.graphics.PaintFlagsDrawFilter;

import android.graphics.Path;

import android.graphics.Rect;

import android.graphics.Region;

import android.util.AttributeSet;

import android.view.View;

public class CircleImageViewA extends View {

public CircleImageViewA(Context context, AttributeSet attrs, int defStyle) {

super(context, attrs, defStyle);

}

public CircleImageViewA(Context context, AttributeSet attrs) {

super(context, attrs);

}

public CircleImageViewA(Context context) {

super(context);

}

private Bitmap bitmap;

private Rect bitmapRect=new Rect();

private PaintFlagsDrawFilter pdf=new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG|Paint.FILTER_BITMAP_FLAG);

private Paint paint = new Paint();

{

paint.setStyle(Paint.Style.STROKE);

paint.setFlags(Paint.ANTI_ALIAS_FLAG);

paint.setAntiAlias(true);// 設置畫筆的鋸齒效果。 true是去除，大家一看效果就明白了

}

private Path mPath=new Path();

public void setImageBitmap(Bitmap bitmap)

{

this.bitmap=bitmap;

}

@Override

protected void onDraw(Canvas canvas) {

if(null==bitmap)

{

return;

}

bitmapRect.set(0, 0, getWidth(), getHeight());

canvas.save();

canvas.setDrawFilter(pdf);

mPath.reset();

canvas.clipPath(mPath); // makes the clip empty

mPath.addCircle(getWidth()/2, getWidth()/2, getHeight()/2, Path.Direction.CCW);

canvas.clipPath(mPath, Region.Op.REPLACE);

canvas.drawBitmap(bitmap, null, bitmapRect, paint);

canvas.restore();

}

}

實現二：通過PorterDuffXfermode 方式（注意要設置硬體加速，否則部分機子無效），優點：鋸齒基本沒有

package com.open.circleimageview.widget;

import android.content.Context;

import android.graphics.Bitmap;

import android.graphics.Canvas;

import android.graphics.Color;

import android.graphics.Paint;

import android.graphics.PaintFlagsDrawFilter;

import android.graphics.PorterDuff;

import android.graphics.PorterDuffXfermode;

import android.graphics.Rect;

import android.graphics.RectF;

import android.util.AttributeSet;

import android.view.View;

public class CircleImageViewB extends View {

public CircleImageViewB(Context context, AttributeSet attrs, int defStyle) {

super(context, attrs, defStyle);

init();

}

public CircleImageViewB(Context context, AttributeSet attrs) {

super(context, attrs);

init();

}

public CircleImageViewB(Context context) {

super(context);

init();

}

private Bitmap bitmap;

private Rect bitmapRect=new Rect();

private PaintFlagsDrawFilter pdf=new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG|Paint.FILTER_BITMAP_FLAG);

private Paint paint = new Paint();

{

paint.setStyle(Paint.Style.STROKE);

paint.setFlags(Paint.ANTI_ALIAS_FLAG);

paint.setAntiAlias(true);// 設置畫筆的鋸齒效果。 true是去除，大家一看效果就明白了

}

private Bitmap mDstB=null;

private PorterDuffXfermode xfermode=new PorterDuffXfermode(PorterDuff.Mode.MULTIPLY);

private void init()

{

try {

if(android.os.Build.VERSION.SDK_INT>=11)

{

setLayerType(LAYER_TYPE_SOFTWARE, null);

}

} catch (Exception e) {

e.printStackTrace();

}

}

public void setImageBitmap(Bitmap bitmap)

{

this.bitmap=bitmap;

}

private Bitmap makeDst(int w, int h)

{

Bitmap bm = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);

Canvas c = new Canvas(bm);

Paint p = new Paint(Paint.ANTI_ALIAS_FLAG);

p.setColor(Color.parseColor("#ffffffff"));

c.drawOval(new RectF(0, 0, w, h), p);

return bm;

}

@Override

protected void onDraw(Canvas canvas) {

if(null==bitmap)

{

return;

}

if(null==mDstB)

{

mDstB=makeDst(getWidth(), getHeight());

}

bitmapRect.set(0, 0, getWidth(), getHeight());

canvas.save();

canvas.setDrawFilter(pdf);

canvas.drawBitmap(mDstB, 0, 0, paint);

paint.setXfermode(xfermode);

canvas.drawBitmap(bitmap, null, bitmapRect, paint);

paint.setXfermode(null);

canvas.restore();

}

}