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

所以我认为你需要另一个矩阵。首先平移第二个矩阵，使其将矩形放置在屏幕的中心，然后对另一个矩阵应用相同的操作。尝试在应用任何其他矩阵运算之前执行此操作（即全部注释掉）并查看它是否将矩形放置在正确的位置。那么如果是正确的，它应该可以缩放。