文章目錄

• • 1. 位圖渲染 BitmapShader 簡介
  • • ( 1 ) 位圖渲染綜述 ( ① 三種方式 : Shader.TileMode.CLAMP | Shader.TileMode.REPEAT | Shader.TileMode.MIRROR | ② 流程 : 創建 Shader | 設置 Shader 到 Paint | 打開抗鋸齒 | 繪制矩形 )
  • 2. 位圖渲染 BitmapShader 三種參數 及 代碼示例
  • • ( 1 ) 位圖渲染 CLAMP 拉伸 代碼示例 及 效果 ( 繪制超出圖片邊界時, 就會繪制 水平 或 垂直方向 上最后一個像素, 填充剩余的位置 )
    • ( 2 ) 位圖渲染 REPEAT 拉伸 代碼示例 及 效果 ( 繪制超出圖片邊界時, 就會繪制 同樣的圖片 填充剩余部分 )
    • ( 3 ) 位圖渲染 MIRROR 拉伸 代碼示例 及 效果 ( 在垂直和水平方向繪制圖片的對應方向的反向圖片 )

相關代碼地址 :

• 1.GitHub 項目展示地址 : UI_Demos_4_CSDN_Blog
• 2.本博客相關代碼地址 :
  • ① CLAMP 渲染 : PaintBitmapShaderClamp.java
  • ② REPEAT 渲染 : PaintBitmapShaderRepeat.java
  • ③ MIRROR 渲染 : PaintBitmapShaderMirror.java

1. 位圖渲染 BitmapShader 簡介

( 1 ) 位圖渲染綜述 ( ① 三種方式 : Shader.TileMode.CLAMP | Shader.TileMode.REPEAT | Shader.TileMode.MIRROR | ② 流程 : 創建 Shader | 設置 Shader 到 Paint | 打開抗鋸齒 | 繪制矩形 )

位圖渲染 :

• 1.主要實現的功能 : 位圖渲染就是 將一個位圖, 通過特定的方式繪制到指定的矩形區域中, 解決 Bitmap 位圖的寬高 與 繪制區域寬高 不一致時如何進行渲染 的 問題;
• 2.渲染流程 :
  • ① 創建 BitmapShader
  • ② 為 Paint 設置 著色器 Shader
  • ③ 打開抗鋸齒
  • ④ 繪制一個矩形區域
• 3.創建 BitmapShader : 調用 BitmapShader 構造方法創建著色器, 同時 設置 位圖引用, 和 繪制位圖時 的 X 和 Y 方向的拉伸方式 , 位圖的 拉伸方式 在后面有介紹 , 下面是三個參數說明 :
  • ① Bitmap bitmap 參數 : 渲染所用的位圖 ;
  • ② TileMode tileX 參數 : 設置繪制位圖時的 x 方向的拉伸方式 ;
  • ③ TileMode tileY : 設置繪制位圖時的 y 方向的拉伸方式 ;

/*** 調用該構造函數創建一個新的著色器, 用于繪制位圖** @param bitmap 將要繪制的位圖* @param tileX 設置繪制位圖時的 x 方向的拉伸方式* @param tileY 設置繪制位圖時的 y 方向的拉伸方式*/public BitmapShader(@NonNull Bitmap bitmap, @NonNull TileMode tileX, @NonNull TileMode tileY) {this(bitmap, tileX.nativeInt, tileY.nativeInt);}

• 4.三種位圖的拉伸方式 :
  • ① Shader.TileMode.CLAMP : 如果繪制的位置超出了圖像的邊界, 那么超出部分 使用最后一個像素的顏色值繪制 ;
  • ② Shader.TileMode.REPEAT : 繪圖位置超出了邊界, 使用 同樣的位圖進行平鋪 剩余繪制的部分;
  • ③ Shader.TileMode.MIRROR : 繪圖位置超出了邊界, 使用 位圖反轉鏡像 平鋪剩余繪制部分;
    

public class Shader {...public enum TileMode {/*** replicate the edge color if the shader draws outside of its* original bounds*/CLAMP (0),/*** repeat the shader's image horizontally and vertically*/REPEAT (1),/*** repeat the shader's image horizontally and vertically, alternating* mirror images so that adjacent images always seam*/MIRROR (2);TileMode(int nativeInt) {this.nativeInt = nativeInt;}final int nativeInt;}... }

