Android magnifying glass effect implementation

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

  1. public class ShaderView extends View {
  2. private final Bitmap bitmap;
  3. private final ShapeDrawable drawable;
  4. // The radius of the magnifying glass
  5. private static final int RADIUS = 80;
  6. // Magnification
  7. private static final int FACTOR = 3;
  8. private final Matrix matrix = new Matrix();
  9.   
  10. public ShaderView(Context context) {
  11. super(context);
  12. Bitmap bmp = BitmapFactory.decodeResource(getResources(),R.drawable.demo);
  13. bitmap = bmp;
  14. BitmapShader shader = new BitmapShader(Bitmap.createScaledBitmap(bmp,
  15. bmp.getWidth() * FACTOR, bmp.getHeight() * FACTOR, true ), TileMode.CLAMP, TileMode.CLAMP);
  16.   
  17. //Circular drawable
  18. drawable = new ShapeDrawable(new OvalShape());
  19. drawable.getPaint().setShader(shader);
  20. drawable.setBounds(0, 0, RADIUS * 2, RADIUS * 2);
  21. }
  22.   
  23. @Override
  24. public boolean onTouchEvent(MotionEvent event) {
  25. final int x = ( int ) event.getX();
  26. final int y = ( int ) event.getY();
  27.   
  28. // This position indicates the starting position of the shader
  29. matrix.setTranslate(RADIUS - x * FACTOR, RADIUS - y * FACTOR);
  30. drawable.getPaint().getShader().setLocalMatrix(matrix);
  31.   
  32. // bounds, that is the circumscribed rectangle of the circle
  33. drawable.setBounds(x - RADIUS, y - RADIUS, x + RADIUS, y + RADIUS);
  34. invalidate();
  35. return   true ;
  36. }
  37.   
  38. @Override
  39. public void onDraw(Canvas canvas) {
  40. super.onDraw(canvas);
  41. canvas.drawBitmap(bitmap, 0, 0, null );
  42. drawable.draw(canvas);
  43. }
  44. }

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

  1. public class PathView extends View {
  2. private final Path mPath = new Path();
  3. private final Matrix matrix = new Matrix();
  4. private final Bitmap bitmap;
  5.   
  6. // The radius of the magnifying glass
  7. private static final int RADIUS = 80;
  8.   
  9. // Magnification
  10. private static final int FACTOR = 2;
  11. private int mCurrentX, mCurrentY;
  12.   
  13. public PathView(Context context) {
  14. super(context);
  15. mPath.addCircle(RADIUS, RADIUS, RADIUS, Direction.CW);
  16. matrix.setScale(FACTOR, FACTOR);
  17.   
  18. bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.demo);
  19. }
  20.   
  21. @Override
  22. public boolean onTouchEvent(MotionEvent event) {
  23. mCurrentX = ( int ) event.getX();
  24. mCurrentY = ( int ) event.getY();
  25.   
  26. invalidate();
  27. return   true ;
  28. }
  29.   
  30. @Override
  31. public void onDraw(Canvas canvas) {
  32. super.onDraw(canvas);
  33.   
  34. // Basemap
  35. canvas.drawBitmap(bitmap, 0, 0, null );
  36.   
  37. // Cut
  38. canvas.translate(mCurrentX - RADIUS, mCurrentY - RADIUS);
  39. canvas.clipPath(mPath);
  40.   
  41. // Draw the enlarged image
  42. canvas.translate(RADIUS - mCurrentX * FACTOR, RADIUS - mCurrentY * FACTOR);
  43. canvas.drawBitmap(bitmap, matrix, null );
  44. }
  45. }

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

<<:  Android keyboard panel conflict layout flashing solution

>>:  Android imitates the layout architecture of the product details page of JD.com and Tmall app, as well as its functional implementation

Recommend

Three ways Apple products die

Apple is a company known for its streamlined prod...

What do FM and AM mean for radio signals?

We often hear on the radio: FM 96.6 MHz, AM 927 k...

Overseas promotion, how to make eye-catching video ads!

Many brand owners will place video ads on video p...

How to choose a live streaming platform? The most complete guide!

Thanks to the popularity of internet celebrities ...

2021's Technological Hexagram: Zhen: Playing Hide and Seek in the Metaverse

The ideas of science fiction novels are often app...

40 private domain tips from 0 to 1!

During this period, we have been providing privat...

Prologue to the Kingdom of Genes: What is genetic material?

Produced by: Science Popularization China Author:...

Sour, sweet, bitter, salty, and fresh. Is there an alkaline taste?

In ancient times, the Chinese summarized "so...

Meizu Note3 unboxing photos: MX5-inspired, quality 1,000-yuan phone

Few people would have guessed that Meizu's fi...

Example analysis: Performance optimization of "Qichu Encyclopedia"

Qiqubaike has undergone a major revision after th...