如何在ImageView中在Android中将OnTouchEvent坐标转换/缩放到位图画布上

Question

I'm trying to set an OnTouchListener to an ImageView on which I'm doing a lot of custom drawing. Problem: my X values are off and I'm constantly registering the touches too far to the left. The Y values are ok though, so where is the problem in my algorithm?

The canvas I'm using is 400 pixels wide and 300 pixels high. I'm not applying any special scaling to the ImageView, I'm just relying on the standard ImageView behavior by which it will scale itself to fit the screen. Little green dots should be appearing where the user touches the screen, but they are instead too far to the left on my Nexus 5. How is it that my math is correct for the Y values, but wrong on the X values? I'm requesting both the x scale and the y scale, so even if the ImageView is changing the aspect ratio, I should be accounting for that, right?

public class FullscreenActivity extends AppCompatActivity {

    private ImageView drawingImageView;
    private Canvas canvas;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        int mUIFlag = View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
                | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
                | View.SYSTEM_UI_FLAG_LAYOUT_STABLE
                | View.SYSTEM_UI_FLAG_LOW_PROFILE
                | View.SYSTEM_UI_FLAG_FULLSCREEN
                | View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
                | View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY;
        getWindow().getDecorView().setSystemUiVisibility(mUIFlag);
        setContentView(R.layout.activity_fullscreen);

        drawingImageView = (ImageView) this.findViewById(R.id.game_map_fixed_id);
        Bitmap bitmap = Bitmap.createBitmap(Map.width, Map.height, Bitmap.Config.ARGB_8888);
        canvas = new Canvas(bitmap);
        drawingImageView.setImageBitmap(bitmap);
        drawingImageView.setOnTouchListener(mapOnTouchListener);
    }

    View.OnTouchListener mapOnTouchListener = new View.OnTouchListener() {
        @Override
        public boolean onTouch(View v, MotionEvent event) {

            float[] bounds = new float[6];
            bounds = getBitmapPositionInsideImageView(drawingImageView);

            float x = event.getX() / bounds[4] - bounds[0];
            float y = event.getY() / bounds[5] - bounds[1];

            Paint paint = new Paint();
            paint.setStyle(Paint.Style.FILL_AND_STROKE);
            paint.setColor(Color.GREEN);
            canvas.drawCircle(x, y, 1, paint);
            return false;
        }
    };

    public static float[] getBitmapPositionInsideImageView(ImageView imageView) {
        float[] rect = new float[6];

        if (imageView == null || imageView.getDrawable() == null)
            return rect;

        // Get image dimensions
        // Get image matrix values and place them in an array
        float[] f = new float[9];
        imageView.getImageMatrix().getValues(f);

        // Extract the scale values using the constants (if aspect ratio maintained, scaleX == scaleY)
        final float scaleX = f[Matrix.MSCALE_X];
        final float scaleY = f[Matrix.MSCALE_Y];

        rect[4] = scaleX;
        rect[5] = scaleY;

        // Get the drawable (could also get the bitmap behind the drawable and getWidth/getHeight)
        final Drawable d = imageView.getDrawable();
        final int origW = d.getIntrinsicWidth();
        final int origH = d.getIntrinsicHeight();

        // Calculate the actual dimensions
        final int actW = Math.round(origW * scaleX);
        final int actH = Math.round(origH * scaleY);

        rect[2] = actW;
        rect[3] = actH;

        // Get image position
        // We assume that the image is centered into ImageView
        int imgViewW = imageView.getWidth();
        int imgViewH = imageView.getHeight();

        float left = (imgViewW - actW)/2;
        float top = (imgViewH - actH)/2;

        rect[0] = left;
        rect[1] = top;

        return rect;
    }
}

Answer 1

The error is in the computation of the points after receiving the information from the getBitmapPositionInsideImageView.

        float x = event.getX() / bounds[4] - bounds[0];
        float y = event.getY() / bounds[5] - bounds[1];

should be

        float x = (event.getX() - bounds[0]) / bounds[4];
        float y = (event.getY() - bounds[1]) / bounds[5];

The reason that I wasn't having any problem on the vertical axis is because the image wasn't receiving any padding at the top or bottom which meant that bounds[5] was always zero, hiding the error in that equation.