效果图
先来看一下实现的效果图
基础知识
在正式介绍之前，先简单说明一下主要用到的一些API,图片放大镜主要用BitmapShader来实现的，它的父类是Shader。
Shader在自定义View中的使用频率很高。像各种圆角、圆形头像、多彩环形图都是用它来实现的；Shader类主要是渲染图像以及一些几何图形。
它只要有五个直接子类:
- BitmapShader : 主要用来渲染图像
- LinearGradient : 用来进行线性渲染
- RadialGradient : 用来进行环形渲染
- SweepGradient : 扫描渐变---围绕一个中心点扫描渐变就像电影里那种雷达扫描，用来梯度渲染。
- ComposeShader : 组合渲染，可以和其他几个子类组合起来使用。
这里对其他的Shader不在再阐述，主要简单介绍一下BitmapShader，它们的用法基本一致，只是处理的对象和效果不同而已。
BitmapShader
- BitmapShader(@NonNull Bitmap bitmap, TileMode tileX, TileMode tileY)
bitmap : 要进行绘制的bitmap
tileX : 在X轴处理的效果
tileY : 在Y轴处理的效果
Shader.TileMode里有三种模式：CLAMP、MIRROR和REPETA
- CLAMP:拉伸最后一个像素去填充剩下的区域
- MIRROR:通过镜像翻转来填充剩下的区域
- REPETA:重复图片平铺整个区域
实现原理
首先绘制原图片，然后在原图片上覆盖一层被放大后的圆形图片，监听触屏事件，获取触摸的坐标，根据设定的放大半径来控制圆形图片的显示大小。放大图片直接使用Bitmap.createScaledBitmap（Bitmap src, int dstWidth, int dstHeight,
boolean filter），该方法返回一个Bitmap,但是图片还不是圆形的，那么怎么让图片变成圆形的呢？这里使用的是ShapeDrawable，指定shape的形状为圆形drawable = new ShapeDrawable(new OvalShape());然后通过该drawable获取对应的画笔，再通过画笔设置Shader为BitmapShader,最后，调用drawable.draw(canvas)显示在画布上。大概的实现原理就是这些，下面看一下具体的代码实现。
在构造方法里面做一些的初始化操作，指定图片的放大倍数：
public ZoomImageView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
//获取原图片
bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.icon);
//制作一个圆形图片覆盖在canvas上
//获取放大的图片
scaledBitmap = Bitmap.createScaledBitmap(bitmap, bitmap.getWidth() * SCALE, bitmap.getHeight() * SCALE, true);
BitmapShader bitmapShader = new BitmapShader(scaledBitmap, Shader.TileMode.CLAMP,Shader.TileMode.CLAMP);
drawable = new ShapeDrawable(new OvalShape());
drawable.getPaint().setShader(bitmapShader);
}
分别绘制原图和放大后的圆形图：
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawBitmap(bitmap,0,0,null);//先绘制原图
drawable.draw(canvas);//将放大的图片覆盖在画布上
}
监听触摸事件，控制放大镜显示的区域：
@Override
public boolean onTouchEvent(MotionEvent event) {
//获取坐标
int x = (int) (event.getX() + 0.5f);
int y = (int) (event.getY() + 0.5f);
if(event.getAction() == MotionEvent.ACTION_UP || event.getAction() == MotionEvent.ACTION_CANCEL){
drawable.setBounds(0,0,0,0);//释放时，取消显示放大效果
}else{
drawable.setBounds(x - RADIUS,y - RADIUS,x + RADIUS,y + RADIUS);
}
matrix.setTranslate(RADIUS - x * SCALE,RADIUS - y * SCALE);//平移放大后的图片
drawable.getPaint().getShader().setLocalMatrix(matrix);
postInvalidate();//重新绘制
return true;//持续接收处理事件
}
其中比较难理解的是平移图片matrix.setTranslate(RADIUS - x * SCALE,RADIUS - y * SCALE)，首先我们通过 drawable.setBounds(x - RADIUS,y - RADIUS,x + RADIUS,y + RADIUS);来控制drawable显示的矩形区域，因为图片是圆形的，所以我们看到的效果是圆形放大镜，其实显示的区域是矩形的，这个比较好理解，但是setBounds确定的只是显示的区域的位置，图片还是从左上角开始显示的，并不是确定的位置（即：要放大的区域），如下图效果：
我们会发现，无论点击放大哪，显示的都是左上角的内容，所以我们还要将图片移动。matrix.setTranslate(RADIUS - x * SCALE,RADIUS - y * SCALE)
如果不移动白色放大区域显示的就是在粉红色区域的所占的位置，正确的应该显示的是在橘黄色中所占的位置，所以应该将粉红色（放大后的图片）移动到橘黄色位置。
整体代码如下：
public class ZoomImageView extends ImageView {
private Bitmap bitmap;
private ShapeDrawable drawable;
private int SCALE = 4;
private int RADIUS = 120;
private Matrix matrix = new Matrix();
private int width;
private int height;
private Bitmap scaledBitmap;
public ZoomImageView(Context context) {
this(context,null);
}
public ZoomImageView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs,0);
}
public ZoomImageView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
//获取图片
bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.icon);
//制作一个圆形图片覆盖在canvas上
//获取放大的图片
scaledBitmap = Bitmap.createScaledBitmap(bitmap, bitmap.getWidth() * SCALE, bitmap.getHeight() * SCALE, true);
BitmapShader bitmapShader = new BitmapShader(scaledBitmap, Shader.TileMode.CLAMP,Shader.TileMode.CLAMP);
drawable = new ShapeDrawable(new OvalShape());
drawable.getPaint().setShader(bitmapShader);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
setMeasuredDimension(bitmap.getWidth(),bitmap.getHeight());
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawBitmap(bitmap,0,0,null);//先绘制原图
drawable.draw(canvas);//将放大的图片覆盖在画布上
}
@Override
public boolean onTouchEvent(MotionEvent event) {
int x = (int) (event.getX() + 0.5f);
int y = (int) (event.getY() + 0.5f);
if(event.getAction() == MotionEvent.ACTION_UP || event.getAction() == MotionEvent.ACTION_CANCEL){
drawable.setBounds(0,0,0,0);//释放时，取消显示放大效果
}else{
drawable.setBounds(x - RADIUS,y - RADIUS,x + RADIUS,y + RADIUS);
}
matrix.setTranslate(RADIUS - x * SCALE,RADIUS - y * SCALE);//平移放大后的图片
drawable.getPaint().getShader().setLocalMatrix(matrix);
postInvalidate();//重新绘制
return true;//持续接收处理事件
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
width = getMeasuredWidth();
height = getMeasuredHeight();
}
public void setRadius(int radius) {
this.RADIUS = radius;
invalidate();
}
public int getRadius(){
return this.RADIUS;
}
}
