Android自定义View【实战教程】4⃣️----BitmapShader详解及圆形、圆角、多边形实现

BitmapShader 的作用

官方定义：Shader used to draw a bitmap as a texture

BitmapShader的作用是使用特定的图片来作为纹理来使用。

简单使用

BitmapShader是Shader的子类，可以通过Paint.setShader（Shader shader）进行设置。

BitmapShader 的构造函数

public BitmapShader(@NonNull Bitmap bitmap, TileMode tileX, TileMode tileY)

三个参数：bitmap 指的是要作为纹理的图片，tileX 指的是在ｘ方向纹理的绘制模式，tileY 指的是Ｙ方向上的绘制模式。

TileMode 源码：

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

CLAMP 拉伸:横向的最后一个横行像素，不断的重复，纵项的那一列像素，不断的重复；

REPEAT 重复:就是横向、纵向不断重复这个bitmap

MIRROR 镜像:横向不断翻转重复，纵向不断翻转重复；

使用：

//创建
BitmapShader shader=new BitmapShader(bitmap,TileMode.CLAMP,TileMode.CLAMP);
Paint paint=new Paint();
//为paint 设置 Shader
paint.setShader(shader);
//这样就可以使用shader的纹理去覆盖绘制的图形的表面了,其中根据：CLAMP,REPEAT,MIRROR，
//来确定纹理的绘制模式
canvas.draw**(***,paint);

案例

以下demo都用这张图片：

基本使用

public class ShaderView extends View {
private int mWidth;
private int mHeight;
private BitmapShader bmpShader;
private Paint mPaint;

private RectF bmpRect;

public ShaderView(Context context) {
this(context, null);
}

public ShaderView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}

public ShaderView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
mWidth = w; //屏幕宽
mHeight = h; //屏幕高
//Logger.e("w: " + w + " h:" + h + " oldw: " + oldw + " oldh : " + oldh);
bmpRect = new RectF(0, 0, mWidth, mHeight);

Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.dlw);

//Shader.TileMode里有三种模式：CLAMP（拉伸）、MIRROR（镜像）、REPETA（重复）
bmpShader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.REPEAT);

mPaint = new Paint((Paint.ANTI_ALIAS_FLAG));
mPaint.setShader(bmpShader); //设置BitmapShader之后相当于绘制了底层的图片背景
}

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//矩形
canvas.drawRect(bmpRect, mPaint);

}
}

不同TileMode的展示效果

bmpShader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.REPEAT);

bmpShader = new BitmapShader(bitmap, Shader.TileMode.MIRROR, Shader.TileMode.MIRROR);

bmpShader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);

bmpShader = new BitmapShader(bitmap, Shader.TileMode.REPEAT, Shader.TileMode.REPEAT);

进阶使用

圆形、圆角、多边形实现

先看图：



是不很酷，直接代码 拿走你就能用：

自定义样式

<declare-styleable name="RoundImageView">
<attr name="borderRadius" format="dimension" />
<attr name="type">
<enum name="circle" value="0" />
<enum name="round" value="1" />
<enum name="multi" value="3" />
</attr>
<attr name="angleCount" format="integer" />
<attr name="currentAngle" format="integer" />
</declare-styleable>

自定义View

public class MultiView extends ImageView {
/**
* 图片的类型，圆形or圆角or多边形
*/
private Context mContext;

/**
* 传输类型
*/
private int type;

/**
* 圆形
*/
public static final int TYPE_CIRCLE = 0;

/**
* 圆角
*/
public static final int TYPE_ROUND = 1;

/**
* 多边形
*/
public static final int TYPE_MULTI = 3;

/**
*默认多边形角的个数
*/
public static final int ANGLECOUNT = 5;

/**
* 默认开始绘制的角度
*/
public static final int CURRENTANGLE = 180;

/**
* 多边形的半径
*/
private int startRadius;

/**
* 多边形角的个数
*/
private int angleCount ;

private int[] angles;

/**
* 开始绘制的角度
*/
private int currentAngle;

/**
* 存储角位置的集合
*/
private List<PointF> pointFList = new ArrayList<>();

/**
* 圆角大小的默认值
*/
private static final int BODER_RADIUS_DEFAULT = 10;

/**
* 圆角的大小
*/
private int mBorderRadius;

/**
* 绘图的Paint
*/
private Paint mBitmapPaint;

/**
* 圆角的半径
*/
private int mRadius;

/**
* 3x3 矩阵，主要用于缩小放大
*/
private Matrix mMatrix;

/**
* 渲染图像，使用图像为绘制图形着色
*/
private BitmapShader mBitmapShader;

/**
* view的宽度
*/
private int mWidth;
private RectF mRoundRect;

public MultiView(Context context) {
this(context, null);
}

public MultiView(Context context, AttributeSet attrs) {

this(context, attrs, 0);

}

public MultiView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);

