Android——图片放大镜效果

骑猪看日落 2022-06-06 05:19 369阅读 0赞

## Android——图片放大镜效果 ##

**前言：**使用两种方法实现图片放大镜效果，随着手在屏幕上的移动来放大相应位置的图片。

**布局文件：**

<?xml version="1.0" encoding="utf-8"?>
    <android.support.constraint.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    
        <com.tracy.testdemo.Magnifier
            android:id="@+id/myview"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>
    
    </android.support.constraint.ConstraintLayout>

**自定义View：**实现图片的放大镜效果

**方法一：**

public class Magnifier extends View {
        
        private final Path mPath = new Path();
        private final Matrix matrix = new Matrix();
        private DisplayMetrics dm;
        private int mScreenWidth,mScreenHeight;
        private Bitmap bitmap;
        // 放大镜的半径
        private static final int RADIUS = 160;
        // 放大倍数
        private static final float FACTOR = 2.0f;
        private int mCurrentX, mCurrentY;
    
        public Magnifier(Context context) {
            this(context, null);
        }
    
        public Magnifier(Context context, @Nullable AttributeSet attrs) {
            super(context, attrs);
            mPath.addCircle(RADIUS, RADIUS, 0, Path.Direction.CW);
            matrix.setScale(FACTOR, FACTOR);
    
            dm = getResources().getDisplayMetrics();
            mScreenWidth = dm.widthPixels;
            mScreenHeight = dm.heightPixels;
    
            bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.map);
            bitmap = upImageSize(bitmap);
        }
    
        @Override
        public boolean onTouchEvent(MotionEvent event) {
            mCurrentX = (int) event.getX();
            mCurrentY = (int) event.getY();
    
            invalidate();
            return true;
        }
    
        @Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
            mPath.addCircle(RADIUS, RADIUS, RADIUS, Path.Direction.CW);
            // 底图
            canvas.drawBitmap(bitmap, 0, 0, null);
            // 剪切
            canvas.translate(mCurrentX - RADIUS, mCurrentY - RADIUS);
            canvas.clipPath(mPath);
            // 画放大后的图
            canvas.translate(RADIUS - mCurrentX * FACTOR, RADIUS - mCurrentY
                    * FACTOR);
            canvas.drawBitmap(bitmap, matrix, null);
        }
    
        //等比缩放图片资源
        public Bitmap upImageSize(Bitmap bmp) {
            if (bmp == null){
                return null;
            }
            // 计算比例
            float scaleX = (float) mScreenWidth / bmp.getWidth();// 宽的比例
            float scaleY = (float) mScreenHeight / bmp.getHeight();// 高的比例
            //新的宽高
            int newW = 0;
            int newH = 0;
            if(scaleX < scaleY){
                newW = (int) (bmp.getWidth() * scaleX);
                newH = (int) (bmp.getHeight() * scaleX);
            }else if(scaleX >= scaleY){
                newW = (int) (bmp.getWidth() * scaleY);
                newH = (int) (bmp.getHeight() * scaleY);
            }
            Log.i("Bitmap rate:", scaleX+","+scaleY);
            return Bitmap.createScaledBitmap(bmp, newW, newH, true);
        }
    }

**方法二：**

public class Magnifier extends View {
        
        private final Bitmap bitmap;
        private final ShapeDrawable drawable;
        // 放大镜的半径
        private static final int RADIUS = 220;
        // 放大倍数
        private static final float FACTOR = 1.5f;
        private final Matrix matrix = new Matrix();
    
        public Magnifier(Context context) {
            this(context, null);
        }
    
        public Magnifier(Context context, @Nullable AttributeSet attrs) {
            super(context, attrs);
    
            DisplayMetrics dm = getResources().getDisplayMetrics();
            int mScreenWidth = dm.widthPixels;
            int mScreenHeight = dm.heightPixels;
    
            Bitmap bmp = BitmapFactory.decodeResource(getResources(), R.mipmap.map);
    
            Bitmap bmp1 = upImageSize(null, bmp, mScreenWidth, mScreenHeight);
    
            bitmap = bmp1;
            BitmapShader shader = new BitmapShader(Bitmap.createScaledBitmap(bmp1,
                    (int) (bmp1.getWidth() * FACTOR), (int) (bmp1.getHeight() * FACTOR), true), Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
    
            // 圆形的drawable
            drawable = new ShapeDrawable(new OvalShape());
            drawable.getPaint().setShader(shader);
            drawable.setBounds(0, 0, RADIUS * 2, RADIUS * 2);
        }
    
        public Bitmap upImageSize(Context context,Bitmap bmp, int width,int height) {
            if (bmp == null){
                return null;
            }
            // 计算比例
            float scaleX = (float)width / bmp.getWidth();// 宽的比例
            float scaleY = (float)height / bmp.getHeight();// 高的比例
            //新的宽高
            int newW = 0;
            int newH = 0;
            if(scaleX < scaleY){
                newW = (int) (bmp.getWidth() * scaleX);
                newH = (int) (bmp.getHeight() * scaleX);
            }else if(scaleX >= scaleY){
                newW = (int) (bmp.getWidth() * scaleY);
                newH = (int) (bmp.getHeight() * scaleY);
            }
            return Bitmap.createScaledBitmap(bmp, newW, newH, true);
        }
    
        @Override
        public boolean onTouchEvent(MotionEvent event) {
            final int x = (int) event.getX();
            final int y = (int) event.getY();
    
            // 这个位置表示的是，画shader的起始位置
            matrix.setTranslate(RADIUS - x * FACTOR, RADIUS - y * FACTOR);
            drawable.getPaint().getShader().setLocalMatrix(matrix);
    
            // bounds，就是那个圆的外切矩形
            drawable.setBounds(x - RADIUS, y - RADIUS, x + RADIUS, y + RADIUS);
            invalidate();
            return true;
        }
    
        @Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
            canvas.drawBitmap(bitmap, 0, 0, null);
            canvas.translate(0, -RADIUS);
            drawable.draw(canvas);
        }
    }

**Activity文件：**

public class TestActivity extends AppCompatActivity {
        
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_test);
        }
    }