使用 Android 内置的手势监听器和缩放监听器实现捏缩放和拖动

Posted 2023-03-04

【中文标题】使用 Android 内置的手势监听器和缩放监听器实现捏缩放和拖动

【英文标题】：Implementing pinch zoom and drag using Android's build in gesture listener and scale listener

【发布时间】：2013-10-25 11:31:26

【问题描述】：

我正在尝试使用 android 的手势监听器和缩放监听器来实现捏缩放和拖动。问题是当我执行捏缩放时，图像（我正在尝试缩放）反弹到特定位置。变焦位置也不居中。 以下代码演示了我想要实现的目标。知道图像为什么会跳动（以及如何纠正它）吗？

public class CustomView extends View 
    Bitmap image;
    int screenHeight;
    int screenWidth;
    Paint paint;
    GestureDetector gestures;
    ScaleGestureDetector scaleGesture;
    float scale = 1.0f;
    float horizontalOffset, verticalOffset;

    int NORMAL = 0;
    int ZOOM = 1;
    int DRAG = 2;
    boolean isScaling = false;
    float touchX, touchY;
        int mode = NORMAL;

    public CustomView(Context context) 
    super(context);
            //initializing variables
    image = BitmapFactory.decodeResource(getResources(),
            R.drawable.image_name);
            //This is a full screen view
    screenWidth = getResources().getDisplayMetrics().widthPixels;
    screenHeight = getResources().getDisplayMetrics().heightPixels;
    paint = new Paint();
    paint.setAntiAlias(true);
    paint.setFilterBitmap(true);
    paint.setDither(true);
    paint.setColor(Color.WHITE);

    scaleGesture = new ScaleGestureDetector(getContext(),
            new ScaleListener());
    gestures = new GestureDetector(getContext(), new GestureListener());
    mode = NORMAL;
    initialize();


//Best fit image display on canvas 
    private void initialize() 
    float imgPartRatio = image.getWidth() / (float) image.getHeight();
    float screenRatio = (float) screenWidth / (float) screenHeight;

    if (screenRatio > imgPartRatio) 
        scale = ((float) screenHeight) / (float) (image.getHeight()); // fit height
        horizontalOffset = ((float) screenWidth - scale
                * (float) (image.getWidth())) / 2.0f;
        verticalOffset = 0;
     else 
        scale = ((float) screenWidth) / (float) (image.getWidth()); // fit width
        horizontalOffset = 0;
        verticalOffset = ((float) screenHeight - scale
                * (float) (image.getHeight())) / 2.0f;
    
        invalidate();


@Override
protected void onDraw(Canvas canvas) 
    canvas.save();
    canvas.drawColor(0, Mode.CLEAR);
    canvas.drawColor(Color.WHITE);
    if(mode == DRAG || mode == NORMAL) 
        //This works perfectly as expected
        canvas.translate(horizontalOffset, verticalOffset);
        canvas.scale(scale, scale);
        canvas.drawBitmap(image, getMatrix(), paint);
    
    else if (mode == ZOOM) 
        //PROBLEM AREA - when applying pinch zoom,
        //the image jumps to a position abruptly
        canvas.scale(scale, scale, touchX, touchY);
        canvas.drawBitmap(image, getMatrix(), paint);
    
    canvas.restore();


public class ScaleListener implements OnScaleGestureListener 
    @Override
    public boolean onScale(ScaleGestureDetector detector) 
        float scaleFactorNew = detector.getScaleFactor();
        if (detector.isInProgress()) 
            touchX = detector.getFocusX();
            touchY = detector.getFocusY();
            scale *= scaleFactorNew;
            invalidate(0, 0, screenWidth, screenHeight);
        
        return true;
    

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

    @Override
    public void onScaleEnd(ScaleGestureDetector detector) 
        mode = NORMAL;
        isScaling = false;
    



public class GestureListener implements GestureDetector.OnGestureListener,
        GestureDetector.OnDoubleTapListener 

    @Override
    public boolean onDown(MotionEvent e) 
        isScaling = false;
        return true;
    

    @Override
    public boolean onScroll(MotionEvent e1, MotionEvent e2,
            float distanceX, float distanceY) 
        if (!isScaling) 
            mode = DRAG;
            isScaling = false;
            horizontalOffset -= distanceX;
            verticalOffset -= distanceY;
            invalidate(0, 0, screenWidth, screenHeight);
         else 
            mode = ZOOM;
            isScaling = true;
        
        return true;
    