this.mContext = context;

init(context, attrs);

}

public void init(Context context, AttributeSet attrs) {
mMatrix = new Matrix();
mBitmapPaint = new Paint();
mBitmapPaint.setAntiAlias(true);

TypedArray typedArray = context.obtainStyledAttributes(attrs,
R.styleable.RoundImageView);

mBorderRadius = typedArray.getDimensionPixelSize(
R.styleable.RoundImageView_borderRadius, (int) TypedValue
.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
BODER_RADIUS_DEFAULT, getResources()
.getDisplayMetrics()));// 默认为10dp
type = typedArray.getInt(R.styleable.RoundImageView_type, TYPE_CIRCLE);// 默认为Circle
angleCount = typedArray.getInt(R.styleable.RoundImageView_angleCount, ANGLECOUNT);
currentAngle = typedArray.getInt(R.styleable.RoundImageView_currentAngle, currentAngle);

typedArray.recycle(); //回收之后对象可以重用
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);

/**
* 如果类型是圆形或多边形，则强制改变view的宽高一致，以小值为准
*/
if (type == TYPE_CIRCLE) {
mWidth = Math.min(getMeasuredWidth(), getMeasuredHeight());
mRadius = mWidth / 2;
setMeasuredDimension(mWidth, mWidth);
}

if (type == TYPE_MULTI) {
mWidth = Math.min(getMeasuredWidth(), getMeasuredHeight());

setMeasuredDimension(mWidth, mWidth);

angles = new int[angleCount];

for (int i = 0; i < angleCount; i++) {
int partOfAngle = 360 / angleCount; //每个顶点的角度
angles[i] = currentAngle + partOfAngle * i;

startRadius = mWidth / 2;
float x = (float) (Math.sin(Math.toRadians(angles[i])) * startRadius);
float y = (float) (Math.cos(Math.toRadians(angles[i])) * startRadius);
pointFList.add(new PointF(x, y));
}
}

}

/**
* 初始化BitmapShader
*/
private void setUpShader() {
Drawable drawable = getDrawable();
if (drawable == null) {
return;
}

Bitmap bmp = drawableToBitamp(drawable);
// 将bmp作为着色器，就是在指定区域内绘制bmp
mBitmapShader = new BitmapShader(bmp, Shader.TileMode.REPEAT, Shader.TileMode.REPEAT);
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) {
Logger.e(
"b'w = " + bmp.getWidth() + " , " + "b'h = "
+ bmp.getHeight());
if (!(bmp.getWidth() == getWidth() && bmp.getHeight() == getHeight())) {
// 如果图片的宽或者高与view的宽高不匹配，计算出需要缩放的比例；缩放后的图片的宽高，一定要大于我们view的宽高；所以我们这里取大值；
scale = Math.max(getWidth() * 1.0f / bmp.getWidth(), getHeight() * 1.0f / bmp.getHeight());
}

} else if (type == TYPE_MULTI) {
Logger.e(
"b'w = " + bmp.getWidth() + " , " + "b'h = "
+ bmp.getHeight());
// 拿到bitmap宽或高的小值
int bSize = Math.min(bmp.getWidth(), bmp.getHeight());
scale = mWidth * 1.0f / bSize;
}
// shader的变换矩阵，我们这里主要用于放大或者缩小
mMatrix.setScale(scale, scale);

