java - 在 android canvas 中拖动旋转文本无法按预期工作

Question

我在这里缺少一些东西，所以我希望你能分享一些关于我的信息。

我正在 Canvas 中绘制一些文本。为此，我有一个类 Word

public class Word {
     private int    x;
     private int    y;
     private String text;
}

该应用允许用户旋转文本，我使用 onDraw 处理旋转

protected void onDraw(Canvas canvas) {
    canvas.save(Canvas.MATRIX_SAVE_FLAG);
    canvas.rotate(angle, centerX, centerY)
    ...
    canvas.drawText(word.getText(), word.getX(), word.getY())
    ....
    canvas.restore();
}

我遇到的问题是当用户拖动 Canvas 并且存在旋转集时。当 angle=0 时，运动按预期进行。

@Override
    public boolean onTouchEvent(MotionEvent event) {
       case MotionEvent.ACTION_DOWN:
            initialX = (int) event.getX();
            initialY = (int) event.getY();
        break;
      case MotionEvent.ACTION_MOVE:
             int currentX = (int) event.getX();
             int currentY = (int) event.getY();
             int xMovement = currentX - initialX;
             int yMovement = currentY - initialY;

            dragWords(xMovement, yMovement);
   .....

在 dragWords 上我做的每个词:

private void dragText(int xMovement, int yMovement){
for (Word word : words) {
    word.setX(word.getX() + xMovement);
    word.setY(word.getY() + yMovement);
}
invalidate();

当旋转角度为0时，上/下/左/右移动使文字移动相同的距离。随着角度变大，文字开始向不同的方向移动，例如在 60 时，它开始沿对角线向上移动，当 180 时，它只向上/向下移动，而不是向左/向右移动。

我想我需要根据角度计算某种差异并将其添加到 xMovement/yMovement...但我应该怎么做？

LE:这是一张关于它如何表现的图片: 蓝线是文本在拖动时的移动方式，而橙色是手指在屏幕上拖动的方式。当角度为0时效果很好，当角度增加时，它开始向左/右倾斜移动，而当角度更大时，它只上下移动，不响应左/右

Answer 1

如果我理解正确，问题是 Canvas.rotate() 不仅旋转文本方向，而且整个 Canvas 。因此，单词的 x-y 坐标也从指定的轴心点旋转。

为了配合拖动 Action ，可以使用Matrix为此，更具体地说 inverse matrix您用来旋转 Canvas 的那个。它将用于将单词的 x-y 坐标转换为其原始的旋转前位置。

例如，计算一次，并在 angle、centerX 或 centerY 发生变化时更新它。

// rotMatrix is the same operation applied on the canvas.
Matrix rotMatrix = new Matrix();
rotMatrix.postRotate(mAngle, centerX, centerY);

// Invert it to convert x, y to their transformed positions.
Matrix matrix = new Matrix();
rotMatrix.invert(matrix);

然后，在绘制每个单词时:

int wordX = ... 
int wordY = ...
String text = ...

float[] coords = new float[] { wordX, wordY };
matrix.mapPoints(coords);
canvas.drawText(text, coords[0], coords[1], paint);