Android magnifying glass effect implementation

Overview

I believe that many students who have used English applications have seen the effect of a magnifying glass. After selecting a piece of text, there will be a magnifying glass. How is this achieved? Let's analyze it today.

Source code analysis

 public class ShaderView extends View {
     private final Bitmap bitmap;
     private final ShapeDrawable drawable;
 // The radius of the magnifying glass
     private static final int RADIUS = 80;
 // Magnification
     private static final int FACTOR = 3;
     private final Matrix matrix = new Matrix(); 
  
 public ShaderView(Context context) {
 super(context);
          Bitmap bmp = BitmapFactory.decodeResource(getResources(),R.drawable.demo);
 bitmap = bmp;
          BitmapShader shader = new BitmapShader(Bitmap.createScaledBitmap(bmp,
          bmp.getWidth() * FACTOR, bmp.getHeight() * FACTOR, true ), TileMode.CLAMP, TileMode.CLAMP); 
  
 //Circular drawable
          drawable = new ShapeDrawable(new OvalShape());
          drawable.getPaint().setShader(shader);
          drawable.setBounds(0, 0, RADIUS * 2, RADIUS * 2);
 } 
  
 @Override
 public boolean onTouchEvent(MotionEvent event) {
         final int x = ( int ) event.getX();
         final int y = ( int ) event.getY(); 
  
 // This position indicates the starting position of the shader
         matrix.setTranslate(RADIUS - x * FACTOR, RADIUS - y * FACTOR);
         drawable.getPaint().getShader().setLocalMatrix(matrix); 
  
 // bounds, that is the circumscribed rectangle of the circle
         drawable.setBounds(x - RADIUS, y - RADIUS, x + RADIUS, y + RADIUS);
 invalidate();
 return   true ;
 } 
  
 @Override
 public void onDraw(Canvas canvas) {
         super.onDraw(canvas);
         canvas.drawBitmap(bitmap, 0, 0, null );
         drawable.draw(canvas);
 }
 }

The basic principle is to use ShapeDrawable to construct a circular drawable, and then set its paint shader to the image to be magnified, and then it is a simple matter of moving the position. The radius and magnification of the magnifying glass can be modified in the code, and the code is commented, so it should be easy to understand.

However, if there is only one solution to a problem, it is a bit frustrating. You can't even try something different. You have to play with personality and passion when playing with programs. Haha, too much nonsense, let's get back to the topic. Let's take a look at another implementation of the magnifying glass

 public class PathView extends View {
     private final Path mPath = new Path();
     private final Matrix matrix = new Matrix();
     private final Bitmap bitmap; 
  
 // The radius of the magnifying glass
     private static final int RADIUS = 80; 
  
 // Magnification
     private static final int FACTOR = 2;
     private int mCurrentX, mCurrentY; 
  
 public PathView(Context context) {
 super(context);
          mPath.addCircle(RADIUS, RADIUS, RADIUS, Direction.CW);
          matrix.setScale(FACTOR, FACTOR); 
  
          bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.demo);
 } 
  
 @Override
 public boolean onTouchEvent(MotionEvent event) {
         mCurrentX = ( int ) event.getX();
         mCurrentY = ( int ) event.getY(); 
  
 invalidate();
 return   true ;
 } 
  
 @Override
 public void onDraw(Canvas canvas) {
         super.onDraw(canvas); 
  
 // Basemap
         canvas.drawBitmap(bitmap, 0, 0, null ); 
  
 // Cut
         canvas.translate(mCurrentX - RADIUS, mCurrentY - RADIUS);
         canvas.clipPath(mPath); 
  
 // Draw the enlarged image
         canvas.translate(RADIUS - mCurrentX * FACTOR, RADIUS - mCurrentY * FACTOR);
         canvas.drawBitmap(bitmap, matrix, null );
 }
 }

The Path class is used here to cut out a circular area from the canvas and draw the enlarged part on it.

Project download address http://download.csdn.net/detail/hustpzb/4523274