Android中的多点触控画布旋转

3
我是Android开发的新手,正在尝试掌握多点触控输入。我开始使用一个简单的应用程序,允许用户通过拖动和释放一个手指在画布上创建矩形,这一部分已经实现了。为了扩展功能,我想让用户能够使用第二个手指旋转他们正在绘制的矩形,这时我的问题开始了。目前的情况是,添加第二个手指会导致多个矩形旋转,而不仅仅是当前的矩形。但是它们将在第二个手指释放时恢复到默认方向。
我已经花了一段时间来研究它,我认为我的核心问题是我对来自两个(或更多)手指的多个MotionEvents处理不当。我留下的显示每个事件在屏幕上坐标的日志语句仍然与触摸屏幕的第一个手指绑定,而不是切换到第二个手指。我已经尝试了多种访问和更改事件指针ID的配置,但仍然没有运气。如果有人能提供一些指导意见,我将非常感激。
我的代码如下:
public class BoxDrawingView extends View {

    private static final String TAG = "BoxDrawingView";
    private static final int INVALID_POINTER_ID = -1;

    private int mActivePointerId = INVALID_POINTER_ID;
    private Box mCurrentBox;
    private List<Box> mBoxen = new ArrayList<>();
    private Float mLastTouchX;
    private Float mLastTouchY;

    ...

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch(MotionEventCompat.getActionMasked(event)) {
            case MotionEvent.ACTION_DOWN:
                mActivePointerId = MotionEventCompat.getPointerId(event, 0);
                current = new PointF(MotionEventCompat.getX(event, mActivePointerId),
                    MotionEventCompat.getY(event, mActivePointerId));
                action = "ACTION_DOWN";

                // Reset drawing state
                mCurrentBox = new Box(current);
                mBoxen.add(mCurrentBox);

                mLastTouchX = MotionEventCompat.getX(event, MotionEventCompat.getPointerId(event, 0));
                mLastTouchY = MotionEventCompat.getY(event, MotionEventCompat.getPointerId(event, 0));
                break;

            case MotionEvent.ACTION_POINTER_DOWN:
                action = "ACTION_POINTER_DOWN";
                mActivePointerId = MotionEventCompat.getPointerId(event, 0);

                mLastTouchX = MotionEventCompat.getX(event, MotionEventCompat.getPointerId(event, 0));
                mLastTouchY = MotionEventCompat.getY(event, MotionEventCompat.getPointerId(event, 0));
                break;

            case MotionEvent.ACTION_MOVE:
                action = "ACTION_MOVE";
                current = new PointF(MotionEventCompat.getX(event, mActivePointerId),
                    MotionEventCompat.getY(event, mActivePointerId));

                if (mCurrentBox != null) {
                    mCurrentBox.setCurrent(current);
                    invalidate();
                }
                if(MotionEventCompat.getPointerCount(event) > 1) {

                    int pointerIndex = MotionEventCompat.findPointerIndex(event, mActivePointerId);
                    float currX = MotionEventCompat.getX(event, pointerIndex);
                    float currY = MotionEventCompat.getY(event, pointerIndex);


                    if(mLastTouchX < currX) {
                        // simplified: only use x coordinates for rotation for now.  
                        // +X for clockwise, -X for counter clockwise
                        Log.d(TAG, "Clockwise");
                        mRotationAngle = 30;
                    }
                    else if (mLastTouchX > getX()) {
                        Log.d(TAG, "Counter clockwise");
                        mRotationAngle = -30;
                    }
                }
                break;

            case MotionEvent.ACTION_UP:
                action = "ACTION_UP";
                mCurrentBox = null;
                mLastTouchX = null;
                mLastTouchY = null;
                mActivePointerId = INVALID_POINTER_ID;
                break;

            case MotionEvent.ACTION_POINTER_UP:
                action = "ACTION_POINTER_UP";
                int pointerIndex = event.getActionIndex();
                int pointerId = event.getPointerId(pointerIndex);
                if(pointerId == mActivePointerId){
                    mActivePointerId = INVALID_POINTER_ID;
                }
                break;

            case MotionEvent.ACTION_CANCEL:
                action = "ACTION_CANCEL";
                mCurrentBox = null;
                mActivePointerId = INVALID_POINTER_ID;
                break;
        }

        return true;
    }


    @Override
    protected void onDraw(Canvas canvas){
        // Fill the background
        canvas.drawPaint(mBackgroundPaint);

        for(Box box : mBoxen) {
            // Box is a custom object.  Origin is the origin point, 
            // Current is the point of the opposite diagonal corner

            float left = Math.min(box.getOrigin().x, box.getCurrent().x);
            float right = Math.max(box.getOrigin().x, box.getCurrent().x);
            float top = Math.min(box.getOrigin().y, box.getCurrent().y);
            float bottom = Math.max(box.getOrigin().y, box.getCurrent().y);

            if(mRotationAngle != 0) {
                canvas.save();
                canvas.rotate(mRotationAngle);
                canvas.drawRect(left, top, right, bottom, mBoxPaint);
                canvas.rotate(-mRotationAngle);
                canvas.restore();
                mRotationAngle = 0;
            } else {
                canvas.drawRect(left, top, right, bottom, mBoxPaint);
            }
        }
    }
}
1个回答

