Android——图片放大镜效果

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);
    }
}