如何从双指缩放的中心点放大列表项

Question

我正在为安卓开发一款简单的书籍阅读器应用程序。为此，我使用了listview。

我的做法是将来自服务器的远程图片加载到我的Listview中（使用picasso库），并且运行良好。

我还想在我的阅读器中实现缩放功能，所以我使用了ZoomListView类来实现这一点。

public class ZoomListView extends ListView {
private static final int INVALID_POINTER_ID = -1;
private int mActivePointerId = INVALID_POINTER_ID;
private ScaleGestureDetector mScaleDetector;

private float mScaleFactor = 1.f;
private float maxWidth = 0.0f;
private float maxHeight = 0.0f;
private float mLastTouchX;
private float mLastTouchY;
private float mPosX;
private float mPosY;
private float width;
private float height;

public ZoomListView(Context context) {
    super(context);
    mScaleDetector = new ScaleGestureDetector(getContext(),
            new ScaleListener());
}

public ZoomListView(Context context, AttributeSet attrs) {
    super(context, attrs);
    mScaleDetector = new ScaleGestureDetector(getContext(),
            new ScaleListener());
}

public ZoomListView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    mScaleDetector = new ScaleGestureDetector(getContext(),
            new ScaleListener());
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    width = MeasureSpec.getSize(widthMeasureSpec);
    height = MeasureSpec.getSize(heightMeasureSpec);
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}

@Override
public boolean onTouchEvent(@NonNull MotionEvent ev) {
    super.onTouchEvent(ev);
    final int action = ev.getAction();
    mScaleDetector.onTouchEvent(ev);
    switch (action & MotionEvent.ACTION_MASK) {
    case MotionEvent.ACTION_DOWN: {
        final float x = ev.getX();
        final float y = ev.getY();

        mLastTouchX = x;
        mLastTouchY = y;

        mActivePointerId = ev.getPointerId(0);
        break;
    }

    case MotionEvent.ACTION_MOVE: {
        final int pointerIndex = ev.findPointerIndex(mActivePointerId);
        final float x = ev.getX(pointerIndex);
        final float y = ev.getY(pointerIndex);
        final float dx = x - mLastTouchX;
        final float dy = y - mLastTouchY;

        mPosX += dx;
        mPosY += dy;

        if (mPosX > 0.0f)
            mPosX = 0.0f;
        else if (mPosX < maxWidth)
            mPosX = maxWidth;

        if (mPosY > 0.0f)
            mPosY = 0.0f;
        else if (mPosY < maxHeight)
            mPosY = maxHeight;

        mLastTouchX = x;
        mLastTouchY = y;

        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 = (action & MotionEvent.ACTION_POINTER_INDEX_MASK) >> MotionEvent.ACTION_POINTER_INDEX_SHIFT;
        final int pointerId = ev.getPointerId(pointerIndex);
        if (pointerId == mActivePointerId) {
            final int newPointerIndex = pointerIndex == 0 ? 1 : 0;
            mLastTouchX = ev.getX(newPointerIndex);
            mLastTouchY = ev.getY(newPointerIndex);
            mActivePointerId = ev.getPointerId(newPointerIndex);
        }
        break;
    }
    }

    return true;
}

@Override
public void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    canvas.save(Canvas.MATRIX_SAVE_FLAG);
    canvas.translate(mPosX, mPosY);
    canvas.scale(mScaleFactor, mScaleFactor);
    canvas.restore();
}

@Override
protected void dispatchDraw(@NonNull Canvas canvas) {
    canvas.save(Canvas.MATRIX_SAVE_FLAG);
    if (mScaleFactor == 1.0f) {
        mPosX = 0.0f;
        mPosY = 0.0f;
    }
    canvas.translate(mPosX, mPosY);
    canvas.scale(mScaleFactor, mScaleFactor);
    super.dispatchDraw(canvas);
    canvas.restore();
    invalidate();
}

private class ScaleListener extends
        ScaleGestureDetector.SimpleOnScaleGestureListener {
    @Override
    public boolean onScale(ScaleGestureDetector detector) {
        mScaleFactor *= detector.getScaleFactor();
        mScaleFactor = Math.max(1.0f, Math.min(mScaleFactor, 4.0f));
        maxWidth = width - (width * mScaleFactor);
        maxHeight = height - (height * mScaleFactor);
        invalidate();
        return true;
    }
}

}

这是我的XML布局（我仅展示了ZoomListView部分）：

