Странное поведение при перетаскивании холста

Question

Я создаю приложение, которое будет включать в него перетаскивание изображения (растровое изображение) на холст. Я хочу реализовать его, чтобы он работал и действует хорошо, может ли кто-нибудь дать мне руку? Вот код:

public boolean onTouchEvent(MotionEvent event) { 
    mScaleDetector.onTouchEvent(event); 

    final int action = event.getAction(); 

    switch (event.getAction()) { 
     case MotionEvent.ACTION_DOWN & MotionEvent.ACTION_MASK: { 
      final float xScale = event.getX(); 
      final float yScale = event.getY(); 

      mLastTouchX = xScale; 
      mLastTouchY = yScale; 
      mActivePointerId = event.getPointerId(0); 
      break; 
     } 

     case MotionEvent.ACTION_MOVE: { 
      final int pointerIndex = event.findPointerIndex(mActivePointerId); 
      final float xScale = event.getX(pointerIndex); 
      final float yScale = event.getY(pointerIndex); 
      if (!mScaleDetector.isInProgress()) { 
       final float dx = x - mLastTouchX; 
       final float dy = y - mLastTouchY; 
       mPosX += dx; 
       mPosY += dy; 

       invalidate(); 
      } 
      mLastTouchX = x; 
      mLastTouchY = y; 
      if (event.getX() < overlay.getHeight()) { 
       x = (int) event.getX(); 
      } 
      if (event.getY() < overlay.getWidth()) { 
       y = (int) event.getY(); 
      } 
      invalidate(); 


      break; 
     } 
     case MotionEvent.ACTION_UP: { 
      mActivePointerId = INVALID_POINTER_ID; 
      break; 
     } 

     case MotionEvent.ACTION_CANCEL: { 
      mActivePointerId = INVALID_POINTER_ID; 
      break; 
     } 

     case MotionEvent.ACTION_POINTER_UP: { 
      final int pointerIndex = (event.getAction() & MotionEvent.ACTION_POINTER_INDEX_MASK) 
        >> MotionEvent.ACTION_POINTER_INDEX_SHIFT; 
      final int pointerId = event.getPointerId(pointerIndex); 
      if (pointerId == mActivePointerId) { 
       // This was our active pointer going up. Choose a new 
       // active pointer and adjust accordingly. 
       final int newPointerIndex = pointerIndex == 0 ? 1 : 0; 
       mLastTouchX = event.getX(newPointerIndex); 
       mLastTouchY = event.getY(newPointerIndex); 
       mActivePointerId = event.getPointerId(newPointerIndex); 
      } 
      break; 
     } 
    } 

    return true; 
} 

void init(Context context) { 
    paint = new Paint(Paint.ANTI_ALIAS_FLAG); 
    paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN)); 
    serverResult = Bitmap.createBitmap(mask.getWidth(),mask.getHeight(), Bitmap.Config.ARGB_8888); 
    result = Bitmap.createBitmap(mask.getWidth(), mask.getHeight(), Bitmap.Config.ARGB_8888); 
    width = mask.getWidth(); 
    height = mask.getHeight(); 
    int overlayHeight = overlay.getHeight(); 
    int overlayWidth = overlay.getWidth(); 
    int imgHeight = originalImg.getHeight(); 
    int imgWidth = originalImg.getWidth(); 

    int heightFactor = imgHeight/overlayHeight; 
    int widthFactor = imgWidth/overlayWidth; 
    if (overlayHeight > imgHeight) { 
     heightFactor = overlayHeight/imgHeight; 
    } 
    if (overlayWidth > imgWidth) { 
     widthFactor = overlayWidth/imgWidth; 
    } 
    int newWidth; 
    int newHeight; 
    if (widthFactor != 0) { 
     newWidth = imgWidth/widthFactor; 
    } else { 
     newWidth = imgWidth/heightFactor; 
    } 
    if (heightFactor != 0) { 
     newHeight = imgHeight/widthFactor; 
    } else { 
     newHeight = imgHeight/heightFactor; 
    } 


    config = Bitmap.Config.ARGB_8888; 
    DST_IN = new PorterDuffXfermode(PorterDuff.Mode.DST_IN); 
    scaledImg = Bitmap.createScaledBitmap(originalImg, newWidth, newHeight, false); 
    scaledImgFilterd = Bitmap.createScaledBitmap(originalImg, newWidth, newHeight, false); 
    tempCanvas = new Canvas(result); 
    imageCanvas = new Canvas(result); 
    image = new GPUImage(context); 




} 

@Override 
public void onDraw(Canvas canvas) { 

    if (FILTER_APPLIED == 100) { 
    if (filter != null) { 
     image.setImage(scaledImg); 
     image.setFilter(filter); 
     scaledImgFilterd = image.getBitmapWithFilterApplied(); 
     FILTER_APPLIED = 0; 
    } 
    } 

    paint.setXfermode(DST_IN); 
    if(color == 0) { 
     imageCanvas.drawColor(Color.WHITE); 
    } else { 
     imageCanvas.drawColor(color); 

    } 
    imageCanvas.scale(mScaleFactor, mScaleFactor); 
    imageCanvas.drawBitmap(scaledImgFilterd, mLastTouchX, mLastTouchY, null); 
    tempCanvas.drawBitmap(mask, 0, 0, paint); 
    paint.setXfermode(null); 
    canvas.drawBitmap(result, 0, 0, null); 
    canvas.drawBitmap(overlay, 0, 0, null); 

} 

