android - 围绕屏幕中心旋转 Canvas ，同时允许翻译

Question

我正在使用 canvas.drawPath 绘制一个复杂的形状。这些 drawPath 方法的结果类似于比屏幕大的 map 。我希望用户执行以下操作:用一根手指移动 map 。或者用 2 根手指围绕屏幕中心旋转它。基本上它的行为应该与谷歌地图完全一样，只是没有缩放。到目前为止，我能够获得所需的移动和旋转:

private void handleTouch(MotionEvent event)
{
    switch(event.getAction() & MotionEvent.ACTION_MASK) {
        case MotionEvent.ACTION_POINTER_DOWN:
        {
            rotate=true;
            move=false;
            a=Math.toDegrees(-Math.atan2(event.getX(0)-event.getX(1),event.getY(0)-event.getY(1)));
            if(a>360)a=a-360;
            if(a<-360)a=a+360;
            da=a-angle;
            if(da>360)da=da-360;
            if(da<-360)da=da+360;

        }
        break;
        case MotionEvent.ACTION_POINTER_UP:
        {
            rotate=false;
            move=false;
            x = (int)event.getX();
            y = (int)event.getY();
            dx = x - translate.x;
            dy = y - translate.y;
        }
        break;
        case MotionEvent.ACTION_DOWN:
        {
            move=true;
            x = (int)event.getX();
            y = (int)event.getY();
            dx = x - translate.x;
            dy = y - translate.y;
        }
        break;
        case MotionEvent.ACTION_MOVE:
        {
            if(rotate && event.getPointerCount()==2)
            {
                angle=Math.toDegrees((-Math.atan2(event.getX(0)-event.getX(1),event.getY(0)-event.getY(1))))-da;
                if(angle>360)angle=angle-360;
                if(angle<-360)angle=angle+360;
                vmap.invalidate();

            }
            else if(move==true)
            {
                translate.set((int)event.getX() - dx,(int)event.getY() - dy);
                //trans.setTranslate(translate.x,translate.y);

                vmap.invalidate();

            }

        }
        break;
        case MotionEvent.ACTION_UP:
        {
            //your stuff
        }
        break;

    }

问题是正确地将它们应用在一起。如果我先平移然后绕 map 的中心坐标旋转，我可以很容易地围绕它自己的中心旋转。但是，如果我尝试围绕屏幕中心旋转，事情就会变得复杂起来。假设我将 Canvas 向左移动 20 像素，然后旋转 30 度，然后向下移动 50 像素，然后再旋转 50 度。如果我尝试在第二次旋转期间将两个角度加在一起，我现在将围绕不同的坐标旋转，这意味着一旦我进行新的旋转， map 就会突然跳跃。

我研究过使用矩阵，但到目前为止没有帮助。

Answer 1

看看 Matrix类(class)。它允许您以多种方式转换 ImageView。对于这个问题，我创建了一个包含成员的测试项目:

ImageView imageView;
Matrix imageMatrix = new Matrix();
PointF screenCenter = new PointF();

然后，在 onCreate() 中:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    DisplayMetrics metrics = new DisplayMetrics();
    getWindowManager().getDefaultDisplay().getMetrics(metrics);
    screenCenter.x = metrics.widthPixels/2;
    screenCenter.y = metrics.heightPixels/2;

    imageView = (ImageView) findViewById(R.id.image);
    imageView.setScaleType(ImageView.ScaleType.MATRIX);
    imageMatrix.set(imageView.getImageMatrix());
}

screenCenter 对象现在包含屏幕中心的坐标，稍后会用到。 imageView 比例类型已设置为 MATRIX，并且 imageMatrix 已设置为我们更改比例类型时应用于 View 的起始矩阵。

现在，当您进行翻译时，您会修改 imageMatrix，然后使用 setImageMatrix() 将新矩阵应用于 View :

void translate(float x, float y) {
    imageMatrix.postTranslate(x, y);
    imageView.setImageMatrix(imageMatrix);
}

旋转的方式相同，但我们需要屏幕中心的坐标:

void rotate(float angle) {
    imageMatrix.postRotate(angle, screenCenter.x, screenCenter.y);
    imageView.setImageMatrix(imageMatrix);
}

这适用于我的模拟器，translate 移动预期的方向并且 rotate 始终围绕屏幕中心移动，无论它如何翻译。不可否认，这是一个测试项目，看起来不是很漂亮。

OpenGL ES 包含在 Android 框架中，如果您采用这种方式，您可能会获得更好的图形性能。如果你这样做，那么 this answer可能会有帮助。