當(dāng)前位置：首頁(yè) > 运维知识 > Android >内容正文

Android

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

發(fā)布時(shí)間：2023/12/20 Android 34 豆豆

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

自定義菱形圖片.png

前言

在實(shí)際項(xiàng)目中，用戶頭像，音樂(lè)專輯都有可能用到圓形，菱形等無(wú)規(guī)則圖像，需要自己自定義View實(shí)現(xiàn)相應(yīng)的功能。

思路

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

思路：

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

2、將矩形旋轉(zhuǎn)45°；

3、使用畫(huà)筆的PorterDuffXfermode的SRC_IN屬性；

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

PorterDuffXfermode

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

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

Picture.png

SRC_IN.png

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

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

DST_IN.png

實(shí)現(xiàn)

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

// 創(chuàng)建圖片

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);

// 畫(huà)布先平移后旋轉(zhuǎn)

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、設(shè)置兩張圖像的顯示模式為SRC_IN;

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

3、這里需要注意的是因?yàn)槭褂玫氖峭粋€(gè)畫(huà)布Canvas，在繪制圓角矩形時(shí)已經(jīng)將畫(huà)布旋轉(zhuǎn)45°并且平移，這里就需要將畫(huà)布旋轉(zhuǎn)平移回到初始狀態(tài)，不然圖片就會(huì)跟著旋轉(zhuǎn)，就會(huì)如下圖所示。

RotatePicture.png

// 畫(huà)布先旋轉(zhuǎn)后平移，防止圖片也跟著旋轉(zhuǎn)

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);

}

總結(jié)

設(shè)計(jì)無(wú)規(guī)則圖形，方法大同小異，可使用PorterDuffXfermode的不同模式實(shí)現(xiàn)不同的效果。需要注意的是由于底層和上層的圖像都是同一個(gè)Canvas繪制，繪制底層時(shí)已經(jīng)改變了方向，后面繪制上層時(shí)需要回復(fù)到初始狀態(tài)。另外也可以另寫方法創(chuàng)建新的Canvas繪制上層圖像，就不必恢復(fù)。

源碼

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);

}