1

有几种绘图方式,不仅在Android上,在Java中也是如此。问题在于您正在尝试通过旋转画布来绘制矩形。那是一种方法,但根据我的个人经验,我认为只有在您想要旋转整个图片时才是一个好选择。如果不是这样,这可能会变得有些棘手,因为您需要放置旋转轴,而似乎您没有使用旋转轴,因此Android将假定您希望从左上角或视图的中心旋转(我记不清了)。

如果您选择这种方法,可以尝试按照以下方式进行:

Matrix matrix = new Matrix();
matrix.setRotate(angle, rectangleCenterX, rectangleCenterY);
canvas.setMatrix(matrix);

但我建议您尝试不同的方法。通过计算多边形的轴,直接在您正在移动的矩形上进行旋转。您可以使用Java数学运算来完成这个操作:

public void formShape(int cx[], int cy[], double scale) {
    double xGap = (width / 2) * Math.cos(angle) * scale;
    double yGap = (width / 2) * Math.sin(angle) * scale;
    cx[0] = (int) (x * scale + xGap);
    cy[0] = (int) (y * scale + yGap);
    cx[1] = (int) (x * scale - xGap);
    cy[1] = (int) (y * scale - yGap);
    cx[2] = (int) (x * scale - xGap - length * Math.cos(radians) * scale);
    cy[2] = (int) (y * scale - yGap - length * Math.sin(radians) * scale);
    cx[3] = (int) (x * scale + xGap - length * Math.cos(radians) * scale);
    cy[3] = (int) (y * scale + yGap - length * Math.sin(radians) * scale);
}

所以(x,y)是您的矩形的中心,宽度和高度告诉您它有多大。在formShape(int [],int [],double)方法中,cx和cy将用于绘制您的形状,scale是要使用的值,如果您想稍后进行缩放或缩小,如果不需要,请使用scale = 1;

现在,为了绘制您的矩形,这是您应该做的:

Paint paint = new Paint();
paint.setColor(Color.GRAY);
paint.setStyle(Style.FILL);

int[] cx = new int[4];
int[] cy = new int[4];
Box box = yourBoxHere;
box.formShape(cx, cy, 1);
Path path = new Path();
path.reset(); // only needed when reusing this path for a new build
path.moveTo(cx[0], cy[0]); // used for first point
path.lineTo(cx[1], cy[1]);
path.lineTo(cx[2], cy[2]);
path.lineTo(cx[3], cy[3]);
path.lineTo(cx[0], cy[0]); // repeat the first point

canvas.drawPath(wallpath, paint);

对于多点触控旋转监听器,您应该在您的Activity或View中覆盖2个方法:

@Override
public boolean onTouch(View v, MotionEvent event) {
    if(event.getId() == MotionEvent.ACTION_UP)
        this.points = null;
    }
}

@Override
public boolean dispatchTouchEvent(MotionEvent event) {
    if(event.getPointerCount() >= 2) {

        float newPoints[][] = new float[][] {
            {event.getX(0), event.getY(0)},
            {event.getX(1), event.getY(1)}
        };

        double angle = angleBetweenTwoPoints(newPoints[0][0], newPoints[0][1], newPoints[1][0], newPoints[1][1]);

        if(points != null) {
            double difference = angle - initialAngle;
            if(Math.abs(difference) > rotationSensibility) {
                listener.onGestureListener(GestureListener.ROTATION, Math.toDegrees(difference));
                this.initialAngle = angle;
            }
        } else {
            this.initialAngle = angle;
        }

        this.points = newPoints;
    }
}

public static double angleBetweenTwoPoints(double xHead, double yHead, double xTail, double yTail) {

    if(xHead == xTail) {
        if(yHead > yTail)
            return Math.PI/2;
        else
            return (Math.PI*3)/2;
    } else if(yHead == yTail) {
        if(xHead > xTail)
            return 0;
        else
            return Math.PI;
    } else if(xHead > xTail) {
        if(yHead > yTail)
        return Math.atan((yHead-yTail)/(xHead-xTail));
        else
            return Math.PI*2 - Math.atan((yTail-yHead)/(xHead-xTail));
    } else {
        if(yHead > yTail)
            return Math.PI - Math.atan((yHead-yTail)/(xTail-xHead));
        else
            return Math.PI + Math.atan((yTail-yHead)/(xTail-xHead));
    }
}

抱歉,但是这个答案已经变得很长了。如果您对任何这些操作有进一步的问题,并且想要改变解决方案的方法,请再次提问并在评论中告诉我。

希望这对您有所帮助。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接