2015-12-09 2 views
0

Я работаю с холстом, беря изображение в качестве фона и пытаюсь реализовать функцию масштабирования. Я хочу увеличить масштаб в точке, где пальцы зажаты и уменьшены, будет работать через центральные координаты, как и функция галереи изображений. Я прошел через множество учебников и прочитал много потоков об этом. Независимо от того, что я реализовал до сих пор, я либо поддерживаю увеличение и уменьшение масштаба в той же точке, либо если я применяю его к изображению, то все, что я рисую на холсте, не увеличивается, только фоновое изображение масштабируется и исчезает.Реализация увеличения на холсте

@Override 
protected void onDraw(Canvas canvas) { 
    super.onDraw(canvas); 
    onDrawReady = true; 

    // for eraser 
    canvas.saveLayerAlpha(0, 0, canvas.getWidth(), canvas.getHeight(), 0xff, Canvas.HAS_ALPHA_LAYER_SAVE_FLAG); 

    imageRenderedAtLeastOnce = true; 

    if (delayedZoomVariables != null) { 
     setZoom(delayedZoomVariables.scale, delayedZoomVariables.focusX, 
       delayedZoomVariables.focusY, delayedZoomVariables.scaleType); 
     delayedZoomVariables = null; 
    } 

    canvas.concat(matrix);  

    for (DrawObject d : paths) { 
     if (d.getType() == MODE_DRAWING) { 
      canvas.drawPath(d.getPair().first, d.getPair().second); 
     } else if (d.getType() == MODE_TEXT) { 
      canvas.drawText(d.getText(), d.getX(), d.getY(), 
        d.getPair().second); 
     } else if (d.getType() == MODE_ARROW) { 
      canvas.drawLine(d.getStartX(), d.getStartY(), d.getX(), 
        d.getY(), d.getPair().second); 
      fillArrow(canvas, d.getStartX(), d.getStartY(), d.getX(), 
        d.getY(), d.getPair().second); 
     } else if (d.getType() == MODE_CIRCLE) { 
      RectF oval2 = new RectF(d.getStartX(), d.getStartY(), d.getX(), 
        d.getY()); 
      canvas.drawOval(oval2, d.getPair().second); 
     } else if (d.getType() == MODE_RECTANGLE) { 
      canvas.drawRect(d.getStartX(), d.getStartY(), d.getX(), 
        d.getY(), d.getPair().second); 
     } else if (d.getType() == MODE_ERASE) { 
      canvas.drawPath(d.getPair().first, d.getPair().second); 
     } 
    } 
    canvas.save(); 
} 

This is the Issue

+0

доли того, что вы пытались до сих пор – AnswerDroid

+0

[TouchImageView Library] (https://github.com/MikeOrtiz/TouchImageView) Это одна вещь, которую я нашел и играл вокруг нее. – Shubham

+0

вы должны прочитать больше на 'Canvas # saveLayerAlpha' и' Canvas # save' – pskink

ответ

1

Я не знаю, как вы его реализации, но следующий код работает так, как вы имеете в виду:

ZoomActivity:

public class ZoomActivity extends Activity { 
    Context context; 
    @Override 
    protected void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 

     setContentView(R.layout.zoom_view); 
     ZoomableImageView mIV = (ZoomableImageView)findViewById(R.id.image_view); 
     context = this; 
     Bitmap bm = BitmapFactory.decodeResource(getResources(), R.drawable.background); 
     mIV.setImageBitmap(bm); 

    } 
} 

zoom_view.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" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 

    <android.se.test.ZoomableImageView 
     android:id="@+id/image_view" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent"/> 
</RelativeLayout> 

ZoomableImageView:

public class ZoomableImageView extends ImageView { 
    Matrix matrix = new Matrix(); 

    static final int NONE = 0; 
    static final int DRAG = 1; 
    static final int ZOOM = 2; 
    static final int CLICK = 3; 
    int mode = NONE; 

    PointF last = new PointF(); 
    PointF start = new PointF(); 
    float minScale = 1f; 
    float maxScale = 4f; 
    float[] m; 

