效果图

先来看一下实现的效果图

效果图

基础知识

在正式介绍之前，先简单说明一下主要用到的一些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:重复图片平铺整个区域

TileMode

实现原理

首先绘制原图片，然后在原图片上覆盖一层被放大后的圆形图片，监听触屏事件，获取触摸的坐标，根据设定的放大半径来控制圆形图片的显示大小。放大图片直接使用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;
  }
}