android - 在谷歌地图上绘制可调整大小的圆圈

Question

我正在尝试在我的谷歌地图上绘制一个可调整大小的圆圈,用户可以使用触摸手势扩展或缩小(例如缩小圆圈,用户将在屏幕上捏圆圈,我想要它像地图中的放大/缩小选项一样工作,只是地图上的圆圈会变得更大/更小).这有可能实现吗？如果是这样,我将如何实现这一目标.

我搜索了谷歌和Stackoverflow,据我所知,我需要在我的地图片段顶部添加一个自定义视图,并将OnTouchListener实现到此视图(这只是开始).有人可以建议做什么或如何进行？我可以在地图上画一个圆圈,但我不知道如何让它响应触摸事件.

提前致谢.

Answer 1

根据您的问题，您想覆盖一个“捏捏”视图，该视图基于捏合绘制椭圆形。为此，我编写了一些未经测试的代码，根据需要对其进行调整：

主布局：

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <!-- Replace the ImageView with your MapView or whatever you are 
         overlaying with the oval shape -->
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="#F00" />

    <com.example.testapp.CircleTouchView
        android:id="@+id/circle_drawer_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</FrameLayout>

CircleTouchView：

public class CircleTouchView extends View {
private static final int MODE_PINCH = 0;
private static final int MODE_DONT_CARE = 1;

ShapeDrawable mCircleDrawable;
int mTouchMode = MODE_DONT_CARE;

public CircleTouchView(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
    mCircleDrawable = new ShapeDrawable(new OvalShape());
    mCircleDrawable.getPaint().setColor(0x66FFFFFF);
}

public CircleTouchView(Context context, AttributeSet attrs) {
    this(context, attrs, 0);
}

public CircleTouchView(Context context) {
    this(context, null, 0);
}

@Override
public boolean onTouchEvent(MotionEvent event) {

    switch (event.getActionMasked()) {
    case MotionEvent.ACTION_DOWN:
        mCircleDrawable.setBounds(0, 0, 0, 0);
        invalidate();
        break;
    case MotionEvent.ACTION_POINTER_DOWN:
        prepareCircleDrawing(event);
        break;
    case MotionEvent.ACTION_MOVE:
        if (mTouchMode == MODE_PINCH) {
            prepareCircleDrawing(event);
        }
        break;
    case MotionEvent.ACTION_POINTER_UP:
        if (event.getActionIndex() <= 1) {
            mTouchMode = MODE_DONT_CARE;
        }
        break;
    default:
        super.onTouchEvent(event);
    }

    return true;
}

private void prepareCircleDrawing(MotionEvent event) {
    int top, right, bottom, left;
    int index = event.getActionIndex();

    if (index > 1) {
        return;
    }
    mTouchMode = MODE_PINCH;
    if (event.getX(0) < event.getX(1)) {
        left = (int) event.getX(0);
        right = (int) event.getX(1);
    } else {
        left = (int) event.getX(1);
        right = (int) event.getX(0);
    }

    if (event.getY(0) < event.getY(1)) {
        top = (int) event.getY(0);
        bottom = (int) event.getY(1);
    } else {
        top = (int) event.getY(1);
        bottom = (int) event.getY(0);
    }

    mCircleDrawable.setBounds(left, top, right, bottom);

    invalidate();
}

@Override
protected void onDraw(Canvas canvas) {
    mCircleDrawable.draw(canvas);
}
}

如果您想要一个完美的圆而不是一个椭圆形，请更改prepareCircleDrawing（）方法，使其在事件0和1之间采用X和Y的最小值。

编辑：您可以在调用mCircleDrawable.setBounds(left, top, right, bottom);画一个完美的圆之前添加以下代码段。还有其他绘制圆的方法，这取决于您希望它如何表现。

int height = bottom - top;
int width = right - left;

if (height > width) {
    int delta = height - width;
    top += delta / 2;
    bottom -= delta / 2;
} else {
    int delta = width - height;
    left += delta / 2;
    right -= delta / 2;
}

希望我明确表示，问候。