public void setColor(int color) { 
    this.color = color; 
    invalidate(); 
} 

public void setFilter(GPUImageFilter filter) { 
    this.filter = filter; 
    FILTER_APPLIED = 100; 
    invalidate(); 
} 


private class ScaleListener extends ScaleGestureDetector.SimpleOnScaleGestureListener { 
    @Override 
    public boolean onScale(ScaleGestureDetector detector) { 
     mScaleFactor *= detector.getScaleFactor(); 

     // Don't let the object get too small or too large. 
     mScaleFactor = Math.max(0.1f, Math.min(mScaleFactor, 10.0f)); 

     invalidate(); 
     return true; 
    } 
} 

Когда я перетащить его тащит в соответствии с верхним левым углом, и все это немного вялым, может кто-то может мне помочь, пожалуйста?

Answer 1

Я не могу понять, почему он будет вялым (ТБХ, это слишком много кода), но ниже приводится объяснение в верхнем левом углу тащит

Для того, чтобы противодействовать увлекая в верхнем левом углу, вам нужно добавить некоторые смещающие переменные в зависимости от того, где на клике вы нажали (коснулись).

Предположим, вы коснулись (touchX, touchY), вам нужно проверить, как далеко от верхнего левого угла вашего изображения.

1. Сначала необходимо объявить две новые переменные, например touchOffsetX и touchOffsetY.

2. Затем вы определяете свои новые переменные при касании экрана.

   touchOffsetX = touchX - image.x;

   touchOffsetY = touchY - image.y;

3. Теперь, когда вы перемещаете изображение, установить ее х- и у-координаты устанавливаются в соответствии с ниже

   image.x = touchX - touchOffsetX;

   image.y = touchY - touchOffsetX;

Вам, конечно же, необходимо изменить имена переменных для вашего кода.

Ниже приведен рабочий пример в холсте HTML5, чтобы подробнее объяснить эту идею.

var c = document.getElementById("canvas"); 
 
var ctx = c.getContext("2d"); 
 
c.width = 300; 
 
c.height = 200; 
 

 
var myRectangle = { 
 
    x: 50, 
 
    y: 130, 
 
    w: 100, 
 
    h: 50, 
 
    drag: false 
 
} 
 

 
var mouseX = 0; 
 
var mouseY = 0; 
 
var mouseOffset = {x: 0, y:0}; // How far from the rectangle corner are we clicking? 
 
var background = "#0099CC"; 
 

 
c.addEventListener("mousemove",mouseMove,false); 
 
c.addEventListener("mousedown",mouseDown,false); 
 
c.addEventListener("mouseup",mouseUp,false); 
 

 
//Getting the 
 
function getMouseCoordinates() { 
 
    event = event || window.event; 
 
    mouseX = event.pageX - c.offsetLeft, 
 
     mouseY = event.pageY - c.offsetTop; 
 
} 
 

 
//This is what should be done while moving the mouse 
 
function mouseMove(event) { 
 
    getMouseCoordinates(); 
 
    if (myRectangle.drag) { 
 
     myRectangle.x = mouseX-mouseOffset.x; 
 
     myRectangle.y = mouseY-mouseOffset.y; 
 
    } 
 
} 
 

 
// This is what should happen when mouse button is pressed down 
 
function mouseDown() { 
 
    if (mouseX > myRectangle.x && 
 
     mouseX < myRectangle.x+myRectangle.w && 
 
     mouseY > myRectangle.y && 
 
     mouseY < myRectangle.y + myRectangle.h) { 
 
     if (document.getElementById("offset").checked) { 
 
      mouseOffset.x = mouseX-myRectangle.x; 
 
      mouseOffset.y = mouseY-myRectangle.y; 
 
     } 
 
     else { 
 
      mouseOffset.x = 0; 
 
      mouseOffset.y = 0; 
 
     } 
 
     
 
     myRectangle.drag = true; 
 
     background = "#66FF99"; 
 
    } 
 
} 
 

 
// This is what should happen when mouse button is released back up 
 
function mouseUp() { 
 
    myRectangle.drag = false; 
 
    background = "#0099CC"; 
 
} 
 

 
function draw() { 
 
    // Clear the canvas before painting. 
 
    ctx.fillStyle="#F0F0F0"; 
 
    ctx.fillRect(0,0,c.width,c.height); 
 
    
 
    //Drawing the rectangle 
 
    ctx.fillStyle=background; 
 
    ctx.fillRect(myRectangle.x,myRectangle.y,myRectangle.w,myRectangle.h); 
 
    ctx.strokeRect(myRectangle.x,myRectangle.y,myRectangle.w,myRectangle.h); 
 
    
 
    // Loop the drawing 
 
    requestAnimationFrame(draw); 
 
} 
 

 
draw(); //we need to initiate the drawing to start it.

<canvas id="canvas"></canvas><br /> 
 
<input type="checkbox" id="offset">Check to use offset values.