Android ImageView缩放效果

时间:2015-07-29 20:28:47

标签: javascript android image zoom

目前我正在尝试开发一款应用,用户可以放大图片。但是我不需要捏缩放,而是需要制作镜头效果,这意味着当用户点击图像并将其手指放在上面一段时间时,右上方会出现带有放大图像的圆圈。它看起来像这样: enter image description here

我查看了下面提供的答案和链接并得到了这样的结果,但它不起作用:

public class MainActivity extends Activity implements OnTouchListener{
ImageView takenPhoto;
static PointF zoomPos;
Paint shaderPaint;
BitmapShader mShader;
BitmapShader shader;
Bitmap bmp;
Bitmap mutableBitmap;
static Matrix matrix;
Canvas canvas;
static Paint mPaint;
static boolean zooming;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        File file = new File(Environment.getExternalStorageDirectory() + "/Pictures/boxes.jpg");

        String fileString = file.getPath();


        takenPhoto = (ImageView) findViewById(R.id.imageView1);

        bmp = BitmapFactory.decodeFile(fileString);
        mutableBitmap = bmp.copy(Bitmap.Config.ARGB_8888, true);
        takenPhoto.setImageBitmap(mutableBitmap);

        matrix = new Matrix();
        mShader = new BitmapShader(mutableBitmap, TileMode.CLAMP, TileMode.CLAMP); 
        mPaint = new Paint();
        mPaint.setShader(mShader);
        takenPhoto.setOnTouchListener(this);
    }

    private static class ZoomView extends View {



        public ZoomView(Context context) {
            super(context);
        }


         public boolean onTouch(View view, MotionEvent event) {


                int action = event.getAction(); 

                zoomPos.x = event.getX();
                zoomPos.y = event.getY();

                switch (action) { 
                case MotionEvent.ACTION_DOWN:
                case MotionEvent.ACTION_MOVE:
                    zooming = true;
                    this.invalidate();
                    break; 
                case MotionEvent.ACTION_UP:   
                case MotionEvent.ACTION_CANCEL:
                    zooming = false;
                    this.invalidate();
                    break; 

                default: 
                    break; 
                }



             return true;
         }

         @Override
         protected void onDraw(Canvas canvas) {

             super.onDraw(canvas);

             if (zooming) {
                 matrix.reset();
                 matrix.postScale(2f, 2f, zoomPos.x, zoomPos.y);
                 mPaint.getShader().setLocalMatrix(matrix);

                 canvas.drawCircle(zoomPos.x, zoomPos.y, 100, mPaint);
             }
         }





    }

    @Override
    public boolean onTouch(View v, MotionEvent event) {
        // TODO Auto-generated method stub
        return true;
    }


}

3 个答案:

答案 0 :(得分:2)

我的猜测是:

1-您必须在imageview上使用触控侦听器 2-你必须有一个画布(你在那里绘制缩放的位图)

如果您还希望在将图像拖过图像的同时实现onDragListener来更新圆形缩放图像。

我想说看一下这个链接:Android - How to circular zoom/magnify part of image?

答案 1 :(得分:1)

在尝试解决这个特定问题的几天之后,由于上面的答案和其他来源,我能够编写完整的工作代码。

为了节省你们所有人的时间。复制粘贴并稍微编辑以符合您的目标。

首先,您需要编辑主要活动 - 我们将使用自定义ImageView

 <your.package.name.ZoomView
    android:id="@+id/imageView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>

然后我们将编辑MainActivity.java。像ImageView一样使用ZoomView

ImageView takenPhoto;
takenPhoto = (ZoomView) findViewById(R.id.imageView1);

之后,创建ZoomView类并粘贴它:

public class ZoomView extends ImageView {

PointF zoomPos;
boolean zooming;
Matrix matrix;
BitmapShader mShader;
Paint mPaint;

public ZoomView(Context context) {
    super(context);
}

public ZoomView(Context context, AttributeSet attrs) {
    super(context, attrs);
}

public ZoomView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
}

@Override
public boolean onTouchEvent(@NonNull MotionEvent event) {
    zoomPos = new PointF();
    zoomPos.x = event.getX();
    zoomPos.y = event.getY();

    matrix = new Matrix();
    mShader = new BitmapShader(MainActivity.mutableBitmap, TileMode.CLAMP, TileMode.CLAMP);
    mPaint = new Paint();
    mPaint.setShader(mShader);

    int action = event.getAction(); 

    switch (action) { 
    case MotionEvent.ACTION_DOWN:
    case MotionEvent.ACTION_MOVE:
        zooming = true;
        this.invalidate();
        break; 
    case MotionEvent.ACTION_UP: 
        zooming = false;
        this.invalidate();
        break;
    case MotionEvent.ACTION_CANCEL:
        zooming = false;
        this.invalidate();
        break; 

    default: 
        break; 
    }
 return true;
}

@Override
protected void onDraw(@NonNull Canvas canvas) {
    super.onDraw(canvas);
    if (zooming) {
        matrix.reset();
        matrix.postScale(2f, 2f, zoomPos.x, zoomPos.y);
        mPaint.getShader().setLocalMatrix(matrix);
        canvas.drawCircle(zoomPos.x, zoomPos.y, 100, mPaint);
    }
}
}

现在你应该有工作放大效果。

答案 2 :(得分:0)

一种可能的解决方案是从显示图像的视图中抓取Canvas对象。您需要使用各种motion events更新Canvas。

在处理这些事件时,请使用draw only a portion of the image的功能。列出的方法是Canvas对象的一部分。至于参数:

Bitmap bitmap   //The image to zoom on
Rectangle src   //A rectangle defining the portion of the image to zoom in on
Rectangle dest  //A rectangle defining where in the View to draw the zoomed portion of your image. 
                //If the size of the rectangles is mismatched, it will zoom.
Paint paint     //The paint object necessary for drawing.

如果您有任何疑问,请发表评论。快乐的编码!