    float redundantXSpace, redundantYSpace; 
    float width, height; 
    float saveScale = 1f; 
    float right, bottom, origWidth, origHeight, bmWidth, bmHeight; 

    ScaleGestureDetector mScaleDetector; 
    Context context; 


    public ZoomableImageView(Context context, AttributeSet attr) { 
//  super(context, attr); 
     super(context, attr); 
     super.setClickable(true); 
     this.context = context; 
     mScaleDetector = new ScaleGestureDetector(context, new ScaleListener()); 
     matrix.setTranslate(1f, 1f); 
     m = new float[9]; 
     setImageMatrix(matrix); 
     setScaleType(ScaleType.MATRIX); 

     setOnTouchListener(new OnTouchListener() { 

      @Override 
      public boolean onTouch(View v, MotionEvent event) { 
       mScaleDetector.onTouchEvent(event); 

       matrix.getValues(m); 
       float x = m[Matrix.MTRANS_X]; 
       float y = m[Matrix.MTRANS_Y]; 
       PointF curr = new PointF(event.getX(), event.getY()); 

       switch (event.getAction()) { 
        //when one finger is touching 
        //set the mode to DRAG 
        case MotionEvent.ACTION_DOWN: 
         last.set(event.getX(), event.getY()); 
         start.set(last); 
         mode = DRAG; 
         break; 
        //when two fingers are touching 
        //set the mode to ZOOM 
        case MotionEvent.ACTION_POINTER_DOWN: 
         last.set(event.getX(), event.getY()); 
         start.set(last); 
         mode = ZOOM; 
         break; 
        //when a finger moves 
        //If mode is applicable move image 
        case MotionEvent.ACTION_MOVE: 
         //if the mode is ZOOM or 
         //if the mode is DRAG and already zoomed 
         if (mode == ZOOM || (mode == DRAG && saveScale > minScale)) { 
          float deltaX = curr.x - last.x;// x difference 
          float deltaY = curr.y - last.y;// y difference 
          float scaleWidth = Math.round(origWidth * saveScale);// width after applying current scale 
          float scaleHeight = Math.round(origHeight * saveScale);// height after applying current scale 
          //if scaleWidth is smaller than the views width 
          //in other words if the image width fits in the view 
          //limit left and right movement 
          if (scaleWidth < width) { 
           deltaX = 0; 
           if (y + deltaY > 0) 
            deltaY = -y; 
           else if (y + deltaY < -bottom) 
            deltaY = -(y + bottom); 
          } 
          //if scaleHeight is smaller than the views height 
          //in other words if the image height fits in the view 
          //limit up and down movement 
          else if (scaleHeight < height) { 
           deltaY = 0; 
           if (x + deltaX > 0) 
            deltaX = -x; 
           else if (x + deltaX < -right) 
            deltaX = -(x + right); 
          } 
          //if the image doesnt fit in the width or height 
          //limit both up and down and left and right 
          else { 
           if (x + deltaX > 0) 
            deltaX = -x; 
           else if (x + deltaX < -right) 
            deltaX = -(x + right); 

           if (y + deltaY > 0) 
            deltaY = -y; 
           else if (y + deltaY < -bottom) 
            deltaY = -(y + bottom); 
          } 
          //move the image with the matrix 
          matrix.postTranslate(deltaX, deltaY); 
          //set the last touch location to the current 
          last.set(curr.x, curr.y); 
         } 
         break; 
        //first finger is lifted 
        case MotionEvent.ACTION_UP: 
         mode = NONE; 
         int xDiff = (int) Math.abs(curr.x - start.x); 
         int yDiff = (int) Math.abs(curr.y - start.y); 
         if (xDiff < CLICK && yDiff < CLICK) 
          performClick(); 
         break; 
        // second finger is lifted 
        case MotionEvent.ACTION_POINTER_UP: 
         mode = NONE; 
         break; 
       } 
       setImageMatrix(matrix); 
       invalidate(); 
       return true; 
      } 

     }); 
    } 

