使用ImageView和矩陣在圖像上繪製圖形

Question

我們正在經歷大約一週的以下問題： 我們正在繪製一幅圖像，我們希望能夠在用戶的屏幕上重新縮放和「移動」。 爲了達到這個目的，我們使用了ImageView和Matrix：它效果很好。

但是，現在我們正在尋找在背景圖像上繪製一些矩形。 這些矩形必須重新縮放並與背景圖片一起轉換......我們遇到的問題是，當我們創建形狀並使用以下代碼進行繪製時，它將繪製在圖像的左上角部分就像整個用戶的屏幕被解釋爲其真實維度的一部分一樣......？

我定製的ImageView

public class EnvironmentView extends ImageView { 
Matrix matrix; 

// We can be in one of these 3 states 
static final int NONE = 0; 
static final int DRAG = 1; 
static final int ZOOM = 2; 
int mode = NONE; 

// Remember some things for zooming 
PointF last = new PointF(); 
PointF start = new PointF(); 
float minScale = 1f; 
float maxScale = 3f; 
float[] m; 

int viewWidth, viewHeight; 
static final int CLICK = 3; 
float saveScale = 1f; 
protected float origWidth, origHeight; 
int oldMeasuredWidth, oldMeasuredHeight; 

public static boolean EDIT_RISKYZONE = false; 
static boolean SAVE = false; 
ScaleGestureDetector mScaleDetector; 

Context context; 

@Override 
protected void onDraw(Canvas canvas){ 
    super.onDraw(canvas); 

    Paint paint = new Paint(); 

    paint.setColor(Color.RED); 
    paint.setStrokeWidth(3); 
    paint.setAlpha(80); 

    float left = 0; 
    float top = 0; 
    float right = getWidth(); 
    float down = getHeight(); 
    RectF origRect = new RectF(left, top, right, down); 

    matrix.mapRect(origRect); 
    canvas.drawRect(origRect, paint); 



} 

public EnvironmentView(Context context) { 
    super(context); 
    sharedConstructing(context); 
} 

public EnvironmentView(Context context, AttributeSet attrs) { 
    super(context, attrs); 
    sharedConstructing(context); 
} 

private void sharedConstructing(Context context) { 
    super.setClickable(true); 
    this.context = context; 
    matrix = new Matrix(); 
    m = new float[9]; 
    setImageMatrix(matrix); 
    setScaleType(ScaleType.MATRIX); 
} 

public void setMaxZoom(float x) { 
    maxScale = x; 
} 

@Override 
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { 
    super.onMeasure(widthMeasureSpec, heightMeasureSpec); 
    viewWidth = MeasureSpec.getSize(widthMeasureSpec); 
    viewHeight = MeasureSpec.getSize(heightMeasureSpec); 

    // 
    // Rescales image on rotation 
    // 
    if (oldMeasuredHeight == viewWidth && oldMeasuredHeight == viewHeight 
      || viewWidth == 0 || viewHeight == 0) 
     return; 
    oldMeasuredHeight = viewHeight; 
    oldMeasuredWidth = viewWidth; 

    if (saveScale == 1) { 
     //Fit to screen. 
     float scale; 

     Drawable drawable = getDrawable(); 
     if (drawable == null || drawable.getIntrinsicWidth() == 0 || drawable.getIntrinsicHeight() == 0) 
      return; 
     int bmWidth = drawable.getIntrinsicWidth(); 
     int bmHeight = drawable.getIntrinsicHeight(); 

     Log.d("bmSize", "bmWidth: " + bmWidth + " bmHeight : " + bmHeight); 

     float scaleX = (float) viewWidth/(float) bmWidth; 
     float scaleY = (float) viewHeight/(float) bmHeight; 
     scale = Math.min(scaleX, scaleY); 
     matrix.setScale(scale, scale); 

     // Center the image 
     float redundantYSpace = (float) viewHeight - (scale * (float) bmHeight); 
     float redundantXSpace = (float) viewWidth - (scale * (float) bmWidth); 
     redundantYSpace /= (float) 2; 
     redundantXSpace /= (float) 2; 

     matrix.postTranslate(redundantXSpace, redundantYSpace); 

     origWidth = viewWidth - 2 * redundantXSpace; 
     origHeight = viewHeight - 2 * redundantYSpace; 
     setImageMatrix(matrix); 
    } 
} 
} 

屏幕輸出

下面是什麼在用戶的屏幕上顯示的屏幕截圖，他已經繪製了屏幕的中央矩形之後，他們應該是約3/4的屏幕寬度和高度。

謝謝您的幫助！

Answer 1

圖像需要從原點開始（左上角--0,0）。矩形應該從屏幕的中心開始寬度的一半，高度的一半。

int x = (widthOfScreen - widthOfRect)/2; 
int y = (heightOfScreen - heightOfRect)/2; 

所以我認爲你需要另一個矩陣。首先轉換第二個矩陣，以便將矩形放置在屏幕的中心，然後將相同的操作應用於另一個矩陣。在應用任何其他矩陣操作（即將它們全部註釋掉）之前嘗試做到這一點，並看到它將矩形放置在正確的位置。那麼如果是對的，它應該縮放OK。