• 5.為 畫筆 設置 著色器 : 調用 Paint 對象 的 setShader 方法為 畫筆設置 著色器;
• 6.打開抗鋸齒 : 調用 Paint 對象的 setAntiAlias 方法, 打開抗鋸齒, 這樣 位圖的邊界會更平滑, paint.setAntiAlias(true) ;
• 7.繪制矩形 : 調用 Canvas 的 drawRect 的方法, 繪制矩形, 位圖在該矩形中繪制; canvas.drawRect(new Rect(0,0 , 100, 100),mPaint); ;
• 8.使用示例 : 下面是位圖渲染 的簡單示例;

@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);canvas.drawColor(Color.WHITE);Paint mPaint = new Paint();Bitmap mBitmap = ((BitmapDrawable)getResources().getDrawable(R.mipmap.aodesai)).getBitmap();//1. 創建位圖渲染對象, 并設置拉伸方式, 此處設置Shader.TileMode.CLAMP,// 如果繪制的位置超出了圖像的邊界, 那么超出部分 使用最后一個像素的顏色值繪制BitmapShader bitmapShader = new BitmapShader(mBitmap,Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);//2. 設置渲染到 Paint 對象mPaint.setShader(bitmapShader);//3. 打開抗鋸齒mPaint.setAntiAlias(true);//4. 繪制指定的矩形區域canvas.drawRect(0, 0, getWidth(), getHeight(), mPaint);}

---

2. 位圖渲染 BitmapShader 三種參數 及 代碼示例

( 1 ) 位圖渲染 CLAMP 拉伸 代碼示例 及 效果 ( 繪制超出圖片邊界時, 就會繪制 水平 或 垂直方向 上最后一個像素, 填充剩余的位置 )

CLAMP 拉伸 :

• 1.CLAMP 說明 : 在創建 BitmapShader 的時候, 設置其 水平 和 垂直方向的 拉伸方式為 Shader.TileMode.CLAMP , 則在繪制超出圖片邊界時, 就會繪制 水平 或 垂直方向 上最后一個像素, 填充剩余的位置 ;
• 2.展示效果 :
  
• 2.代碼示例 :

package com.hanshuliang.shader.widget;import android.content.Context; import android.graphics.Bitmap; import android.graphics.BitmapShader; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.ComposeShader; import android.graphics.LinearGradient; import android.graphics.Paint; import android.graphics.PorterDuff; import android.graphics.Shader; import android.graphics.drawable.BitmapDrawable; import android.support.annotation.Nullable; import android.util.AttributeSet; import android.view.View;import com.hanshuliang.shader.R;public class PaintBitmapShaderClamp extends View {public PaintBitmapShaderClamp(Context context) {super(context);}public PaintBitmapShaderClamp(Context context, @Nullable AttributeSet attrs) {super(context, attrs);}public PaintBitmapShaderClamp(Context context, @Nullable AttributeSet attrs,int defStyleAttr) {super(context, attrs, defStyleAttr);}@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);canvas.drawColor(Color.WHITE);Paint mPaint = new Paint();Bitmap mBitmap = ((BitmapDrawable)getResources().getDrawable(R.mipmap.aodesai)).getBitmap();//1. 創建位圖渲染對象, 并設置拉伸方式, 此處設置Shader.TileMode.CLAMP,// 如果繪制的位置超出了圖像的邊界, 那么超出部分 使用最后一個像素的顏色值繪制BitmapShader bitmapShader = new BitmapShader(mBitmap,Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);//2. 設置渲染到 Paint 對象mPaint.setShader(bitmapShader);//3. 打開抗鋸齒mPaint.setAntiAlias(true);//4. 繪制指定的矩形區域canvas.drawRect(0, 0, getWidth(), getHeight(), mPaint);} }

---

( 2 ) 位圖渲染 REPEAT 拉伸 代碼示例 及 效果 ( 繪制超出圖片邊界時, 就會繪制 同樣的圖片 填充剩余部分 )

REPEAT 拉伸 :

• 1.REPEAT 說明 : 在創建 BitmapShader 的時候, 設置其 水平 和 垂直方向的 拉伸方式為 Shader.TileMode.REPEAT , 則在繪制超出圖片邊界時, 就會繪制 同樣的圖片 填充剩余部分 ;
• 2.展示效果 :
  