// 设置变换矩阵
mBitmapShader.setLocalMatrix(mMatrix);
// 设置shader
mBitmapPaint.setShader(mBitmapShader);
}

@Override
protected void onDraw(Canvas canvas) {
if (getDrawable() == null) {
return;
}
setUpShader();

if (type == TYPE_ROUND) {
canvas.drawRoundRect(mRoundRect, mBorderRadius, mBorderRadius,
mBitmapPaint);
} else if (type == TYPE_MULTI) {
//canvas.translate(startRadius,startRadius);

Path mPath = drawPath();

canvas.drawPath(mPath, mBitmapPaint);
} else {
canvas.drawCircle(mRadius, mRadius, mRadius, mBitmapPaint);
}
}

/**
* @return 多边形路径
*/
private Path drawPath() {
Path mPath = new Path();
mPath.moveTo(pointFList.get(0).x, pointFList.get(0).y);
for (int i = 2; i < angleCount; i++) {
if (i % 2 == 0) {// 除以二取余数，余数为0则为偶数,否则奇数
mPath.lineTo(pointFList.get(i).x, pointFList.get(i).y);
}

}

if (angleCount % 2 == 0) {  //偶数，moveTo
mPath.moveTo(pointFList.get(1).x, pointFList.get(1).y);
} else {                    //奇数，lineTo
mPath.lineTo(pointFList.get(1).x, pointFList.get(1).y);
}

for (int i = 3; i < angleCount; i++) {
if (i % 2 != 0) {
mPath.lineTo(pointFList.get(i).x, pointFList.get(i).y);
}
}

mPath.offset(startRadius, startRadius);
return mPath;
}

@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, w, h);
}

/**
* drawable转bitmap
*
* @param drawable
* @return
*/
private Bitmap drawableToBitamp(Drawable drawable) {
if (drawable instanceof BitmapDrawable) {
BitmapDrawable bd = (BitmapDrawable) drawable;
return bd.getBitmap();
}
int w = drawable.getIntrinsicWidth();
int h = drawable.getIntrinsicHeight();
Bitmap bitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
drawable.setBounds(0, 0, w, h);
drawable.draw(canvas);
return bitmap;
}

private static final String STATE_INSTANCE = "state_instance";
private static final String STATE_TYPE = "state_type";
private static final String STATE_BORDER_RADIUS = "state_border_radius";

@Override
protected Parcelable onSaveInstanceState() {
Bundle bundle = new Bundle();
bundle.putParcelable(STATE_INSTANCE, super.onSaveInstanceState());
bundle.putInt(STATE_TYPE, type);
bundle.putInt(STATE_BORDER_RADIUS, mBorderRadius);
return bundle;
}

@Override
protected void onRestoreInstanceState(Parcelable state) {
if (state instanceof Bundle) {
Bundle bundle = (Bundle) state;
super.onRestoreInstanceState(((Bundle) state)
.getParcelable(STATE_INSTANCE));
this.type = bundle.getInt(STATE_TYPE);
this.mBorderRadius = bundle.getInt(STATE_BORDER_RADIUS);
} else {
super.onRestoreInstanceState(state);
}

}

public void setType(int type) {
if (this.type != type) {
this.type = type;
if (this.type != TYPE_ROUND && this.type != TYPE_CIRCLE && this.type != TYPE_MULTI) {
this.type = TYPE_CIRCLE;
}
requestLayout();
}

}

}

使用

<com.libin.factory.widget.BitmapShader.MultiView   android:layout_width="wrap_content"      android:layout_height="wrap_content"       android:src="@drawable/dlw"
lb:angleCount="20"
lb:type="multi"

注释虽然很详细了，这里还是要给大家多边形公式

多边形公式详解

简单形状展示

首先画一个三角形

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);

Path path = new Path();
path.moveTo(200, 200);
path.lineTo(75, 75);
path.lineTo(200, 75);

Paint paint = new Paint();
paint.setStrokeWidth(10);
paint.setColor(Color.BLACK);
paint.setStyle(Paint.Style.STROKE);
canvas.drawPath(path, paint);
}

