webentwicklung-frage-antwort-db.com.de

android imageView: Einstellung der Drag & Pin-Zoom-Parameter

Ich entwickle derzeit für Android (meine erste App) eine Anwendung, mit der Benutzer die U-Bahn-Karte sehen und Zoomen und Ziehen zusammenfassen können.

Ich ändere gerade den Code, der in Hello Android, 3rd Edition, gefunden wurde, und hat das Zoomen und Ziehen an die Arbeit gebracht. Ich benutze Matrix als meine Layoutskala.

Ich habe jedoch jetzt 3 Probleme:

  1. Ich habe viele Versuche unternommen, um die Ziehparameter zu beschränken, aber ich kann nicht aufhalten, dass er aus der übergeordneten Ansicht gezogen wird (und tatsächlich aus der Ansicht verschwinden kann). Ich habe versucht, Layoutparameter in der XML-Datei festzulegen, und es funktioniert einfach nicht.

  2. Ich kann den Zoom gut festhalten, aber ich habe wieder Schwierigkeiten, den Zoom zu begrenzen. Ich versuche mit dem Einstellen von max_zoom und min_zoom herumzuspielen, um den Skalierungswert zu begrenzen (ich werde meinen Code danach posten)

  3. Ich habe auch Probleme beim Versuch, eine Koordinate auf meinem Bild abzubilden, sodass Benutzer auf bestimmte Teile klicken können (der ganze Punkt ist, dass Benutzer auf eine Station auf der Karte klicken und Informationen dazu anzeigen können.)

Ich habe das Gefühl, ich habe Probleme, weil ich die Matrixskala verwende.

Hier ist mein aktueller Code:

Touch.Java

package org.example.touch;
import Android.app.Activity;
import Android.graphics.Bitmap;
import Android.graphics.Matrix;
import Android.graphics.PointF;
import Android.os.Bundle;
import Android.util.FloatMath;
import Android.util.Log;
import Android.view.MotionEvent;
import Android.view.View;
import Android.view.View.OnTouchListener;
import Android.widget.GridView;
import Android.widget.ImageView;

public class Touch extends Activity implements OnTouchListener {
private static final String TAG = "Touch";

private static final float MIN_ZOOM = 1.0f;
private static final float MAX_ZOOM = 5.0f;

// 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;

@Override
public void onCreate(Bundle savedInstanceState) {
   super.onCreate(savedInstanceState);
   setContentView(R.layout.main);
   ImageView view = (ImageView) findViewById(R.id.imageView);
   //view.setLayoutParams(new GridView.LayoutParams(85, 85));
   view.setScaleType(ImageView.ScaleType.FIT_CENTER);
   view.setOnTouchListener(this);   
}

public boolean onTouch(View v, MotionEvent event) {
   ImageView view = (ImageView) v;
   view.setScaleType(ImageView.ScaleType.MATRIX);
   float scale;

   // Dump touch event to log
   dumpEvent(event);

   // Handle touch events here...
   switch (event.getAction() & MotionEvent.ACTION_MASK) {

   case MotionEvent.ACTION_DOWN: //first finger down only
      savedMatrix.set(matrix);
      start.set(event.getX(), event.getY());
      Log.d(TAG, "mode=DRAG" );
      mode = DRAG;
      break;
   case MotionEvent.ACTION_UP: //first finger lifted
   case MotionEvent.ACTION_POINTER_UP: //second finger lifted
      mode = NONE;
      Log.d(TAG, "mode=NONE" );
      break;
   case MotionEvent.ACTION_POINTER_DOWN: //second finger down
      oldDist = spacing(event);
      Log.d(TAG, "oldDist=" + oldDist);
      if (oldDist > 5f) {
         savedMatrix.set(matrix);
         midPoint(mid, event);
         mode = ZOOM;
         Log.d(TAG, "mode=ZOOM" );
      }
      break;

   case MotionEvent.ACTION_MOVE: 
      if (mode == DRAG) { //movement of first finger
         matrix.set(savedMatrix);
         if (view.getLeft() >= -392){
            matrix.postTranslate(event.getX() - start.x, event.getY() - start.y);
         }
      }
      else if (mode == ZOOM) { //pinch zooming
         float newDist = spacing(event);
         Log.d(TAG, "newDist=" + newDist);
         if (newDist > 5f) {
            matrix.set(savedMatrix);
            scale = newDist / oldDist; **//thinking i need to play around with this value to limit it**
            matrix.postScale(scale, scale, mid.x, mid.y);
         }
      }
      break;
   }

   // Perform the transformation
   view.setImageMatrix(matrix);

   return true; // indicate event was handled
}

private float spacing(MotionEvent event) {
   float x = event.getX(0) - event.getX(1);
   float y = event.getY(0) - event.getY(1);
   return FloatMath.sqrt(x * x + y * y);
}

private void midPoint(PointF point, MotionEvent event) {
   float x = event.getX(0) + event.getX(1);
   float y = event.getY(0) + event.getY(1);
   point.set(x / 2, y / 2);
}

/** Show an event in the LogCat view, for debugging */
private void dumpEvent(MotionEvent 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());
}
}

