时间戳

首页 > 解决方案 > 更新承载可绘制对象的 onTouchEvent ImageView 类中的缩放参数

android - 更新承载可绘制对象的 onTouchEvent ImageView 类中的缩放参数

问题描述

我能够使用由 StackOverflow 用户之一创建的类来满足我的需要。该类工作正常，但不包括滚动（垂直，水平）。我通过在 MotionEvent.Action_Up 下包含代码来修改以下类，它现在提供水平和垂直滚动。我遇到的主要问题是 ZOOM 模式。

如果您仔细观察，缩放模式发生在MotionEvent.ACTION_POINTER_DOWN 上：逻辑是它计算两个手指之间的距离并在 midpoint 方法上计算出它们之间的中点。缩放的中心必须是这个中点。MotionEvent.ACTION_POINTER_DOWN 下的代码负责保存和缩放矩阵。

这个类是一个 ImageView，它承载了一个可绘制的图形。该图绘制得很好，并且现在启用了水平和垂直滚动，但是缩放会导致问题：当可绘制对象加载并且我尝试缩放时它工作正常，但如果我尝试滚动之后，可绘制对象会在视图中丢失。同样，当我先滚动然后缩放时，drawable 很快就会在视图中丢失。似乎矩阵改变了 ImageView 坐标，因此中点不是我需要作为缩放原点的那个。

在可绘制类 onDraw() 中，我实现了以下逻辑：

canvas.save();

    GraphImage.translateX = GraphImage.translateX + MainActivity.keeper14;
    GraphImage.translateY = GraphImage.translateY + MainActivity.keeper15;

    canvas.translate(GraphImage.translateX, GraphImage.translateY);
    canvas.scale(GraphImage.main_scale, GraphImage.main_scale, MainActivity.middy.x , MainActivity.middy.y);

//do my draw calls here

MainActivity.keeper14 = GraphImage.translateX;
MainActivity.keeper15 = GraphImage.translateY;

canvas.restore();

如您所见，我使用 ImageView onTouch 方法中更新的值。我认为问题可能是矩阵与 canvas.scale() 和 canvas.translate() 调用不能很好地协调。

这是 ImageView 类。顺便问一下，这个类中矩阵的用途是什么。它仅适用于 ImageView 还是适用于它拥有的可绘制对象？此外，我为此视图使用了 scaleType = Matrix。

public class GraphImage extends android.support.v7.widget.AppCompatImageView {

Paint paint;
Context c;
int color;
Matrix matrix;
Matrix savedMatrix;
static final int NONE = 0;
static final int DRAG = 1;
static final int ZOOM = 2;
int mode = NONE;
static PointF start,mid;
float oldDist;
static float main_scale;
static float translateX,translateY;
String savedItemClicked;
String TAG = "Batman";
float mx , my, curX, curY;


public GraphImage(Context context, AttributeSet attrs) {
    super(context,attrs);
    //all the variables are init here
    setFocusable(true);

}


@Override
public boolean onTouchEvent(MotionEvent event) {

    dumpEvent(event);

    // Handle touch events here...
    switch (event.getAction() & MotionEvent.ACTION_MASK) {
        case MotionEvent.ACTION_DOWN:
            mx = event.getX();
            my = event.getY();
            savedMatrix.set(matrix);
            start.set(event.getX(), event.getY());
            Log.d(TAG, "mode=DRAG");
            mode = DRAG;
            break;
        case MotionEvent.ACTION_POINTER_DOWN:
            oldDist = spacing(event);
            Log.d(TAG, "oldDist=" + oldDist);
            if (oldDist > 10f) {
                savedMatrix.set(matrix);
                midPoint(MainActivity.middy, event);
                mode = ZOOM;
                Log.d(TAG, "mode=ZOOM");
            }
            break;
        case MotionEvent.ACTION_UP:
            curX = event.getX();
            curY = event.getY();
            matrix.set(savedMatrix);
            matrix.postTranslate(curX - mx, curY - my);
            translateX = curX - mx;//event.getX() - start.x;
            translateY = curY - my;//event.getY() - start.y;
            this.invalidateDrawable(this.getDrawable());
            break;
        case MotionEvent.ACTION_POINTER_UP:
            mode = NONE;
            Log.d(TAG, "mode=NONE");
            break;
        case MotionEvent.ACTION_MOVE:
            if (mode == DRAG) {                   

                // ...
                /*
                matrix.set(savedMatrix);
                matrix.postTranslate(event.getX() - start.x, event.getY()
                        - start.y);
                translateX = event.getX() - start.x;
                        translateY = event.getY() - start.y;
                                this.invalidateDrawable(this.getDrawable());
                                */

            } else
            if (mode == ZOOM) {
                float newDist = spacing(event);
                Log.d(TAG, "newDist=" + newDist);
                if (newDist > 10f) {
                    matrix.set(savedMatrix);
                    float scale = newDist / oldDist;
                    main_scale = scale;
                    matrix.postScale(scale, scale, MainActivity.middy.x, MainActivity.middy.y);
                    this.invalidateDrawable(this.getDrawable());
                }

            }

            break;

    }

    this.setImageMatrix(matrix);
    //invalidate();
    return true;
}

/** Determine the space between the first two fingers */
private float spacing(MotionEvent event) {
    float x = event.getX(0) - event.getX(1);// Math.abs(event.getX() - mx);//event.getX(0) - event.getX(1);
    float y = event.getY(0) - event.getY(1);//Math.abs(event.getY() - my);//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);//mx + event.getX();//event.getX(0) + event.getX(1);//
    float y = event.getY(0) + event.getY(1);//my + event.getY();//event.getY(0) + event.getY(1);
    point.set(x / 2, y / 2);
    MainActivity.middy = point;
}

private void dumpEvent(MotionEvent event) {
    String names[] = { "DOWN", "UP", "MOVE", "CANCEL", "OUTSIDE",
            "POINTER_DOWN", "POINTER_UP", "7?", "8?", "9?" };
    StringBuilder sb = new StringBuilder();
    int action = event.getAction();
    int actionCode = action & MotionEvent.ACTION_MASK;
    sb.append("event ACTION_").append(names[actionCode]);
    if (actionCode == MotionEvent.ACTION_POINTER_DOWN
            || actionCode == MotionEvent.ACTION_POINTER_UP) {
        sb.append("(pid ").append(
                action >> MotionEvent.ACTION_POINTER_ID_SHIFT);
        sb.append(")");
    }
    sb.append("[");
    for (int i = 0; i < event.getPointerCount(); i++) {
        sb.append("#").append(i);
        sb.append("(pid ").append(event.getPointerId(i));
        sb.append(")=").append((int) event.getX(i));
        sb.append(",").append((int) event.getY(i));
        if (i + 1 < event.getPointerCount())
            sb.append(";");
    }
    sb.append("]");
    Log.d(TAG, sb.toString());
}

}

