3

我在实现基于六边形网格的游戏时遇到问题。因为游戏需要一个 91 单元的六角板，就像我下面的简单板一样，我希望用户能够通过缩放/捏合来缩放板，并通过平移来移动它。但是，我的缩放和移动实现都不允许我同时拥有：

1) 一致的边界，让我能够将碎片拖放到构成每个单元格的 Drawable 上。

2）一致的相对定位，允许细胞在下面的相同配置中保持彼此相邻。

3) 平滑缩放和平移，让游戏快速运行，并拥有与其他应用类似的缩放/捏合体验。

一个 91 单元的六角板

我尝试过的一些事情（所有都使用 Activity -> SurfaceView -> Thread 完成，就像在 LunarLander 示例中一样）：

  1. 绘制位图，用矩阵缩放位图，平移画布。处理点 2 和 3，但我不知道如何保持单元格的边界一致。HexCell 是一个包含单个单元格的 Drawable 的类，二维数组 board 包含 HexCells。

    public void drawBoard(Canvas c, int posX, int posY, float scaleFactor, float pivotPointX, float pivotPointY, boolean firstDraw) {
    for(int i = 0; i < board.size(); i++) {
        for(int j = 0; j < board.get(i).size(); j++) {
            board.get(i).get(j).draw(bitmapCanvas);
        }
    }
    if(firstDraw) {
        int width = bitmap.getWidth();
        int height = bitmap.getHeight();
        float scale;
        if(canvasWidth < canvasHeight) {
            scale = ((float) canvasWidth) / width;
        }
        else {
            scale = ((float) canvasHeight) / height;
        }
        Matrix matrix = new Matrix();

        // Resize the bit map
            matrix.postScale(scale, scale);

        // Recreate the new Bitmap
        bitmap = Bitmap.createBitmap(bitmap, 0, 0, width, height, matrix, false);
        c.drawBitmap(bitmap, matrix, null);
    }
    c.save();
    c.translate(posX, posY);
    Matrix matrix = new Matrix();
    matrix.postScale(scaleFactor, scaleFactor, pivotPointX, pivotPointY);
    c.drawBitmap(bitmap, matrix, null);
    c.restore();
}

  2. 使用矩阵修改 Drawable 的边界。这更新了第 1 点的界限，通过一些调整，我想我可以得到 2 和 3，但我不确定如何使缩放停止“粘性”，这意味着不像第一种方法那样平滑。此外，当对单元格进行大量缩放时，其中一些单元格的大小会变得不同，并开始相对于其他单元格移出位置。

    public void drawBoard(Canvas c, int posX, int posY, float scaleFactor, float pivotPointX, float pivotPointY, boolean firstDraw) {
    for(int i = 0; i < board.size(); i++) {
        for(int j = 0; j < board.get(i).size(); j++) {
            Rect bounds = board.get(i).get(j).getBounds();
            RectF boundsF = new RectF(bounds.left, bounds.top, bounds.right, bounds.bottom);
            matrix.mapRect(boundsF);
            bounds = new Rect((int)boundsF.left, (int)boundsF.top, (int)boundsF.right, (int)boundsF.bottom);
            board.get(i).get(j).setBounds(bounds);
            board.get(i).get(j).draw(c);
        }
    }
}

  3. 直接修改 Drawable 的边界。这会更新第 1 点的边界，但缺少第 2 点和第 3 点。此外，因为我没有使用带有 pivotPoints 的矩阵 postScale，所以单元格保持在它们所在的中心并且变得更小/更大而不会移动到每个单元旁边其他。

    public void resize(int dx, int dy, float scaleFactor) {
    xPos += dx;
    yPos += dy;
    width *= scaleFactor;
    height *= scaleFactor;
    cell.setBounds(xPos, yPos, xPos + width, yPos + height);
}

我应该怎么办？如何在缩放和移动时更新边界，以便最终将棋子放置在棋盘上？我是否应该放弃缩放和平移的愿望，而是使用 GridView 或类似的东西来实现板？

编辑：

对此进行了更多研究，我确定选项 1 是最好的方法。它速度更快，并使细胞保持一致的形成。我发现如果你反转应用于画布的转换并将其应用于触摸事件的坐标，你可以回到单元格的原始边界，因此适当地选择它们。

但是，我无法准确地反转转换。

x /= scaleFactor;
y /= scaleFactor;
x -= posX + pivotPointX;
y -= posY + pivotPointY;

不是以下的工作倒置：

canvas.save();
canvas.translate(posX, posY);
canvas.scale(scaleFactor, scaleFactor, pivotPointX, pivotPointY);

有谁知道如何适当地反转它？

4

1 回答 1

1

在 drawBoard() 方法中我做了：

canvas.save();
canvas.translate(posX, posY);
canvas.scale(scaleFactor, scaleFactor, pivotPointX, pivotPointY);
canvas.getMatrix(canvasMatrix); // Save the matrix that has the transformations so we can invert it
for(int i = 0; i < board.size(); i++) {
    for(int j = 0; j < board.get(i).size(); j++) {
         board.get(i).get(j).draw(c);
    }
}
canvas.restore();

在视图中的 onTouchEvent(MotionEvent ev) 方法中，我做了：

float x = ev.getX();
float y = ev.getY();

float[] pts = {x, y};
Matrix canvasMatrix = boardThread.getCanvasMatrix(); // get the matrix with the transformations
Matrix invertMatrix = new Matrix();
canvasMatrix.invert(invertMatrix); // invert the matrix
invertMatrix.mapPoints(pts); // map the inversion to the points x and y
boardThread.selectHex((int)pts[0], (int)pts[1]);

这是诀窍！现在，如果有人有任何建议避免使用已弃用的 canvas.getMatrix() 方法，那就太好了:)

于 2013-07-25T01:57:35.417 回答