Android Canvas实现自定义形状的image
灵活自定义imageview的形状
- 在自定义View的ondraw方法中实现绘制的内容，各个layer逐个绘制，通过设置PorterDuffXfermode实现不同的图片叠加效果
//设置背景色
canvas.drawARGB(255, 139, 197, 186);
int canvasWidth = canvas.getWidth();
int canvasHeight = canvas.getHeight();
int layerId = canvas.saveLayer(0, 0, canvasWidth, canvasHeight, null, Canvas.ALL_SAVE_FLAG);
int r = canvasWidth / 2;
//根据图片生成bitmapshader
paint.setColor(0xFFFFCC44);
Bitmap bitmap = Bitmap.createBitmap(BitmapFactory.decodeResource(getResources(), R.drawable.xihu));
bitmap = scaleBitmap(bitmap,2*r,2*r);
BitmapShader bitmapShader = new BitmapShader(bitmap,Shader.TileMode.CLAMP,Shader.TileMode.CLAMP);
paint.setShader(bitmapShader);
canvas.drawCircle(r, r, r, paint);
//使用CLEAR作为PorterDuffXfermode绘制蓝色的矩形
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));// clear 到背景颜色那一层
canvas.drawCircle(r*3f-50, r, r , paint);
//最后将画笔去除Xfermode
paint.setXfermode(null);
canvas.restoreToCount(layerId);
- Bitmap生成shader的时候，需要将图片缩放成view的大小
/**
* 根据给定的宽和高进行拉伸
* @param origin 原图
* @param newWidth 新图的宽
* @param newHeight 新图的高
* @return new Bitmap
*/
private Bitmap scaleBitmap(Bitmap origin, int newWidth, int newHeight) {
if (origin == null) {
return null;
}
int height = origin.getHeight();
int width = origin.getWidth();
float scaleWidth = ((float) newWidth) / width;
float scaleHeight = ((float) newHeight) / height;
Matrix matrix = new Matrix();
matrix.postScale(scaleWidth, scaleHeight);// 使用后乘
Bitmap newBM = Bitmap.createBitmap(origin, 0, 0, width, height, matrix, false);
if (!origin.isRecycled()) {
origin.recycle();
}
return newBM;
}
- 效果
r1McLAqQYLVfWL6Ducp97ZuhdH1OWBRhZiWv2OEBSZYGCWP7ps.png
- 业务中是通过设计师给出的svgx图片生成path，根据path绘制出想要的图形，再用需要展示的bitmap缩放后生成着色器，再实现渲染；因为svg形状可以任意，因此更加灵活
Android graphics使用
（1）绘制形状Canvas
[图片上传失败...(image-3c6580-1573961626362)]
Path可自由实现各种自定义形状：直线，圆弧，贝塞尔曲线等等
Path path = new Path();
RectF rect = new RectF(300,300,1000,800);
mPaint.setColor(Color.GRAY);
mPaint.setStyle(Style.FILL);
canvas.drawRect(rect, mPaint);
mPaint.setColor(Color.BLACK);
mPaint.setStyle(Style.STROKE);
path.lineTo(100, 100); //用path画一条从(0,0)到(100,100)的直线
path.arcTo(rect, 90, 180); //用arcTo方法画一段圆弧
canvas.drawPath(path, mPaint); //直线终点(100,100)与圆弧起点会连成一条直线
（2）绘制效果Paint
-
Paint
-
设置颜色
-
设置笔触效果/文字大小
-
设置滤镜
-
设置透明度
-
设置着色器Shader
-
BimapShader：位图的图像渲染器
-
LinearGradient：线性渲染器
-
RadialGradient：环形渲染器，一般的水波纹效果，充电水波纹扩散效果、调色板都可以使用该渲染器实现。
-
SweepGradient：梯度渲染器（即扫描渲染），可以使用该渲染器实现，如：微信等雷达扫描效果、手机卫士垃圾扫描。
-
ComposeShader：组合渲染器
-
设置layer之间的组合模式PorterDuffXfermode等等
[图片上传失败...(image-f699f4-1573961626362)]
（3）绘制位置坐标
[图片上传失败...(image-f432a2-1573961626362)]
（4）变换处理Matrix
-
setTranslate(float dx,float dy)：控制Matrix进行位移
-
setSkew(float kx,float ky)：控制Matrix进行倾斜，kx、ky为X、Y方向上的比例
-
setSkew(float kx,float ky,float px,float py)：控制Matrix以px、py为轴心进行倾斜，kx、ky为X、Y方向上的倾斜比例
-
setRotate(float degrees)：控制Matrix进行depress角度的旋转，轴心为（0,0）
-
setRotate(float degrees,float px,float py)：控制Matrix进行depress角度的旋转，轴心为(px,py)
-
setScale(float sx,float sy)：设置Matrix进行缩放，sx、sy为X、Y方向上的缩放比例
-
setScale(float sx,float sy,float px,float py)：设置Matrix以(px,py)为轴心进行缩放，sx、sy为X、Y方向上的缩放比例
例：将bitmap放大2倍
Matrix matrix = new Matrix();
matrix.postScale(2, 2);// 使用后乘
Bitmap newBM = Bitmap.createBitmap(origin, 0, 0, width, height, matrix, false);
（5）自定义动画效果
[图片上传失败...(image-47702a-1573961626362)]
[图片上传失败...(image-b5fd46-1573961626362)]
