Leinwand Pinch Zoom in Android

Question

Ich habe eine benutzerdefinierte Pinch Zoom Layout-Code, aber ich möchte es in Canvas platzieren. Wie sollte ich es ändern, so dass es Pinch Zoom in Canvas sein kann?

Prise Zoom-Code von https://gist.github.com/klarson2/4f737adf7f2577dc0fd09efb85eff3b1:

private void init(Context context) { 
    final ScaleGestureDetector scaleDetector = new ScaleGestureDetector(context, this); 
    this.setOnTouchListener(new View.OnTouchListener() { 
     @Override 
     public boolean onTouch(View view, MotionEvent motionEvent) { 
     switch (motionEvent.getAction() & MotionEvent.ACTION_MASK) { 
      case MotionEvent.ACTION_DOWN: 
      Log.i(TAG, "DOWN"); 
      if (scale > MIN_ZOOM) { 
       mode = Mode.DRAG; 
       startX = motionEvent.getX() - prevDx; 
       startY = motionEvent.getY() - prevDy; 
      } 
      break; 
      case MotionEvent.ACTION_MOVE: 
      if (mode == Mode.DRAG) { 
       dx = motionEvent.getX() - startX; 
       dy = motionEvent.getY() - startY; 
      } 
      break; 
      case MotionEvent.ACTION_POINTER_DOWN: 
      mode = Mode.ZOOM; 
      break; 
      case MotionEvent.ACTION_POINTER_UP: 
      mode = Mode.NONE; 
      break; 
      case MotionEvent.ACTION_UP: 
      Log.i(TAG, "UP"); 
      mode = Mode.NONE; 
      prevDx = dx; 
      prevDy = dy; 
      break; 
     } 
     scaleDetector.onTouchEvent(motionEvent); 

     if ((mode == Mode.DRAG && scale >= MIN_ZOOM) || mode == Mode.ZOOM) { 
      getParent().requestDisallowInterceptTouchEvent(true); 
      float maxDx = child().getWidth() * (scale - 1); // adjusted for zero pivot 
      float maxDy = child().getHeight() * (scale - 1); // adjusted for zero pivot 
      dx = Math.min(Math.max(dx, -maxDx), 0); // adjusted for zero pivot 
      dy = Math.min(Math.max(dy, -maxDy), 0); // adjusted for zero pivot 
      Log.i(TAG, "Width: " + child().getWidth() + ", scale " + scale + ", dx " + dx 
      + ", max " + maxDx); 


      applyScaleAndTranslation(); 
      } 

      return true; 
      } 
     }); 
     } 

     // ScaleGestureDetector 

     @Override 
     public boolean onScaleBegin(ScaleGestureDetector scaleDetector) { 
     return true; 
     } 

    @Override 
    public boolean onScale(ScaleGestureDetector scaleDetector) { 
    float scaleFactor = scaleDetector.getScaleFactor(); 
    if (lastScaleFactor == 0 || (Math.signum(scaleFactor) == Math.signum(lastScaleFactor))) { 
     float prevScale = scale; 
     scale *= scaleFactor; 
     scale = Math.max(MIN_ZOOM, Math.min(scale, MAX_ZOOM)); 
     lastScaleFactor = scaleFactor; 
     float adjustedScaleFactor = scale/prevScale; 
     // added logic to adjust dx and dy for pinch/zoom pivot point 
     float focusX = scaleDetector.getFocusX(); 
     float focusY = scaleDetector.getFocusY(); 
     dx += (dx - focusX) * (adjustedScaleFactor - 1); 
     dy += (dy - focusY) * (adjustedScaleFactor - 1); 
    } else { 
     lastScaleFactor = 0; 
    } 
    return true; 
    } 

    @Override 
    public void onScaleEnd(ScaleGestureDetector scaleDetector) { 
    Log.i(TAG, "onScaleEnd"); 
    } 

    private void applyScaleAndTranslation() { 
    child().setScaleX(scale); 
    child().setScaleY(scale); 
    child().setPivotX(0f); // default is to pivot at view center 
    child().setPivotY(0f); // default is to pivot at view center 
    child().setTranslationX(dx); 
    child().setTranslationY(dy); 
    } 

    private View child() { 
    return getChildAt(0); 
    } 

Answer 1

Ich habe diese Art und Weise getan:

Hier können Sie mehrere Bilder in übergeordneter Ansicht hinzufügen, für Probe I 3 Bilder hinzugefügt haben.

Screenshot:

ZoomableViewGroup.java:

import android.content.Context; 
import android.graphics.Canvas; 
import android.graphics.Matrix; 
import android.graphics.PointF; 
import android.util.AttributeSet; 
import android.view.MotionEvent; 
import android.view.View; 
import android.view.ViewGroup; 

/** 
* Created by hiren.patel on 25-04-2016. 
*/ 

public class ZoomableViewGroup extends ViewGroup { 

    // these matrices will be used to move and zoom image 
    private Matrix matrix = new Matrix(); 
    private Matrix matrixInverse = new Matrix(); 
    private Matrix savedMatrix = new Matrix(); 
    // we can be in one of these 3 states 
    private static final int NONE = 0; 
    private static final int DRAG = 1; 
    private static final int ZOOM = 2; 
    private int mode = NONE; 
    // remember some things for zooming 
    private PointF start = new PointF(); 
    private PointF mid = new PointF(); 
    private float oldDist = 1f; 
    private float[] lastEvent = null; 

    private boolean initZoomApplied = false; 

    private float[] mDispatchTouchEventWorkingArray = new float[2]; 
    private float[] mOnTouchEventWorkingArray = new float[2]; 

    @Override 
    public boolean dispatchTouchEvent(MotionEvent ev) { 
     mDispatchTouchEventWorkingArray[0] = ev.getX(); 
     mDispatchTouchEventWorkingArray[1] = ev.getY(); 
     mDispatchTouchEventWorkingArray = screenPointsToScaledPoints(mDispatchTouchEventWorkingArray); 
     ev.setLocation(mDispatchTouchEventWorkingArray[0], 
       mDispatchTouchEventWorkingArray[1]); 
     return super.dispatchTouchEvent(ev); 
    } 

    private float[] scaledPointsToScreenPoints(float[] a) { 
     matrix.mapPoints(a); 
     return a; 
    } 

    private float[] screenPointsToScaledPoints(float[] a) { 
     matrixInverse.mapPoints(a); 
     return a; 
    } 

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

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

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