• 2.代碼示例 :

package com.hanshuliang.shader.widget;import android.content.Context; import android.graphics.Bitmap; import android.graphics.BitmapShader; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.Shader; import android.graphics.drawable.BitmapDrawable; import android.support.annotation.Nullable; import android.util.AttributeSet; import android.view.View;import com.hanshuliang.shader.R;public class PaintBitmapShaderRepeat extends View {public PaintBitmapShaderRepeat(Context context) {super(context);}public PaintBitmapShaderRepeat(Context context, @Nullable AttributeSet attrs) {super(context, attrs);}public PaintBitmapShaderRepeat(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);}@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);canvas.drawColor(Color.WHITE);Paint mPaint = new Paint();Bitmap mBitmap = ((BitmapDrawable)getResources().getDrawable(R.mipmap.aodesai)).getBitmap();//1. 創建位圖渲染對象, 并設置拉伸方式, 此處設置Shader.TileMode.CLAMP, // 如果繪制的位置超出了圖像的邊界, 使用平鋪方式填充BitmapShader bitmapShader = new BitmapShader(mBitmap, Shader.TileMode.REPEAT, Shader.TileMode.REPEAT);//2. 設置渲染到 Paint 對象mPaint.setShader(bitmapShader);//3. 打開抗鋸齒mPaint.setAntiAlias(true);//4. 繪制指定的矩形區域canvas.drawRect(0, 0, getWidth(), getHeight(), mPaint);} }

---

( 3 ) 位圖渲染 MIRROR 拉伸 代碼示例 及 效果 ( 在垂直和水平方向繪制圖片的對應方向的反向圖片 )

MIRROR 拉伸 :

• 1.MIRROR 說明 : 在創建 BitmapShader 的時候, 設置其 水平 和 垂直方向的 拉伸方式為 Shader.TileMode.MIRROR , 則在繪制超出圖片邊界時, 就會繪制 圖片的 鏡像翻轉方式 鋪滿剩余部分;
• 2.展示效果 :
  
• 2.代碼示例 :

package com.hanshuliang.shader.widget;import android.content.Context; import android.graphics.Bitmap; import android.graphics.BitmapShader; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.Shader; import android.graphics.drawable.BitmapDrawable; import android.support.annotation.Nullable; import android.util.AttributeSet; import android.view.View;import com.hanshuliang.shader.R;public class PaintBitmapShaderMirror extends View {public PaintBitmapShaderMirror(Context context) {super(context);}public PaintBitmapShaderMirror(Context context, @Nullable AttributeSet attrs) {super(context, attrs);}public PaintBitmapShaderMirror(Context context, @Nullable AttributeSet attrs,int defStyleAttr) {super(context, attrs, defStyleAttr);}@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);canvas.drawColor(Color.WHITE);Paint mPaint = new Paint();Bitmap mBitmap = ((BitmapDrawable)getResources().getDrawable(R.mipmap.aodesai)).getBitmap();//1. 創建位圖渲染對象, 并設置拉伸方式, 此處設置Shader.TileMode.CLAMP,// 如果繪制的位置超出了圖像的邊界, 那么超出部分 使用鏡像平鋪方式填充BitmapShader bitmapShader = new BitmapShader(mBitmap,Shader.TileMode.MIRROR, Shader.TileMode.MIRROR);//2. 設置渲染到 Paint 對象mPaint.setShader(bitmapShader);//3. 打開抗鋸齒mPaint.setAntiAlias(true);//4. 繪制指定的矩形區域canvas.drawRect(0, 0, getWidth(), getHeight(), mPaint);} }

---

相關代碼地址 :

• 1.GitHub 項目展示地址 : UI_Demos_4_CSDN_Blog
• 2.本博客相關代碼地址 :
  • ① CLAMP 渲染 : PaintBitmapShaderClamp.java
  • ② REPEAT 渲染 : PaintBitmapShaderRepeat.java
  • ③ MIRROR 渲染 : PaintBitmapShaderMirror.java

總結

以上是生活随笔為你收集整理的【Android 应用开发】Paint 渲染 之 BitmapShader 位图渲染 ( 渲染流程 | CLAMP 拉伸最后像素 | REPEAT 重复绘制图片 | MIRROR 绘制反向图片 )的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。