在Android画布中设置显示图像的缩放比例

Question

我正在尝试编写一个Android应用程序，让我可以在图像上绘制图形，然后缩放图像并使图像保留在图像上的同一位置在实时更改图形的同时已经绘制在其上。

但是，我一直有很多问题实际上让它放大，同时保持图像的中心。我写了代码，我有一个线程更新图像。通过ArrayBlockingQueue使用我创建的类称为“PendingUpdate”传递更新。此更新包含所需的缩放级别，该级别应该是图像像素与画布像素和图像中心的比率。但是，下面的代码会让我在缩放时感到泛泛，这让我感到困惑。

//Scale the image 
canvas.scale(pendingUpdate.getZoom(), pendingUpdate.getZoom()); 

//Translate the image 
double updateCx = pendingUpdate.getCenter().getX(); 
double updateCy = pendingUpdate.getCenter().getY(); 
double halfCanvasWidthInImagePixels = pendingUpdate.getZoom()*(canvas.getWidth()/2); 
double halfCanvasHeightInImagePixels = pendingUpdate.getZoom()*(canvas.getHeight()/2); 
double imageTranslateX = updateCx - halfCanvasWidthInImagePixels; 
double imageTranslateY = updateCy - halfCanvasHeightInImagePixels; 
canvas.translate(-(float)imageTranslateX, -(float)imageTranslateY); 
canvas.drawBitmap(pendingUpdate.getImage(), matrix, new Paint()); 

谢谢你的帮助！

编辑：这里是完整的功能，如果这有帮助，我也可以发布PendingUpdate，但它只是一个数据类。

private void doDraw(Canvas canvas, PendingUpdate pendingUpdate) { 
     int iWidth = pendingUpdate.getImage().getWidth(); 
     int iHeight = pendingUpdate.getImage().getHeight(); 
     Matrix matrix = new Matrix(); 

     canvas.drawColor(Color.BLACK); 
     //TODO: add scrolling functionality to this 
     if(pendingUpdate.getZoom()>0) { 

      //Scale the image 
      canvas.scale(pendingUpdate.getZoom(), pendingUpdate.getZoom()); 

      //Translate the image 
      double updateCx = pendingUpdate.getCenter().getX(); 
      double updateCy = pendingUpdate.getCenter().getY(); 
      double halfCanvasWidthInImagePixels = pendingUpdate.getZoom()*(canvas.getWidth()/2); 
      double halfCanvasHeightInImagePixels = pendingUpdate.getZoom()*(canvas.getHeight()/2); 
      double imageTranslateX = updateCx - halfCanvasWidthInImagePixels; 
      double imageTranslateY = updateCy - halfCanvasHeightInImagePixels; 
      canvas.translate(-(float)imageTranslateX, -(float)imageTranslateY); 
      canvas.drawBitmap(pendingUpdate.getImage(), matrix, new Paint()); 

     }else { 
      //matrix.postTranslate(canvas.getWidth()-iWidth/2, canvas.getWidth()-iHeight/2); 
      canvas.drawBitmap(pendingUpdate.getImage(), 
        (canvas.getWidth()-iWidth)/2, 
        (canvas.getHeight()-iHeight)/2, null); 
     } 
     //TODO: draw other stuff on canvas here such as current location 

    } 

编辑2：这是我最终得到它的工作原理，它只是在翻译它之前缩放它的问题。

private void doDraw(Canvas canvas, PendingUpdate pendingUpdate) { 
     int iWidth = pendingUpdate.getImage().getWidth(); 
     int iHeight = pendingUpdate.getImage().getHeight(); 

     canvas.drawColor(Color.BLACK); 
     //TODO: add scrolling functionality to this 
     if(pendingUpdate.getZoom()>0) { 

      //Scale the image 
      canvas.save(); 
      double updateCx = pendingUpdate.getCenter().getX(); 
      double updateCy = pendingUpdate.getCenter().getY(); 
      double halfCanvasWidthInImagePixels = (canvas.getWidth()/2); 
      double halfCanvasHeightInImagePixels = (canvas.getHeight()/2); 
      double imageTranslateX = updateCx - halfCanvasWidthInImagePixels; 
      double imageTranslateY = updateCy - halfCanvasHeightInImagePixels; 
      //canvas.scale(pendingUpdate.getZoom(), pendingUpdate.getZoom(), (float)pendingUpdate.getCenter().getX(), (float)pendingUpdate.getCenter().getY()); 

      canvas.scale(pendingUpdate.getZoom(), 
        pendingUpdate.getZoom(), 
        canvas.getWidth()/2, 
        canvas.getHeight()/2); 

      canvas.translate(-(float)imageTranslateX, 
        -(float)imageTranslateY); 
      canvas.drawBitmap(pendingUpdate.getImage(), 0, 0, null); 

      canvas.restore(); 
     }else { 
      //TODO: update this so it displays image scaled to screen and updates current zoom somehow 
      canvas.drawBitmap(pendingUpdate.getImage(), 
        (canvas.getWidth()-iWidth)/2, 
        (canvas.getHeight()-iHeight)/2, null); 
     } 
     //TODO: draw other stuff on canvas here such as current location  
    } 
} 

Answer 1

如果我是你，我会使用Canvas.scale(float sx, float sy, float px, float py)方法，它正是你想要的。

但是看着你的代码，我想你可能会一次搞乱太多的转换，这很难调试。

1. 总是（我的意思是总是）调用Canvas.save()和Canvas.restore()对你在Canvas得到，如果你打算改变它的初始矩阵。这是因为您可以使用的Canvas可以是例如整个窗口的剪裁设置为当前正在绘制的控件的边界。

2. 使用Canvas方法提供的矩阵变换方法，并使用最简单的调用绘制位图。

按照这两个建议看看整个View我刚才提出了，通过的3因子与点(16,16)设定为支点（不变点 - 缩放中心）缩放bitmap。测试 - 工作。

public class DrawingView extends View { 
    Bitmap bitmap; 

    public DrawingView(Context context) { 
     super(context); 
     bitmap = BitmapFactory.decodeResource(context.getResources(), R.drawable.ic_launcher); 
    } 

    @Override 
    protected void onDraw(Canvas canvas) { 
     float sx = 3; 
     float sy = 3; 
     float px = 16; 
     float py = 16; 
     canvas.save(); 
     canvas.scale(sx, sy, px, py); 
     canvas.drawBitmap(bitmap, 0, 0, null); 
     canvas.restore(); 
    } 
}