main.xml (ziemlich einfach nichts wirklich kompliziert):

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
  xmlns:Android="http://schemas.Android.com/apk/res/Android"
  Android:layout_width="fill_parent"
  Android:layout_height="fill_parent" >
<ImageView Android:id="@+id/imageView"
     Android:layout_width="fill_parent"
     Android:layout_height="fill_parent"
     Android:src="@drawable/map"
     Android:scaleType="matrix" >
</ImageView>
</FrameLayout>

AndroidManifest.xml (fügte nur das Design hinzu, sodass es keine Titelleiste gibt und Vollbild ist)

<manifest xmlns:Android="http://schemas.Android.com/apk/res/Android"
  package="org.example.touch"
  Android:versionCode="7"
  Android:versionName="1.0" >
<application Android:icon="@drawable/icon" Android:label="@string/app_name" Android:theme="@Android:style/Theme.NoTitleBar.Fullscreen" >
  <activity Android:name=".Touch"
        Android:label="@string/app_name" >
     <intent-filter>
        <action Android:name="Android.intent.action.MAIN" />
        <category Android:name="Android.intent.category.LAUNCHER" />
     </intent-filter>
  </activity>
</application>
<uses-sdk Android:minSdkVersion="3" Android:targetSdkVersion="7" />
</manifest>
29
w1ck3d64

Ich habe gerade das erstellt:

https://github.com/jasonpolites/gesture-imageview

Könnte für jemanden nützlich sein ...

18
Jason Polites

Eine andere Option, die für einige funktionieren könnte, ist die Verwendung einer WebView, die über integrierte Zoomsteuerelemente verfügt.

WebView webView = new WebView(this);
webView.setBackgroundColor(0xff000000);
webView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
webView.getSettings().setBuiltInZoomControls(true);
webView.getSettings().setSupportZoom(true);
//webView.getSettings().setDisplayZoomControls(false);  // API 11
webView.loadDataWithBaseURL(null, getHtml(), "text/html", "UTF-8", null);
mainView.addView(webView, -1, -2);
12
Ernie Thomason

Ich weiß, das ist alt, aber ich habe mich darum bemüht und habe eine Lösung, die ziemlich gut funktioniert. Direkt nach Ihrer switch-Anweisung und vor dem Festlegen der Matrix können Sie den Zoom wie folgt begrenzen:

private void limitZoom(Matrix m) {

    float[] values = new float[9];
    m.getValues(values);
    float scaleX = values[Matrix.MSCALE_X];
    float scaleY = values[Matrix.MSCALE_Y];
    if(scaleX > MAX_ZOOM) {
        scaleX = MAX_ZOOM;
    } else if(scaleX < MIN_ZOOM) {
        scaleX = MIN_ZOOM;
    }

    if(scaleY > MAX_ZOOM) {
        scaleY = MAX_ZOOM;
    } else if(scaleY < MIN_ZOOM) {
        scaleY = MIN_ZOOM;
    }

    values[Matrix.MSCALE_X] = scaleX;
    values[Matrix.MSCALE_Y] = scaleY; 
    m.setValues(values);
}

Ich arbeite immer noch daran, wie man die Übersetzung einschränken kann, aber dies sollte für die Zoom-Begrenzung funktionieren. 

BEARBEITEN: Hier ist eine Lösung zur Begrenzung der Übersetzung. Ich mache dies nur als Hinweis für eine Vollbildansicht, weshalb ich die Anzeigebreite und -höhe in meinen einschränkenden Faktoren verwende. Sie können jedoch genauso gut die Breite und Höhe Ihrer Ansicht verwenden.

private void limitDrag(Matrix m) {
    float[] values = new float[9];
    m.getValues(values);
    float transX = values[Matrix.MTRANS_X];
    float transY = values[Matrix.MTRANS_Y];
    float scaleX = values[Matrix.MSCALE_X];
    float scaleY = values[Matrix.MSCALE_Y];

    ImageView iv = (ImageView)findViewById(R.id.photo_view);
    Rect bounds = iv.getDrawable().getBounds();
    int viewWidth = getResources().getDisplayMetrics().widthPixels;
    int viewHeight = getResources().getDisplayMetrics().heightPixels;

    int width = bounds.right - bounds.left;
    int height = bounds.bottom - bounds.top;

    float minX = (-width + 20) * scaleX; 
    float minY = (-height + 20) * scaleY;

    if(transX > (viewWidth - 20)) {
        transX = viewWidth - 20;
    } else if(transX < minX) {
        transX = minX;
    }

    if(transY > (viewHeight - 80)) {
        transY = viewHeight - 80;
    } else if(transY < minY) {
        transY = minY;
    }

    values[Matrix.MTRANS_X] = transX;
    values[Matrix.MTRANS_Y] = transY; 
    m.setValues(values);
}