接下来替换上面的paint，使用bitmapShader：

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);

mWidth = w; //屏幕宽
mHeight = h; //屏幕高
//Logger.e("w: " + w + " h:" + h + " oldw: " + oldw + " oldh : " + oldh);
bmpRect = new RectF(0, 0, mWidth, mHeight);

Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.dlw);

//Shader.TileMode里有三种模式：CLAMP（拉伸）、MIRROR（镜像）、REPETA（重复）
bmpShader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.REPEAT);

mPaint = new Paint((Paint.ANTI_ALIAS_FLAG));
mPaint.setShader(bmpShader); //设置BitmapShader之后相当于绘制了底层的图片背景
}

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);

Path path = new Path();
path.moveTo(200, 200);
path.lineTo(75, 75);
path.lineTo(200, 75);

canvas.drawPath(path, mPaint);
}

接下来我们再看一组交叉的对比图：

Path path = new Path();
path.moveTo(200, 200);
path.lineTo(75, 75);
path.lineTo(200, 75);
path.lineTo(75,200);

通过上面的例子，我们可以发现就算我们不绘制闭合的路径，使用BitmapShader，仍然会给我们自动

path.close();

形成一个闭合的路径，并将背景填充进去。而且不管怎么较差背景图都会充满所有的闭合路径中。

那么接下来就好理解多边形的公式了。

多边型公式

先看一下代码：

for (int i = 0; i < angleCount; i++) {
int partOfAngle = 360 / angleCount; //每个顶点的角度
angles[i] = currentAngle + partOfAngle * i;

startRadius = mWidth / 2;
float x = (float) (Math.sin(Math.toRadians(angles[i])) * startRadius);
float y = (float) (Math.cos(Math.toRadians(angles[i])) * startRadius);
pointFList.add(new PointF(x, y));
}

private Path drawPath() {
Path mPath = new Path();
mPath.moveTo(pointFList.get(0).x, pointFList.get(0).y);
for (int i = 2; i < angleCount; i++) {
if (i % 2 == 0) {// 除以二取余数，余数为0则为偶数,否则奇数
mPath.lineTo(pointFList.get(i).x, pointFList.get(i).y);
}

}

if (angleCount % 2 == 0) {  //偶数，moveTo
mPath.moveTo(pointFList.get(1).x, pointFList.get(1).y);
} else {                    //奇数，lineTo
mPath.lineTo(pointFList.get(1).x, pointFList.get(1).y);
}

for (int i = 3; i < angleCount; i++) {
if (i % 2 != 0) {
mPath.lineTo(pointFList.get(i).x, pointFList.get(i).y);
}
}

mPath.offset(startRadius, startRadius);
return mPath;
}

首先我们要得到每个角的坐标：

x=Math.sin(2∗PI/360∗angle)∗r
y=Math.cos(2∗PI/360∗angle)∗r
x=Math.sin(Math.toRadians（angle）)∗r
y=Math.cos(Math.toRadians（angle）)∗r

代码里我们把每个角存储道理集合里面，方便后面使用：

for (int i = 0; i < angleCount; i++) {
int partOfAngle = 360 / angleCount; //每个顶点的角度
angles[i] = currentAngle + partOfAngle * i;

startRadius = mWidth / 2;
float x = (float) (Math.sin(Math.toRadians(angles[i])) * startRadius);
float y = (float) (Math.cos(Math.toRadians(angles[i])) * startRadius);
pointFList.add(new PointF(x, y));
}

我们存储时是按照顺序存储的每个角的坐标值，那么现在等我们有了多边形的每个角的坐标，那么我们使用lineto和moveto就可以实现绘制多边形了。

如图我们已经得到坐标的点（方便手绘图）



然后我们要做的就是连线了，这时候奇数和偶数角的图形事不一样的，奇数图形一直lineto就可以完成，偶数图形要进行一次moveto才能完成，看一下下面两个图，体会一下。



六角形的时候有两个起点一个是0，一个是1.



现在我们应该对多边形公式有了一定的认识，不明白的可以联系作者。