android绘图处理系列（一）：bitmapShader和Xfermode

BitmapShader

Bitmapshader类似于Paint的一个渲染器。他的作用就是画bitmap作为纹理，可以将bitmap设置为三种模式。我们先看怎么用

mBitmapShader = new BitmapShader(bitmap, TileMode.CLAMP, TileMode.CLAMP);
paint.setShader(mBitmapShader);

这里的TileMode有三种：

Clamp：拉伸，它会将图片最右边或最下边的一行像素进行拉伸到填满屏幕。

Repeat：重复，它会将图片不变更画面的顺序按实际显示来一个一个堆放起来。

Mirror：镜像，它会将图片的右边或下边进行镜像翻转再堆放起来。

实例：圆角和圆形图片

@Override
protected void onDraw(Canvas canvas)
{
if (getDrawable() == null)
{
return;
}
setUpShader();
if (type == TYPE_ROUND)
{
canvas.drawRoundRect(mRoundRect, mBorderRadius, mBorderRadius,
mBitmapPaint);
} else
{
canvas.drawCircle(mRadius, mRadius, mRadius, mBitmapPaint);
// drawSomeThing(canvas);
}
}

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh)
{
super.onSizeChanged(w, h, oldw, oldh);
// 圆角图片的范围
if (type == TYPE_ROUND)
mRoundRect = new RectF(0, 0, getWidth(), getHeight());
}

判断圆角和圆形，分别进行不同的处理

private void setUpShader()
{
Drawable drawable = getDrawable();
if (drawable == null)
{
return;
}
Bitmap bmp = drawableToBitamp(drawable);
// 将bmp作为着色器，就是在指定区域内绘制bmp
mBitmapShader = new BitmapShader(bmp, TileMode.CLAMP, TileMode.CLAMP);
float scale = 1.0f;
if (type == TYPE_CIRCLE)
{
// 拿到bitmap宽或高的小值
int bSize = Math.min(bmp.getWidth(), bmp.getHeight());
scale = mWidth * 1.0f / bSize;
} else if (type == TYPE_ROUND)
{
// 如果图片的宽或者高与view的宽高不匹配，计算出需要缩放的比例；缩放后的图片的宽高，一定要大于我们view的宽高；所以我们这里取大值；
scale = Math.max(getWidth() * 1.0f / bmp.getWidth(), getHeight()
* 1.0f / bmp.getHeight());
}
// shader的变换矩阵，我们这里主要用于放大或者缩小
mMatrix.setScale(scale, scale);
// 设置变换矩阵
mBitmapShader.setLocalMatrix(mMatrix);
// 设置shader
mBitmapPaint.setShader(mBitmapShader);
}

Xfermode

Xfermode的几种模式：

其中，先绘制Dst，再绘制src，它会根据不同模式来确定需要使用的地方，我们在这里使用的就是DstIn。我猜想是把原图放成Dst，把一个圆角矩形或者圆形放成src。这样就可以获取到交集了。

下面一步步分析一下。

首先，我们在draw中获取到设置给imageview的长宽

//拿到Drawable
Drawable drawable = getDrawable();
//获取drawable的宽和高
int dWidth = drawable.getIntrinsicWidth();
int dHeight = drawable.getIntrinsicHeight();

接下来

if (drawable != null)
{
//创建bitmap
bitmap = Bitmap.createBitmap(getWidth(), getHeight(),
Config.ARGB_8888);
float scale = 1.0f;
//创建画布
Canvas drawCanvas = new Canvas(bitmap);
//按照bitmap的宽高，以及view的宽高，计算缩放比例；因为设置的src宽高比例可能和imageview的宽高比例不同，这里我们不希望图片失真；
if (type == TYPE_ROUND)
{
// 如果图片的宽或者高与view的宽高不匹配，计算出需要缩放的比例；缩放后的图片的宽高，一定要大于我们view的宽高；所以我们这里取大值；
scale = Math.max(getWidth() * 1.0f / dWidth, getHeight()
* 1.0f / dHeight);
} else
{
scale = getWidth() * 1.0F / Math.min(dWidth, dHeight);
}
//根据缩放比例，设置bounds，相当于缩放图片了
drawable.setBounds(0, 0, (int) (scale * dWidth),
(int) (scale * dHeight));
drawable.draw(drawCanvas);
if (mMaskBitmap == null || mMaskBitmap.isRecycled())
{
mMaskBitmap = getBitmap();
}
// Draw Bitmap.
mPaint.reset();
mPaint.setFilterBitmap(false);
mPaint.setXfermode(mXfermode);
//绘制形状
drawCanvas.drawBitmap(mMaskBitmap, 0, 0, mPaint);
mPaint.setXfermode(null);
//将准备好的bitmap绘制出来
canvas.drawBitmap(bitmap, 0, 0, null);
//bitmap缓存起来，避免每次调用onDraw，分配内存
mWeakBitmap = new WeakReference<Bitmap>(bitmap);
}
}
//如果bitmap还存在，则直接绘制即可
if (bitmap != null)
{
mPaint.setXfermode(null);
canvas.drawBitmap(bitmap, 0.0f, 0.0f, mPaint);
return;
}

}
/**
* 绘制形状
* @return
*/
public Bitmap getBitmap()
{
Bitmap bitmap = Bitmap.createBitmap(getWidth(), getHeight(),
Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setColor(Color.BLACK);

if (type == TYPE_ROUND)
{
canvas.drawRoundRect(new RectF(0, 0, getWidth(), getHeight()),
mBorderRadius, mBorderRadius, paint);
} else
{
canvas.drawCircle(getWidth() / 2, getWidth() / 2, getWidth() / 2,
paint);
}

return bitmap;
}

可以看到，我们首先先是构建了一个和imageView的大小一样的bitmap，这时候的bitmap是没有绘制东西的。然后通过这个bitmap来创建了一个画布，这样当画布上面画的东西就会在放在这个bitmap上面。然后是计算imageview和bitmap的宽高比例。防止图片太小，然后我们将缩放后的图片绘制到了canvas上面去。这里这个放在canvas上面的bitmap就是作为dst，然后通过getBitmap获得了一个maskbitmap，这个maskBitmap就是我们之前说的作为src的。然后我们将这个maskBitmap用paint绘制到之前已经放有原图片的canvas中，这样就获得了DSTIn的效果。最后再用onDraw方法的canvas绘制，就会出现在我们的面前。

所以我们的流程是：先画Dst，再画src。Dst采用原图片，src采用我们绘制的遮盖层图片。

重点掌握这种思路，其实也是canvas使用的一些方法：

onDraw里的canvas是要绘制的。我们可以在内存中新建canvas，然后在这个canvas上面绘图。最后再导出这个图。

bitmap可以作为canvas的背景。最后就会画到这个bitmap上面。

后记：经此一役，决定花点时间彻底搞懂Canvas和Bitmap的使用。还有view的源码。