如何获得图像的缩放功能？

是否有一种常见的方法来显示大图像并使用户能够放大和缩小图像？

到现在为止我找到了两种方法:

覆盖ImageView,这对于这样一个常见问题似乎有点过分.

使用webview但对整体布局等的控制较少

Mike Ortiz.. 206

UPDATE

我刚刚给TouchImageView一个新的更新.它现在包括双击缩放和Fling以及平移和缩放.下面的代码非常过时.您可以查看github项目以获取最新代码.

将TouchImageView.java放在项目中.然后它可以像ImageView一样使用.例:

TouchImageView img = (TouchImageView) findViewById(R.id.img);

如果您在xml中使用TouchImageView,则必须提供完整的包名称,因为它是自定义视图.例:

TouchImageView img = (TouchImageView) findViewById(R.id.img);

如果您在xml中使用TouchImageView,则必须提供完整的包名称,因为它是自定义视图.例:

`.是你做的吗？ 
@Mike我试过这段代码,但自定义图库不起作用.是否有任何技巧可以解决这个问题. 

2> Robert Foss..：
我调整了一些代码来创建支持多点触控(> 2.1)的TouchImageView.它的灵感来自Hello,Android这本书!(第3版)

它包含在以下3个文件中TouchImageView.java WrapMotionEvent.java EclairMotionEvent.java

TouchImageView.java

import se.robertfoss.ChanImageBrowser.Viewer;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Matrix;
import android.graphics.PointF;
import android.util.FloatMath;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.widget.ImageView;

public class TouchImageView extends ImageView {

    private static final String TAG = "Touch";
    // These matrices will be used to move and zoom image
    Matrix matrix = new Matrix();
    Matrix savedMatrix = new Matrix();

    // We can be in one of these 3 states
    static final int NONE = 0;
    static final int DRAG = 1;
    static final int ZOOM = 2;
    int mode = NONE;

    // Remember some things for zooming
    PointF start = new PointF();
    PointF mid = new PointF();
    float oldDist = 1f;

    Context context;


    public TouchImageView(Context context) {
        super(context);
        super.setClickable(true);
        this.context = context;

        matrix.setTranslate(1f, 1f);
        setImageMatrix(matrix);
        setScaleType(ScaleType.MATRIX);

        setOnTouchListener(new OnTouchListener() {

            @Override
            public boolean onTouch(View v, MotionEvent rawEvent) {
                WrapMotionEvent event = WrapMotionEvent.wrap(rawEvent);

                // Dump touch event to log
                if (Viewer.isDebug == true){
                    dumpEvent(event);
                }

                // Handle touch events here...
                switch (event.getAction() & MotionEvent.ACTION_MASK) {
                case MotionEvent.ACTION_DOWN:
                    savedMatrix.set(matrix);
                    start.set(event.getX(), event.getY());
                    Log.d(TAG, "mode=DRAG");
                    mode = DRAG;
                    break;
                case MotionEvent.ACTION_POINTER_DOWN:
                    oldDist = spacing(event);
                    Log.d(TAG, "oldDist=" + oldDist);
                    if (oldDist > 10f) {
                        savedMatrix.set(matrix);
                        midPoint(mid, event);
                        mode = ZOOM;
                        Log.d(TAG, "mode=ZOOM");
                    }
                    break;
                case MotionEvent.ACTION_UP:
                    int xDiff = (int) Math.abs(event.getX() - start.x);
                    int yDiff = (int) Math.abs(event.getY() - start.y);
                    if (xDiff < 8 && yDiff < 8){
                        performClick();
                    }
                case MotionEvent.ACTION_POINTER_UP:
                    mode = NONE;
                    Log.d(TAG, "mode=NONE");
                    break;
                case MotionEvent.ACTION_MOVE:
                    if (mode == DRAG) {
                        // ...
                        matrix.set(savedMatrix);
                        matrix.postTranslate(event.getX() - start.x, event.getY() - start.y);
                    } else if (mode == ZOOM) {
                        float newDist = spacing(event);
                        Log.d(TAG, "newDist=" + newDist);
                        if (newDist > 10f) {
                            matrix.set(savedMatrix);
                            float scale = newDist / oldDist;
                            matrix.postScale(scale, scale, mid.x, mid.y);
                        }
                    }
                    break;
                }

                setImageMatrix(matrix);
                return true; // indicate event was handled
            }

        });
    }


    public void setImage(Bitmap bm, int displayWidth, int displayHeight) { 
        super.setImageBitmap(bm);

        //Fit to screen.
        float scale;
        if ((displayHeight / bm.getHeight()) >= (displayWidth / bm.getWidth())){
            scale =  (float)displayWidth / (float)bm.getWidth();
        } else {
            scale = (float)displayHeight / (float)bm.getHeight();
        }

        savedMatrix.set(matrix);
        matrix.set(savedMatrix);
        matrix.postScale(scale, scale, mid.x, mid.y);
        setImageMatrix(matrix);


        // Center the image
        float redundantYSpace = (float)displayHeight - (scale * (float)bm.getHeight()) ;
        float redundantXSpace = (float)displayWidth - (scale * (float)bm.getWidth());

        redundantYSpace /= (float)2;
        redundantXSpace /= (float)2;


        savedMatrix.set(matrix);
        matrix.set(savedMatrix);
        matrix.postTranslate(redundantXSpace, redundantYSpace);
        setImageMatrix(matrix);
    }


    /** Show an event in the LogCat view, for debugging */
    private void dumpEvent(WrapMotionEvent event) {
        // ...
        String names[] = { "DOWN", "UP", "MOVE", "CANCEL", "OUTSIDE",
            "POINTER_DOWN", "POINTER_UP", "7?", "8?", "9?" };
        StringBuilder sb = new StringBuilder();
        int action = event.getAction();
        int actionCode = action & MotionEvent.ACTION_MASK;
        sb.append("event ACTION_").append(names[actionCode]);
        if (actionCode == MotionEvent.ACTION_POINTER_DOWN
                || actionCode == MotionEvent.ACTION_POINTER_UP) {
            sb.append("(pid ").append(
                    action >> MotionEvent.ACTION_POINTER_ID_SHIFT);
            sb.append(")");
        }
        sb.append("[");
        for (int i = 0; i < event.getPointerCount(); i++) {
            sb.append("#").append(i);
            sb.append("(pid ").append(event.getPointerId(i));
            sb.append(")=").append((int) event.getX(i));
            sb.append(",").append((int) event.getY(i));
            if (i + 1 < event.getPointerCount())
            sb.append(";");
        }
        sb.append("]");
        Log.d(TAG, sb.toString());
    }

    /** Determine the space between the first two fingers */
    private float spacing(WrapMotionEvent event) {
        // ...
        float x = event.getX(0) - event.getX(1);
        float y = event.getY(0) - event.getY(1);
        return FloatMath.sqrt(x * x + y * y);
    }

    /** Calculate the mid point of the first two fingers */
    private void midPoint(PointF point, WrapMotionEvent event) {
        // ...
        float x = event.getX(0) + event.getX(1);
        float y = event.getY(0) + event.getY(1);
        point.set(x / 2, y / 2);
    }
}


WrapMotionEvent.java

import android.view.MotionEvent;

public class WrapMotionEvent {
protected MotionEvent event;




    protected WrapMotionEvent(MotionEvent event) {
        this.event = event;
    }

    static public WrapMotionEvent wrap(MotionEvent event) {
            try {
                return new EclairMotionEvent(event);
            } catch (VerifyError e) {
                return new WrapMotionEvent(event);
            }
    }



    public int getAction() {
            return event.getAction();
    }

    public float getX() {
            return event.getX();
    }

    public float getX(int pointerIndex) {
            verifyPointerIndex(pointerIndex);
            return getX();
    }

    public float getY() {
            return event.getY();
    }

    public float getY(int pointerIndex) {
            verifyPointerIndex(pointerIndex);
            return getY();
    }

    public int getPointerCount() {
            return 1;
    }

    public int getPointerId(int pointerIndex) {
            verifyPointerIndex(pointerIndex);
            return 0;
    }

    private void verifyPointerIndex(int pointerIndex) {
            if (pointerIndex > 0) {
                throw new IllegalArgumentException(
                    "Invalid pointer index for Donut/Cupcake");
            }
    }

}


EclairMotionEvent.java

import android.view.MotionEvent;

public class EclairMotionEvent extends WrapMotionEvent {

    protected EclairMotionEvent(MotionEvent event) {
            super(event);
    }

    public float getX(int pointerIndex) {
            return event.getX(pointerIndex);
    }

    public float getY(int pointerIndex) {
            return event.getY(pointerIndex);
    }

    public int getPointerCount() {
            return event.getPointerCount();
    }

    public int getPointerId(int pointerIndex) {
            return event.getPointerId(pointerIndex);
    }
}

        
该代码仅适用于2.1及更高版本.也许2.0. 
它有效,但我没有看到`WrapMotionEvent`和`EclairMotionEvent`中的重点...无论如何,+1. 
在我的Hero 1.5上试过这个代码,缩放不起作用. 
多点触控适用于支持它的手机.适用于Android <2.0的常规触控 
这是什么？>> se.robertfoss.ChanImageBrowser.Viewer 

3> Janusz..：
我使用WebView并通过内存加载图像

webview.loadUrl("file://...")


WebView处理所有平移缩放和滚动.如果使用wrap_content,则webview不会大于图像,也不会显示白色区域.WebView是更好的ImageView;)

        
我使用相同的方法.我有一个大型地铁地图,我希望用户能够缩放和滚动.我注意到,如果你有一个非常大的图像(即1000或3000像素宽),一旦放大,图像会变得模糊.似乎coliris无法显示非常清晰的大缩放图像.即使原始图像未压缩且非常清晰.因此,我最终将一个大图像切割成较小的切片,然后通过HTML将它们重新组合在一起.这样放大时图像就会保持清晰.(我在Nexus One上,之前是2.1更新,现在是2.2) 
更好地使用webview的内置缩放按钮和支持缩放放大/缩小比写一个全新的算法,这可能不适用于不同的手机和未来的Android平台版本 

4> digiphd..：
在回答Janusz的原始问题时,有几种方法可以实现这一点,所有这些方法的难易程度各不相同,并在下面说明.使用Web视图很好,但在外观和可控性方面非常有限.如果你从画布中绘制一个位图,那么最常用的解决方案似乎是MikeOrtiz,Robert Foss和/或Jacob Nordfalk所建议的.有一个很好的例子可以整合PaulBourke的android-multitouch-controller ,非常适合拥有多点触控支持和各种自定义视图.

就个人而言,如果您只是将画布绘制到位图然后在内部和ImageView中显示它并希望能够使用多点触控放大和移动,我发现MikeOrtiz的解决方案是最简单的.但是,就我的目的而言,他提供的Git代码似乎仅在他的TouchImageView自定义ImageView类是唯一的子代或者提供布局参数时才起作用:

android:layout_
android:layout_


不幸的是由于我的布局设计,我需要"layout_content"用于"layout_height".当我将其更改为此时,图像在底部被裁剪,我无法滚动或缩放到裁剪区域.所以我看了一下ImageView 的Source,看看Android是如何实现"onMeasure"并改变MikeOrtiz的.

   @Override
protected void onMeasure (int widthMeasureSpec, int heightMeasureSpec)
{
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);

  //**** ADDED THIS ********/////
      int  w = (int) bmWidth;
      int  h = (int) bmHeight;
     width = resolveSize(w, widthMeasureSpec);  
     height = resolveSize(h, heightMeasureSpec);
  //**** END ********///   

   // width = MeasureSpec.getSize(widthMeasureSpec);   // REMOVED
   // height = MeasureSpec.getSize(heightMeasureSpec); // REMOVED

    //Fit to screen.
    float scale;
    float scaleX =  (float)width / (float)bmWidth;
    float scaleY = (float)height / (float)bmHeight;

    scale = Math.min(scaleX, scaleY);
    matrix.setScale(scale, scale);
    setImageMatrix(matrix);
    saveScale = 1f;

    // Center the image
    redundantYSpace = (float)height - (scale * (float)bmHeight) ;
    redundantXSpace = (float)width - (scale * (float)bmWidth);
    redundantYSpace /= (float)2;
    redundantXSpace /= (float)2;

    matrix.postTranslate(redundantXSpace, redundantYSpace);

    origWidth = width - 2 * redundantXSpace;
    origHeight = height - 2 * redundantYSpace;
   // origHeight = bmHeight;
    right = width * saveScale - width - (2 * redundantXSpace * saveScale);
    bottom = height * saveScale - height - (2 * redundantYSpace * saveScale);

    setImageMatrix(matrix);
}


这里resolveSize(int,int)是一个"实用程序,用于协调所需大小与MeasureSpec强加的约束,其中:

参数:

 - size How big the view wants to be
 - MeasureSpec Constraints imposed by the parent


返回:

 - The size this view should be."


因此,在加载图像时,本质上提供的行为与原始ImageView类更相似.可以进行一些更改以支持更多种改变宽高比的屏幕.但是现在我希望这会有所帮助.感谢MikeOrtiz的原始代码,非常棒的工作.

        

5> Jacob Nordfa..：
你也可以试试http://code.google.com/p/android-multitouch-controller/

图书馆真的很棒,虽然最初有点难以掌握.

        

6> zontar..：
我刚刚整合了Robert Foss的TouchImageView:开箱即用!谢谢!

我刚刚修改了一些代码,所以我可以从layout.xml中实例化它.

只需添加两个构造函数

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

public TouchImageView(Context context) {
    super(context);
    init(context);
}


并将旧构造函数转换为init方法:

private void init(Context context){
    //...old code ofconstructor of Robert Moss's code
}