<?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" >

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff"
    android:gravity="top"
    android:visibility="visible" >

    <libraries.ZoomListView
        android:id="@+id/lstv_book_reader"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="0dp"
        android:paddingTop="0dp" >
    </libraries.ZoomListView>
</RelativeLayout>
</RelativeLayout>

这使我能够放大我的书籍阅读器。我的书籍阅读器长这样：

问题：我在捏合缩放时遇到了问题。当我捏合缩放时，缩放从列表视图的左上角开始。

让我用图片来描述：

1 捏合

2 当前输出

注意：这将从左上角缩放列表视图

3 推荐的输出

- Qadir Hussain

---

跟随该教程 http://android-er.blogspot.com/2011/11/implement-pinch-zoom-in-ontouchlistener.html - Engr Waseem Arain

你能证明这些语句的正确性吗：if (mPosX > 0.0f) mPosX = 0.0f; else if (mPosX < maxWidth) mPosX = maxWidth;？难道不应该是这样的: if (mPosX < 0.0f) mPosX = 0.0f; else if (mPosX > maxWidth) mPosX = maxWidth;。我对你针对 mPosY 的边界检查条件也有类似的担忧。 - Vikram

@Vikram，我按照你上面的建议进行了更改，但我的问题仍然存在。 - Qadir Hussain

@所有人：如何在触摸点处进行缩放？ - abcd1234

Answer 1

第一种方法：

要从列表中心缩放，通过调用detector.getFocusX();和detector.getFocusY();获取缩放中心。现在在您的缩放逻辑中使用此中心。

更改您的onScale()实现，类似于以下内容：

    mPosX = detector.getFocusX();
    mPosY = detector.getFocusY();

第二种方法（我目前在使用）：

• 将您的视图放入滚动视图中。
• 调整视图大小。
• 计算中心移动了多少。（在调整大小之前和之后，取检测器.getFocusX()和检测器.getFocusY()的差异）
• 使用parent.scrollBy(dx,dy)重新将视图居中。

如果有帮助-这是我的居中代码的一部分。

    if (isZoomOnGoing && mPreviousWidth != 0 && Math.abs(mCenterDiff) > 0) {
            float ratioBeforeAdjustment = mCurrentZoomFocus / (float) (mTotalWidth - mCurrentZoomFocus);//
            float ratioDiff = reducePrecision(mStartZoomRatio) - reducePrecision(ratioBeforeAdjustment);
            float x1 = mStartZoomRatio * mTotalWidth / (1.0f + mStartZoomRatio);
            float y1 = mTotalWidth - x1;
            float currentRatio = x1 / y1;//
            int currentScrollBy = (int) (x1 - mCurrentZoomFocus);
            int scrollDiff = 0;
            if (mPreviousScrollBy != 0 && Math.abs(ratioDiff) > 1) {
                scrollDiff = currentScrollBy - mPreviousScrollBy;
            }
            //    if (scrollDiff>5) {//To avoid flickering//TODO do we need this
            parent.scrollBy(currentScrollBy, 0);
//            } else {
//                Log.d(TAG, "drawActualGraph skipping scroll because scrollDiff <5 ");
//            }
            mPreviousScrollBy = currentScrollBy;

- rupesh jain

Answer 2

尝试使用getPivotX()和getPivotY()。默认情况下它们是0，0，这就是为什么它从左上角开始缩放的原因。
尝试从被触摸的位置获取支点，并将您的
canvas.scale(...) 更改为
canvas.scale(mScaleFactor, mScaleFactor, pivotx, pivoty);

- Martin Stanimirov

Answer 3

这意味着您希望更改默认属性，即缩放始终从（0,0）开始的属性：

_____________
|0,0 x       |
|y           |
|            |   Suppose this the device screen
|            |
|            |
______________

并且您希望将其从以下比例进行缩放：

_____________
|            |
|            |
|            |   Suppose this the device screen
|          y |
|       X 0,0|
______________

为了实现这个目标： 将您的代码从以下内容更改：

canvas.scale(mScaleFactor, mScaleFactor);

转换为：

canvas.scale(mScaleFactor, -mScaleFactor);

还可以参考与您的问题相关的这个问题： Android: Drawing to canvas, way to make bottom left correspond to (0,0)? 我已经在这个示例和代码片段中找到了解决方案。

- Hamad

---

请再次阅读测验。我不想按照您的答案建议，而是需要从捏合手势的中心缩放列表项，但它总是从项目的左上角缩放。 - Qadir Hussain