Dies würde wiederum direkt nach Ihrer switch-Anweisung und direkt vor dem Festlegen der Matrix für das Bild in der Ansicht erfolgen. Ich habe die Zoom-Begrenzung auch in eine Funktion aufgeteilt und diese wird oben reflektiert.

7
Michael Celey

Hier ist der vollständige Code für Pinch-Zoom und Pan (Touch.Java mit einigen Modifikationen, die praktisch verwendet werden können)

public class Touch implements OnTouchListener {  

 // These matrices will be used to move and zoom image  
public static Matrix matrix = new Matrix();  
public static 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;
private static final float MAX_ZOOM = (float) 3;
private static final float MIN_ZOOM = 1;  
 int mode = NONE;  

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

 int width,height;

 @Override  
 public boolean onTouch(View v, MotionEvent event) {


  ImageView view = (ImageView) v;
  Rect bounds = view.getDrawable().getBounds();

  width = bounds.right - bounds.left;
  height = bounds.bottom - bounds.top;
  // Dump touch event to log  
  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());  
   mode = DRAG;  
   break;  
  case MotionEvent.ACTION_POINTER_DOWN:  
   oldDist = spacing(event);  
   if (oldDist > 10f) {  
    savedMatrix.set(matrix);  
    midPoint(mid, event);  
    mode = ZOOM;  
   }  
   break;  
  case MotionEvent.ACTION_UP:  
  case MotionEvent.ACTION_POINTER_UP:  
   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);  
    if (newDist > 10f) {  
     matrix.set(savedMatrix);  
     float scale = newDist / oldDist;  
     matrix.postScale(scale, scale, mid.x, mid.y);  
    }  
   }  
   break;  
  }  
//----------------------------------------------------
  limitZoom(matrix);
  limitDrag( matrix);
//----------------------------------------------------  
  view.setImageMatrix(matrix);  
  return true; // indicate event was handled  
 }  

 /** Show an event in the LogCat view, for debugging */  
 private void dumpEvent(MotionEvent 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("]");  
 }  

 /** Determine the space between the first two fingers */  
 private float spacing(MotionEvent 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, MotionEvent event) {  
  float x = event.getX(0) + event.getX(1);  
  float y = event.getY(0) + event.getY(1);  
  point.set(x / 2, y / 2);  
 }  

 private void limitZoom(Matrix m) {

        float[] values = new float[9];
        m.getValues(values);
        float scaleX = values[Matrix.MSCALE_X];
        float scaleY = values[Matrix.MSCALE_Y];
        if(scaleX > MAX_ZOOM) {
            scaleX = MAX_ZOOM;
        } else if(scaleX < MIN_ZOOM) {
            scaleX = MIN_ZOOM;
        }

        if(scaleY > MAX_ZOOM) {
            scaleY = MAX_ZOOM;
        } else if(scaleY < MIN_ZOOM) {
            scaleY = MIN_ZOOM;
        }

        values[Matrix.MSCALE_X] = scaleX;
        values[Matrix.MSCALE_Y] = scaleY; 
        m.setValues(values);
    }


 private void limitDrag(Matrix m) {

        float[] values = new float[9];
        m.getValues(values);
        float transX = values[Matrix.MTRANS_X];
        float transY = values[Matrix.MTRANS_Y];
        float scaleX = values[Matrix.MSCALE_X];
        float scaleY = values[Matrix.MSCALE_Y];
//--- limit moving to left ---
        float minX = (-width + 0) * (scaleX-1); 
        float minY = (-height + 0) * (scaleY-1);
//--- limit moving to right ---     
        float maxX=minX+width*(scaleX-1);
        float maxY=minY+height*(scaleY-1);
        if(transX>maxX){transX = maxX;}
        if(transX<minX){transX = minX;}
        if(transY>maxY){transY = maxY;}
        if(transY<minY){transY = minY;}
        values[Matrix.MTRANS_X] = transX;
        values[Matrix.MTRANS_Y] = transY; 
        m.setValues(values);
    }

}
6

Laden Sie den Quellcode herunter. __ Sie können auch a) tippen, b) ziehen und c) Zoom zoomen . http://pragprog.com/titles/eband3/source_code

6
user647826

Verwenden Sie den Code im Kommentar von Phyxdevel unter dem folgenden Link ZDNET Pinch Zoom Example .

Er hat den Code, um die Schwenk- und Zoomstufe einzuschränken.

5
Jana

sie können den folgenden Code verwenden, um unten und rechts zu begrenzen

float maxX = minX+viewWidth; 
int offsetY = 80;
        float maxY = minY+viewHeight-offsetY;
       if(x>maxX){
           mPosX = maxX;
       }
       if(x<minX){
           mPosX = minX;
       }
       if(y>maxY){
           mPosY = maxY;
       }
       if(y<minY){
           mPosY = minY;
       }
0
Ankit