感谢您的任何建议

标签： androidmatriximageviewdrawabletouch-event

解决方案

我在 MainActivity 类上添加了一些静态变量：translationXX、translationYY、drawing__scale。每当出现 ACTION_UP 时，我都会更新 translationXX 和 translationYY，如下所示：

translationXX = translationXX + (curX - mx); //Likewise for translationYY

协调可绘制对象失效时发生的更改：

canvas.translate(MainActivity.translationXX , MainActivity.translationYY);// inside onDraw of the drawable

同样，对于缩放：我没有将 MainActivity.middy 作为屏幕上表示缩放手势的手指放置的中点，而是返回到 GraphImage 类上定义的变量静态“mid”。当模式为 ZOOM 时，Mainactivity.middy 会保留分配给它的旧值。因此，变焦确实不是好事。在 GraphImage 类的方法中点内，我替换了以下行：

MainActivity.middy = point;

与行：

mid = point;

为了协调 GraphImage 内部发生的缩放变化，在我的可绘制类 onDraw 方法中，我缩放了画布，如下所示：

canvas.scale(MainActivity.drawing_scale, MainActivity.drawing_scale, GraphImage.mid.x,GraphImage.mid.y);//MainActivity.drawing_scale was updated when the mode was ZOOM inside the onTouch method of GraphImage

此外，在 ACTION_POINTER_UP: 内部，我必须使可绘制对象无效，因为如果没有这个，可绘制对象将在调用 ACTION_MOVE 时缩放，但是一旦手指停止触摸屏幕，它就会恢复到之前的非缩放状态。

在 ACTION_POINTER_UP 内：

MainActivity.middy = mid; //this line was called on ACTION_MOVE  when the mode = ZOOM

matrix.postScale(MainActivity.drawing_scale, MainActivity.drawing_scale,MainActivity.middy.x,MainActivity.middy.y)//middy was updated with the latest midpoint "mid" on a previous called to ZOOM inside ACTION_MOVE

在这一行之后，我们只需在可绘制对象上调用无效。此外，我在 onTouch() 中创建了一个名为 moveit = false 的布尔值。每当打开 ZOOM 模式时，moveit = true 每当调用 ACTION_UP 时，它才会执行转换可绘制对象所需的代码，仅当（！moveit）{//转换可绘制对象的代码} 此更改提供了一个可接受的缩放和滚动视图八方。我可能需要使用 GestureDetector 类的 onFling() 来让它感觉更真实，但效果很好。我避免了嵌套滚动（垂直和水平）。但是，我仍然想了解更多关于使用矩阵的细节。

推荐阅读