    @Override 
    public void setImageBitmap(Bitmap bm) { 
     super.setImageBitmap(bm); 
     bmWidth = bm.getWidth(); 
     bmHeight = bm.getHeight(); 
    } 

    public void setMaxZoom(float x) { 
     maxScale = x; 
    } 

    private class ScaleListener extends ScaleGestureDetector.SimpleOnScaleGestureListener { 

     @Override 
     public boolean onScaleBegin(ScaleGestureDetector detector) { 
      mode = ZOOM; 
      return true; 
     } 

     @Override 
     public boolean onScale(ScaleGestureDetector detector) { 
      float mScaleFactor = detector.getScaleFactor(); 
      float origScale = saveScale; 
      saveScale *= mScaleFactor; 
      if (saveScale > maxScale) { 
       saveScale = maxScale; 
       mScaleFactor = maxScale/origScale; 
      } else if (saveScale < minScale) { 
       saveScale = minScale; 
       mScaleFactor = minScale/origScale; 
      } 
      right = width * saveScale - width - (2 * redundantXSpace * saveScale); 
      bottom = height * saveScale - height - (2 * redundantYSpace * saveScale); 
      if (origWidth * saveScale <= width || origHeight * saveScale <= height) { 
       matrix.postScale(mScaleFactor, mScaleFactor, width/2, height/2); 
       if (mScaleFactor < 1) { 
        matrix.getValues(m); 
        float x = m[Matrix.MTRANS_X]; 
        float y = m[Matrix.MTRANS_Y]; 
        if (mScaleFactor < 1) { 
         if (Math.round(origWidth * saveScale) < width) { 
          if (y < -bottom) 
           matrix.postTranslate(0, -(y + bottom)); 
          else if (y > 0) 
           matrix.postTranslate(0, -y); 
         } else { 
          if (x < -right) 
           matrix.postTranslate(-(x + right), 0); 
          else if (x > 0) 
           matrix.postTranslate(-x, 0); 
         } 
        } 
       } 
      } else { 
       matrix.postScale(mScaleFactor, mScaleFactor, detector.getFocusX(), detector.getFocusY()); 
       matrix.getValues(m); 
       float x = m[Matrix.MTRANS_X]; 
       float y = m[Matrix.MTRANS_Y]; 
       if (mScaleFactor < 1) { 
        if (x < -right) 
         matrix.postTranslate(-(x + right), 0); 
        else if (x > 0) 
         matrix.postTranslate(-x, 0); 
        if (y < -bottom) 
         matrix.postTranslate(0, -(y + bottom)); 
        else if (y > 0) 
         matrix.postTranslate(0, -y); 
       } 
      } 
      return true; 
     } 
    } 

    @Override 
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { 
     super.onMeasure(widthMeasureSpec, heightMeasureSpec); 
     width = MeasureSpec.getSize(widthMeasureSpec); 
     height = MeasureSpec.getSize(heightMeasureSpec); 
     //Fit to screen. 
     float scale; 
     float scaleX = width/bmWidth; 
     float scaleY = height/bmHeight; 
     scale = Math.min(scaleX, scaleY); 
     matrix.setScale(scale, scale); 
     setImageMatrix(matrix); 
     saveScale = 1f; 

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

     matrix.postTranslate(redundantXSpace, redundantYSpace); 

     origWidth = width - 2 * redundantXSpace; 
     origHeight = height - 2 * redundantYSpace; 
     right = width * saveScale - width - (2 * redundantXSpace * saveScale); 
     bottom = height * saveScale - height - (2 * redundantYSpace * saveScale); 
     setImageMatrix(matrix); 
    } 
} 

Надеется, что это помогает

+0

Эй, приятель, спасибо за быстрый ответ. Я пытаюсь реализовать одно и то же для canvas не для изображения. Этот я уже пробовал. – Shubham

+0

@Shubham, так что если у вас есть «Матрица», то присоедините ее к «Canvas» – pskink

+0

@Shubham, так какой у вас код? – pskink

Смежные вопросы