    /** 
    * 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 (float)Math.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 init(Context context) { 

    } 


    @Override 
    protected void onLayout(boolean changed, int l, int t, int r, int b) { 
     int childCount = getChildCount(); 
     for (int i = 0; i < childCount; i++) { 
      View child = getChildAt(i); 
      if (child.getVisibility() != GONE) { 
       child.layout(l, t, l + child.getMeasuredWidth(), t + child.getMeasuredHeight()); 
      } 
     } 
    } 

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

     int widthSize = MeasureSpec.getSize(widthMeasureSpec); 
     int heightSize = MeasureSpec.getSize(heightMeasureSpec); 

     float[] values = new float[9]; 
     matrix.getValues(values); 
     float container_width = values[Matrix.MSCALE_X] * widthSize; 
     float container_height = values[Matrix.MSCALE_Y] * heightSize; 

     //Log.d("zoomToFit", "m width: "+container_width+" m height: "+container_height); 
     //Log.d("zoomToFit", "m x: "+pan_x+" m y: "+pan_y); 

     int childCount = getChildCount(); 
     for (int i = 0; i < childCount; i++) { 
      View child = getChildAt(i); 
      if (child.getVisibility() != GONE) { 
       measureChild(child, widthMeasureSpec, heightMeasureSpec); 

       if (i == 0 && !initZoomApplied && child.getWidth() > 0) { 
        int c_w = child.getWidth(); 
        int c_h = child.getHeight(); 

        //zoomToFit(c_w, c_h, container_width, container_height); 
       } 
      } 
     } 

    } 

    private void zoomToFit(int c_w, int c_h, float container_width, float container_height) { 
     float proportion_firstChild = (float) c_w/(float) c_h; 
     float proportion_container = container_width/container_height; 

     //Log.d("zoomToFit", "firstChildW: "+c_w+" firstChildH: "+c_h); 
     //Log.d("zoomToFit", "proportion-container: "+proportion_container); 
     //Log.d("zoomToFit", "proportion_firstChild: "+proportion_firstChild); 

     if (proportion_container < proportion_firstChild) { 
      float initZoom = container_height/c_h; 
      //Log.d("zoomToFit", "adjust height with initZoom: "+initZoom); 
      matrix.postScale(initZoom, initZoom); 
      matrix.postTranslate(-1 * (c_w * initZoom - container_width)/2, 0); 
      matrix.invert(matrixInverse); 
     } else { 
      float initZoom = container_width/c_w; 
      //Log.d("zoomToFit", "adjust width with initZoom: "+initZoom); 
      matrix.postScale(initZoom, initZoom); 
      matrix.postTranslate(0, -1 * (c_h * initZoom - container_height)/2); 
      matrix.invert(matrixInverse); 
     } 
     initZoomApplied = true; 
     invalidate(); 
    } 

    @Override 
    protected void dispatchDraw(Canvas canvas) { 
     canvas.save(); 
     canvas.setMatrix(matrix); 
     super.dispatchDraw(canvas); 
     canvas.restore(); 
    } 

    @Override 
    public boolean onTouchEvent(MotionEvent event) { 
     // handle touch events here 
     mOnTouchEventWorkingArray[0] = event.getX(); 
     mOnTouchEventWorkingArray[1] = event.getY(); 

     mOnTouchEventWorkingArray = scaledPointsToScreenPoints(mOnTouchEventWorkingArray); 

     event.setLocation(mOnTouchEventWorkingArray[0], mOnTouchEventWorkingArray[1]); 

     switch (event.getAction() & MotionEvent.ACTION_MASK) { 
      case MotionEvent.ACTION_DOWN: 
       savedMatrix.set(matrix); 
       start.set(event.getX(), event.getY()); 
       mode = DRAG; 
       lastEvent = null; 
       break; 
      case MotionEvent.ACTION_POINTER_DOWN: 
       oldDist = spacing(event); 
       if (oldDist > 10f) { 
        savedMatrix.set(matrix); 
        midPoint(mid, event); 
        mode = ZOOM; 
       } 
       lastEvent = new float[4]; 
       lastEvent[0] = event.getX(0); 
       lastEvent[1] = event.getX(1); 
       lastEvent[2] = event.getY(0); 
       lastEvent[3] = event.getY(1); 
       //d = rotation(event); 
       break; 
      case MotionEvent.ACTION_UP: 
      case MotionEvent.ACTION_POINTER_UP: 
       mode = NONE; 
       lastEvent = null; 
       break; 
      case MotionEvent.ACTION_MOVE: 
       if (mode == DRAG) { 
        matrix.set(savedMatrix); 
        float dx = event.getX() - start.x; 
        float dy = event.getY() - start.y; 
        matrix.postTranslate(dx, dy); 
        matrix.invert(matrixInverse); 
       } 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); 
         matrix.invert(matrixInverse); 
        } 
       } 
       break; 
     } 

     invalidate(); 
     return true; 
    } 

} 

activity_main.xml:

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    tools:context=".MainActivity"> 

    <com.zoomcontroldemo.ZoomableViewGroup 
     android:id="@+id/zoomControl" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     tools:context=".MainActivity"> 

     <FrameLayout 
      android:id="@+id/frameLayoutParent" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent"> 

      <ImageView 
       android:id="@+id/imageView" 
       android:layout_width="match_parent" 
       android:layout_height="match_parent" 
       android:scaleType="center" /> 
     </FrameLayout> 
    </com.zoomcontroldemo.ZoomableViewGroup> 


</RelativeLayout> 

MainActivity.java:

public class MainActivity extends Activity { 

    private FrameLayout frameLayoutParent; 
    private ImageView imageView; 

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

     frameLayoutParent = (FrameLayout)findViewById(R.id.frameLayoutParent); 
     imageView = (ImageView) findViewById(R.id.imageView); 
     Bitmap originalBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.desert); 
     imageView.setImageBitmap(originalBitmap); 

     createAndAddLocator(50, 50, 100, 100); 
     createAndAddLocator(50, 50, 200, 200); 
     createAndAddLocator(50, 50, 300, 300); 
    } 

    private void createAndAddLocator(int width, int height, int x, int y){ 
     ImageView imageView = new ImageView(MainActivity.this); 
     imageView.setImageDrawable(getResources().getDrawable(R.drawable.ic_launcher)); 
     FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(width, height); 
     params.leftMargin = x; 
     params.topMargin = y; 
     frameLayoutParent.addView(imageView, params); 
    } 
} 

Hope this Sie helfen würde.