Canvas开篇之drawBitmap方法讲解_H5之家 - 中国HTML5教程资源分享第一站

Canvas开篇之drawBitmap方法讲解

原创 2015年04月14日 10:04:00

52418

编辑

删除

我正在参加 CSDN 2015博客之星评选感恩分享活动，如果觉得文章还不错，请投个票鼓励下吧：?username=tianjian4592

尊重原创，欢迎转载，转载请注明： FROM GA_studio

前面讲了paint，后面会花几篇主要讲讲canvas，并且由于最近项目比较紧，所以近期的文章都会“短小精悍”；

paint 作为画笔，里面有非常多而强大的设置方法，比如设置颜色过滤器，设置位图渲染、渐变，设置图像的混合模式等等，而canvas呢？里面提供了哪些利器可以为我们所用，一起来看看：

通过上图我们可以看到，canvas 里的方法基本可以分为这么几类：

1. save、restore 等与层的保存和回滚相关的方法；

2. scale、rotate、clipXXX 等对画布进行操作的方法；

3. drawXXX 等一系列绘画相关的方法；

所以canvas 我们也就可以分上面三块逐个击破，今天咱们主要看 drawXXX里的drawBitmap,看完之后一起做一个漂浮星空的小栗子;

在Canvas 里 drawBitmap 有如下方法可用：

而咱们也主要讲其中的 drawBitmap(Bitmap,Rect,Rect,Paint);

首先咱们创建一个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，这时候我们如果要将它绘制在屏幕上，需要创建两个Rect，其实只要明白了这两个Rect的意义并会灵活运用就可以做出不少效果；

第一个Rect 代表要绘制的bitmap 区域，第二个 Rect 代表的是要将bitmap 绘制在屏幕的什么地方，我们一起来看下：

此时我先定义两个Rect，mSrcRect 取值为整个Bitmap 区域，mDestRect 取值为view左上方和bitmap同样大小；

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);
此时绘制效果如下，在屏幕的左上方出现了个美女：

画在左上方似乎缺乏美感，我们把美女画在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效果；