使用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。