通过在自定义视图的onDraw中设置标识矩阵来偏移画布

Question

我onDraw通过自定义视图的方法在 画布上设置矩阵，canvas.setMatrix(matrix);然后使用预定义的绘画绘制网格：

canvas.drawRect(0,0,viewWidth,viewHeight, background);

for(int i=0; i <= nRows; i++){
    canvas.drawLine(0,i*cellHeight, nCols*cellWidth,i*cellHeight,lines);
    canvas.drawLine(i*cellWidth, 0, i*cellWidth, nRows*cellHeight, lines);
    if(i != nRows)
        canvas.drawText(""+i, i*cellWidth, (i+1)*cellHeight, text);
}

由于某种原因，整个画布的偏移量约为单元格高度的1.5倍。知道为什么会这样或如何解决吗？矩阵尚未初始化，因此根据文档应该是标识。

非常感谢！

Answer 1

我已经收窄这种行为降低到原来的Matrix一个的View的帆布已经被视图的位置转换。但是，如果您Matrix使用Canvas.getMatrix()或，则这并不明显View.getMatrix()。您将从这些调用中获得身份矩阵。

您看到的画布偏移很可能View与屏幕顶部（状态栏，标题栏等）的偏移高度完全相同。

在大多数情况下，您可以使用canvas.concat(matrix)代替canvas.setMatrix(matrix)此用例，这是正确的。如果您确实需要原始矩阵（我在调试时做了），则必须通过View自身的翻译手动对其进行转换Window：

int[] viewLocation = new int[2];
mView.getLocationInWindow(viewLocation);
mOriginalMatrix.setTranslate(viewLocation[0], viewLocation[1]);

编辑 以回答评论中的其他问题：

要转换触摸坐标（或任何屏幕坐标）以匹配a的坐标Canvas，只需将所有转换改为a
Matrix，并Canvas.concat()在绘制之前每帧使用该矩阵。（或者您可以Canvas像现在一样直接进行所有转换，并Canvas.getMatrix(mMyMatrix)在每次绘制后使用来检索矩阵。不建议使用，但是可以使用。）

然后可以使用矩阵将原始网格边界转换为在屏幕上绘制的边界。本质上，您所做的与Canvas绘制网格时完全相同，将网格的角点转换为屏幕坐标。现在，网格将与触摸事件位于同一坐标系中：

private final Matrix mMyMatrix = new Matrix();

// Assumes that the grid covers the whole View.
private final float[] mOriginalGridCorners = new float[] {
    0, 0,                   // top left (x, y)
    getWidth(), getHeight() // bottom right (x, y)
};

private final float[] mTransformedGridCorners = new float[4];

@Override
public boolean onTouchEvent(MotionEvent event) {
    if (/* User pans the screen */) {
        mMyMatrix.postTranslate(deltaX, deltaY);
    }

    if (/* User zooms the screen */) {
        mMyMatrix.postScale(deltaScale, deltaScale);
    }

    if (/* User taps the grid */) {
        // Transform the original grid corners to where they
        // are on the screen (panned and zoomed).
        mMyMatrix.mapPoints(mTransformedGridCorners, mOriginalGridCorners);
        float gridWidth = mTransformedGridCorners[2] - mTransformedGridCorners[0];
        float gridHeight = mTransformedGridCorners[3] - mTransformedGridCorners[1];
        // Get the x and y coordinate of the tap inside the
        // grid, between 0 and 1.
        float x = (event.getX() - mTransformedGridCorners[0]) / gridWidth;
        float y = (event.getY() - mTransformedGridCorners[1]) / gridHeight;
        // To get the tapped grid cell.
        int column = (int)(x * nbrColumns);
        int row = (int)(y * nbrRows);
        // Or to get the tapped exact pixel in the original grid.
        int pixelX = (int)(x * getWidth());
        int pixelY = (int)(y * getHeight());
    }
    return true;
}

@Override
protected void onDraw(Canvas canvas) {
    // Each frame, transform your canvas with the matrix.
    canvas.save();
    canvas.concat(mMyMatrix);
    // Draw grid.
    grid.draw(canvas);
    canvas.restore();
}

或者不推荐使用的方法来获取矩阵，该方法仍然有效，并且可能需要较少的更改：

@Override
protected void onDraw(Canvas canvas) {
    canvas.save();
    // Transform canvas and draw the grid.
    grid.draw(canvas);
    // Get the matrix from canvas. Can be used to transform
    // corners on the next touch event.
    canvas.getMatrix(mMyMatrix);
    canvas.restore();
}