Android Canvas之drawBitmap方法案例詳解
前面講了paint，后面會花幾篇主要講講canvas，并且由于最近項目比較緊，所以近期的文章都會“短小精悍”；
paint 作為畫筆，里面有非常多而強大的設置方法，比如設置顏色過濾器，設置位圖渲染、漸變，設置圖像的混合模式等等，而canvas呢？里面提供了哪些利器可以為我們所用，一起來看看：
通過上圖我們可以看到，canvas 里的方法基本可以分為這么幾類：
- save、restore 等與層的保存和回滾相關的方法；
- scale、rotate、clipXXX 等對畫布進行操作的方法；
- drawXXX 等一系列繪畫相關的方法；
所以canvas 我們也就可以分上面三塊逐個擊破，今天咱們主要看 drawXXX里的drawBitmap,看完之后一起做一個漂浮星空的小栗子;
在Canvas 里 drawBitmap 有如下方法可用 ：
而咱們也主要講其中的 drawBitmap(Bitmap,Rect,Rect,Paint);
首先咱們創(chuàng)建一個View，照舊重寫里面的 onMeasure、onDraw、onSizeChanged，并且在 onSizeChanged 里拿到view的寬高：
public class DrawBitmapView extends View {
private Resources mResources;
private Paint mBitPaint;
private Bitmap mBitmap;
private Rect mSrcRect, mDestRect;
// view 的寬高
private int mTotalWidth, mTotalHeight;
public DrawBitmapView(Context context) {
super(context);
mResources = getResources();
initBitmap();
initPaint();
}
private void initPaint() {
mBitPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mBitPaint.setFilterBitmap(true);
mBitPaint.setDither(true);
}
private void initBitmap() {
mBitmap = ((BitmapDrawable) mResources.getDrawable(R.drawable.<span style="font-family: Arial, Helvetica, sans-serif;">beautiful_girl</span>))
.getBitmap();
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
mTotalWidth = w;
mTotalHeight = h;
}
}
上面我們通過
mBitmap = ((BitmapDrawable) mResources.getDrawable(R.drawable.<span style="font-family: Arial, Helvetica, sans-serif;">beautiful_girl</span>))
.getBitmap();
拿到了對應的bitmap，這時候我們如果要將它繪制在屏幕上，需要創(chuàng)建兩個Rect，其實只要明白了這兩個Rect的意義并會靈活運用就可以做出不少效果；
第一個Rect 代表要繪制的bitmap 區(qū)域，第二個 Rect 代表的是要將bitmap 繪制在屏幕的什么地方，我們一起來看下：
此時我先定義兩個Rect，mSrcRect 取值為整個Bitmap 區(qū)域 ，mDestRect 取值為view左上方和bitmap同樣大?。?/p>
private Rect mSrcRect, mDestRect;
mSrcRect = new Rect(0, 0, mBitWidth, mBitHeight); mDestRect = new Rect(0, 0, mBitWidth, mBitHeight);
在onDraw 里繪制該位圖：
canvas.drawBitmap(mBitmap, mSrcRect, mDestRect, mBitPaint);
此時繪制效果如下，在屏幕的左上方出現(xiàn)了個美女：
畫在左上方似乎缺乏美感，我們把美女畫在view的中心，沒錯，我們只需要改變mDestRect:
// 計算左邊位置 int left = mHalfWidth - mBitWidth / 2; // 計算上邊位置 int top = mHalfHeight - mBitHeight / 2; mDestRect = new Rect(left, top, left + mBitWidth, top + mBitHeight);
位置計算的時候，只需要注意在android屏幕坐標系里，左上角的位置是（0，0），往右往下為正，此時效果如下：
既然可以如此輕易的改變繪制的位置，那咱們不斷的改變bitmap繪制的位置，模擬一下translate效果；
我們向外提供兩個接口：
public void startTranslate() {
startTranslate(0, 0, 200, 200, 1000);
}
/**
* 移動位圖
*
* @param startLeft 起始左邊距
* @param startTop 起始距上邊距離
* @param toLeft 到達左邊距
* @param toTop 到達上邊距
* @param duration 時長
*/
public void startTranslate(int startLeft, int startTop, int toLeft, int toTop, long duration) {
mStartLeft = startLeft;
mStartTop = startTop;
mToLeft = toLeft;
mToTop = toTop;
// 使用ValueAnimator創(chuàng)建一個過程
ValueAnimator valueAnimator = ValueAnimator.ofFloat(0, 1);
valueAnimator.setDuration(duration);
valueAnimator.setInterpolator(new AccelerateInterpolator());
valueAnimator.addUpdateListener(new AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animator) {
// 不斷重新計算上下左右位置
float fraction = (Float) animator.getAnimatedValue();
int currentLeft = (int) ((mToLeft - mStartLeft) * fraction + mStartLeft);
int currentTop = (int) ((mToTop - mStartTop) * fraction + mStartTop);
if (mDestRect == null) {
mDestRect = new Rect(currentLeft, currentTop, currentLeft + mBitWidth,
currentTop + mBitHeight);
}
mDestRect.left = currentLeft;
mDestRect.right = currentLeft + mBitWidth;
mDestRect.top = currentTop;
mDestRect.bottom = currentTop + mBitHeight;
// 重繪
postInvalidate();
}
});
valueAnimator.start();
}
Activity 里控制view的移動：
final DrawBitmapView drawBitmapView = new DrawBitmapView(this);
setContentView(drawBitmapView, new LayoutParams(LayoutParams.MATCH_PARENT,
LayoutParams.MATCH_PARENT));
drawBitmapView.startTranslate();
drawBitmapView.setOnTouchListener(new OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
Random random = new Random();
int startLeft = random.nextInt(200);
int startTop = random.nextInt(250);
int toLeft = random.nextInt(550) + 200;
int toBottom = random.nextInt(1000) + 250;
drawBitmapView.startTranslate(startLeft, startTop, toLeft, toBottom, 1000);
return true;
}
});
}
點擊之后起始點和到達點隨機生成，此時效果如下：
相信到這里大家已經(jīng)能靈活控制bitmap的位置了，順勢咱們再做個水平縮放為0的小例子：
public void startScale(long duration) {
// 使用ValueAnimator創(chuàng)建一個過程
ValueAnimator valueAnimator = ValueAnimator.ofFloat(1, 0);
valueAnimator.setDuration(duration);
valueAnimator.setInterpolator(new AccelerateInterpolator());
valueAnimator.addUpdateListener(new AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animator) {
// 不斷重新計算上下左右位置
float fraction = (Float) animator.getAnimatedValue();
if (mDestRect == null) {
mDestRect = new Rect(0, 0, mBitWidth,
mBitHeight);
}
mDestRect.right = (int) (fraction * mBitWidth);
// 重繪
postInvalidate();
}
});
valueAnimator.start();
}
只需要不斷減小mDestRect.right即可，非常簡單，看下效果：
上面兩個例子都是通過改變mDestRect ,在哪些時候我們需要動態(tài)改變mSrcRect 呢？我前面講過一個水波紋的例子，那里面就是不斷截取水波紋的一部分，進行展示，由于是連續(xù)截取，所以視覺感受上是連續(xù)波紋效果，有興趣的同學可以看看參考下；
好了本篇就講這么多，有些同學可能會想，尼瑪，這么簡單的玩意兒能做毛線牛逼動效啊，其實往往再復雜的動效也就是由一個個小點組成的，而思路和方案的選取就已經(jīng)決定了能否成功的做出酷炫又如絲般順滑的效果，好的思路又往往來源于對簡單方法的深刻理解
到此這篇關于Android Canvas之drawBitmap方法案例詳解的文章就介紹到這了,更多相關Android Canvas之drawBitmap方法內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
Android自定義View實現(xiàn)兩種二維碼的掃描效果
這篇文章主要為大家詳細介紹了Android如何自定義View實現(xiàn)兩種二維碼的掃描效果,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-01-01
在App開發(fā)中，通常為了省流提高加載速度提升用戶體驗我們通常在列表中或新聞中的插圖都是以縮略圖壓縮過的圖片來進行展示，當用戶點擊圖片時我們再去加載真正像素的大圖讓用戶預覽。本文將利用Flutter實現(xiàn)這一功能，需要的可以參考一下2022-04-04
這篇文章主要為大家分享了Android ActionBar使用教程，感興趣的小伙伴們可以參考一下2016-05-05
這篇文章主要為大家詳細介紹了Android仿微信語音聊天界面設計代碼,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
這篇文章主要為大家詳細介紹了Android貝塞爾曲線實現(xiàn)手指軌跡效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-06-06
Android ImageView 固定寬高比例的實現(xiàn)方法
這篇文章主要介紹了Android ImageView 固定寬高比例的實現(xiàn)方法的相關資料,，方法一：設置 adjustViewBounds="true"，方法二：使用 Universal-Image-Loader 圖片緩存類，需要注意的是方法二和方法一同時使用導致設置無效，需要的朋友可以參考下2017-07-07
這篇文章主要介紹了Android帶清除按鈕、密碼可見小眼睛的輸入框,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-01-01
RecyclerView 是Android L版本中新添加的一個用來取代ListView的SDK,它的靈活性與可替代性比listview更好。本文重點給大家介紹RecyclerView的萬能分割線的知識，非常不錯，感興趣的朋友一起看下吧2016-07-07
Android中自定義PopupWindow實現(xiàn)彈出框并帶有動畫效果
這篇文章主要介紹了Android中自定義PopupWindow實現(xiàn)彈出框并帶有動畫效果的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-09-09
解析:android 如何從JPEG生成BufferedImage
本篇文章是對在android中,如何從JPEG生成BufferedImage的解決方法進行了詳細的分析介紹，需要的朋友參考下2013-06-06