當前位置：首頁 > 运维知识 > Android >内容正文

Android

android 六棱形分析图,Android自定义View_菱形图片

發布時間：2023/12/20 Android 39 豆豆

生活随笔收集整理的這篇文章主要介紹了 android 六棱形分析图,Android自定义View_菱形图片小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

自定義菱形圖片.png

前言

在實際項目中，用戶頭像，音樂專輯都有可能用到圓形，菱形等無規則圖像，需要自己自定義View實現相應的功能。

思路

需求：制作圓角菱形的圖片

思路：

1、繪制出圓角矩形的遮罩層；

2、將矩形旋轉45°；

3、使用畫筆的PorterDuffXfermode的SRC_IN屬性；

4、將圖片繪制遮罩層上。

PorterDuffXfermode

PorterDuffXfermode在網上有許多講解它的文章，這里只講解最常用的兩種模式SRC_IN和DST_IN。

SRC_IN：【本文所用的模式】顯示底層圖像和上方圖像的相交區域，且顯示的是上方圖像。如圖所示，先繪制出黃色的底層圖像，再繪制出藍色的圖像，設置的模式為SRC_IN，則顯示的是兩張圖像相交的扇形區域，且為上層藍色圖像。

Picture.png

SRC_IN.png

DST_IN：顯示底層圖像和上方圖像的相交區域，且

顯示的是底層圖像。如圖所示，先繪制出黃色的底層圖像，再繪制出藍色的圖像，設置的模式為DST_IN，則顯示的是兩張圖像相交的扇形區域，且為底層黃色圖像。

DST_IN.png

實現

1、根據圖片的大小繪制出圓角矩形的遮罩層；

// 創建圖片

mImageBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.picture);

// 獲取圖片的寬高

mWidth = mImageBitmap.getWidth();

mHeight = mImageBitmap.getHeight();

mMaskBitmap = Bitmap.createBitmap(mWidth, mHeight, Bitmap.Config.ARGB_8888);

Canvas maskCanvas = new Canvas(mMaskBitmap);

mPaint = new Paint();

mPaint.setColor(Color.YELLOW);

mPaint.setAntiAlias(true);

// 畫布先平移后旋轉

maskCanvas.translate(mWidth / 2, 0);

maskCanvas.rotate(45);

int rectSize = (int) (mWidth / 2 / Math.sin(Math.toRadians(45)));

// 繪制圓角矩形

maskCanvas.drawRoundRect(0, 0, rectSize, rectSize, 50, 50, mPaint);

2、設置兩張圖像的顯示模式為SRC_IN;

mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));

3、這里需要注意的是因為使用的是同一個畫布Canvas，在繪制圓角矩形時已經將畫布旋轉45°并且平移，這里就需要將畫布旋轉平移回到初始狀態，不然圖片就會跟著旋轉，就會如下圖所示。

RotatePicture.png

// 畫布先旋轉后平移，防止圖片也跟著旋轉

maskCanvas.rotate(-45);

maskCanvas.translate(-mWidth / 2, 0);

4、繪制上層圖片

maskCanvas.drawBitmap(mImageBitmap, 0, 0, mPaint);

5、最后在onDraw方法中繪制出最后的圖片；

@Override

protected void onDraw(Canvas canvas) {

canvas.drawBitmap(getBitmap(), 0, 0, null);

}

總結

設計無規則圖形，方法大同小異，可使用PorterDuffXfermode的不同模式實現不同的效果。需要注意的是由于底層和上層的圖像都是同一個Canvas繪制，繪制底層時已經改變了方向，后面繪制上層時需要回復到初始狀態。另外也可以另寫方法創建新的Canvas繪制上層圖像，就不必恢復。

源碼

public class CustomDiamondImage extends View {

private Paint mPaint;

private int mWidth;

private int mHeight;

private Bitmap mMaskBitmap;

private Bitmap mImageBitmap;

public CustomDiamondImage(Context context) {

super(context);

}

public CustomDiamondImage(Context context, AttributeSet attrs) {

super(context, attrs);

}