@Override
public boolean onTouchEvent(MotionEvent event) 
    scaleGesture.onTouchEvent(event);
    gestures.onTouchEvent(event);
    return true;

提前致谢。

【问题讨论】：

如果您在使用 ZOOM 模式之前不使用 DRAG 模式 - 也就是说，ZOOM 是您在应用任何翻译之前所做的第一件事，图像还会跳转吗？

是的，图像仍然会跳动。

即使在缩放时也不应该应用水平/垂直偏移吗？您是否尝试在缩放时应用这些？

@GilMoshayof - 在缩放期间也应该应用水平和垂直缩放。但这没有任何区别 - 图像仍然跳跃。看来我需要摆弄缩放枢轴点。这里也提出了一个类似的问题（尽管实现更简洁）：***.com/questions/19471356/… 根据这个问题中提供的答案，我们需要调整缩放的枢轴。我仍然徒劳地摸索着正确计算枢轴坐标。

尝试在 onScaleBegin 中设置 touchX / touchY 怎么样？这有什么改变吗？

【参考方案1】：

我已经实现了这种行为，并且我使用了一个矩阵来处理所有的缩放和滚动（在我的例子中，还有旋转）。它可以生成简洁的代码，并且像发条一样工作。

将矩阵存储为类成员：

Matrix drawMatrix;

编辑：存储旧焦点，用于在缩放期间获得焦点转移。

float lastFocusX;
float lastFocusY;

编辑：在 onScaleBegin 中设置 lastFocus 变量

@Override
public boolean onScaleBegin(ScaleGestureDetector detector) 
    lastFocusX = detector.getFocusX();
    lastFocusY = detector.getFocusY();
    return true;

替换你的onScale：

@Override
public boolean onScale(ScaleGestureDetector detector) 
    Matrix transformationMatrix = new Matrix();
    float focusX = detector.getFocusX();
    float focusY = detector.getFocusY();

    //Zoom focus is where the fingers are centered, 
    transformationMatrix.postTranslate(-focusX, -focusY);

    transformationMatrix.postScale(detector.getScaleFactor(), detector.getScaleFactor());

/* Adding focus shift to allow for scrolling with two pointers down. Remove it to skip this functionality. This could be done in fewer lines, but for clarity I do it this way here */
    //Edited after comment by chochim
    float focusShiftX = focusX - lastFocusX;
    float focusShiftY = focusY - lastFocusY;
    transformationMatrix.postTranslate(focusX + focusShiftX, focusY + focusShiftY);
    drawMatrix.postConcat(transformationMatrix);
    lastFocusX = focusX;
    lastFocusY = focusY;
    invalidate();
    return true;

在 onScroll 中类似：

@Override
public boolean onScroll(MotionEvent downEvent, MotionEvent currentEvent,
            float distanceX, float distanceY) 
    drawMatrix.postTranslate(-distanceX, -distanceY);
    invalidate();
    return true;

在 onDraw;用你的 drawMatrix 绘图：

canvas.drawBitmap(image, drawMatrix, paint);

编码愉快！

【讨论】：

清晰、优雅的解决方案。什么是detector.getFocusShiftX()？

啊，对不起。当我实现这个时，我制作了自己的手势检测器来获取旋转信息。 getFocusShift 是一种实用方法，在 ScaleGestureDetector 中显然不可用。为了完整性，我将编辑我的答案

如果您已经在 onScroll 中翻译矩阵，则不需要使用 focusShift。为了正确的工作更改 transformationMatrix.postTranslate(focusX + focusShiftX), focusY + focusShiftY); 到 transformationMatrix.postTranslate(focusX, focusY);

@DavidNovák：如果手势被识别为缩放，您将不会获得相同手势的滚动更新，我的代码允许用户在缩放事件期间滚动。如果您不想要这种行为，那么请务必按照自己的方式去做。