通过在自定义视图的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();
}