在 ImageView 中选择一部分图像并检索所选矩形的端点

Select a portion of image in ImageView and retrieve the end points of selected rectangle(在 ImageView 中选择一部分图像并检索所选矩形的端点)

问题描述

我需要拖动并选择 ImageView 中设置的图像的一部分，并检索所选矩形的端点而不进行任何修改(例如裁剪).

I need to drag and select a portion of an image set in an ImageView and retrieve the end points of the selected rectangle without causing any modifications (such as crop).

到目前为止，我所能做的就是找出用户点击屏幕的点的坐标.

So far all I've been able to do is figure out the co-ordinates of the point where the user taps the screen.

ImageView imageView = (ImageView) findViewById(R.id.imageView);
imageView.setOnTouchListener(new View.OnTouchListener() {
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        //Simply displays a toast
        Utilities.displayToast(getApplicationContext(), "Touch coordinates : " +
                String.valueOf(event.getX()) + "x" + String.valueOf(event.getY())); 
        return true;
    }
});

但这远不是我想要的.而且我真的无法在 StackOverFlow/Google 上找到任何相关内容.

But this is far from where I want to be. And I really haven't been able to find anything related on StackOverFlow/Google.

我该如何实现它?

推荐答案

这是您可以使用的一种方法(但是，有很多实现相同方法的可能性).它基于创建用于绘制和跟踪选择矩形的自定义视图.此外，您可以在您的 OnTouchListener() 中应用自定义视图的 onTouch() 中的逻辑.

Here's one way, that You can use (however, there's lot of possibilities to implement the same). It's based on creation of custom View for drawing and tracking of selection rectangle. Also, You can just apply the logic from onTouch() of custom view in yours OnTouchListener().

主布局:

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:id="@+id/root"
    android:background="@android:color/background_dark">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/image"
        android:src="@drawable/up_image"
        android:scaleType="fitXY" />

    <com.example.TestApp.DragRectView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/dragRect" />

</RelativeLayout>

自定义视图:

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Rect;
import android.text.TextPaint;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

public class DragRectView extends View {

    private Paint mRectPaint;

    private int mStartX = 0;
    private int mStartY = 0;
    private int mEndX = 0;
    private int mEndY = 0;
    private boolean mDrawRect = false;
    private TextPaint mTextPaint = null;

    private OnUpCallback mCallback = null;

    public interface OnUpCallback {
        void onRectFinished(Rect rect);
    }

    public DragRectView(final Context context) {
        super(context);
        init();
    }

    public DragRectView(final Context context, final AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public DragRectView(final Context context, final AttributeSet attrs, final int defStyle) {
        super(context, attrs, defStyle);
        init();
    }

    /**
     * Sets callback for up
     *
     * @param callback {@link OnUpCallback}
     */
    public void setOnUpCallback(OnUpCallback callback) {
        mCallback = callback;
    }

    /**
     * Inits internal data
     */
    private void init() {
        mRectPaint = new Paint();
        mRectPaint.setColor(getContext().getResources().getColor(android.R.color.holo_green_light));
        mRectPaint.setStyle(Paint.Style.STROKE);
        mRectPaint.setStrokeWidth(5); // TODO: should take from resources

        mTextPaint = new TextPaint();
        mTextPaint.setColor(getContext().getResources().getColor(android.R.color.holo_green_light));
        mTextPaint.setTextSize(20);
    }

    @Override
    public boolean onTouchEvent(final MotionEvent event) {

        // TODO: be aware of multi-touches
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                mDrawRect = false;
                mStartX = (int) event.getX();
                mStartY = (int) event.getY();
                invalidate();
                break;

            case MotionEvent.ACTION_MOVE:
                final int x = (int) event.getX();
                final int y = (int) event.getY();

                if (!mDrawRect || Math.abs(x - mEndX) > 5 || Math.abs(y - mEndY) > 5) {
                    mEndX = x;
                    mEndY = y;
                    invalidate();
                }

                mDrawRect = true;
                break;

            case MotionEvent.ACTION_UP:
                if (mCallback != null) {
                    mCallback.onRectFinished(new Rect(Math.min(mStartX, mEndX), Math.min(mStartY, mEndY),
                            Math.max(mEndX, mStartX), Math.max(mStartY, mEndY)));
                }
                invalidate();
                break;

            default:
                break;
        }

        return true;
    }

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

        if (mDrawRect) {
            canvas.drawRect(Math.min(mStartX, mEndX), Math.min(mStartY, mEndY),
                    Math.max(mEndX, mStartX), Math.max(mEndY, mStartY), mRectPaint);
            canvas.drawText("  (" + Math.abs(mStartX - mEndX) + ", " + Math.abs(mStartY - mEndY) + ")",
                    Math.max(mEndX, mStartX), Math.max(mEndY, mStartY), mTextPaint);
        }
    }
}

活动很简单:

public class MyActivity extends Activity {

    private static final String TAG = "MyActivity";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        final DragRectView view = (DragRectView) findViewById(R.id.dragRect);

        if (null != view) {
            view.setOnUpCallback(new DragRectView.OnUpCallback() {
                @Override
                public void onRectFinished(final Rect rect) {
                    Toast.makeText(getApplicationContext(), "Rect is (" + rect.left + ", " + rect.top + ", " + rect.right + ", " + rect.bottom + ")",
                            Toast.LENGTH_LONG).show();
                }
            });
        }
    }
}

输出如下:

这篇关于在 ImageView 中选择一部分图像并检索所选矩形的端点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！