Android:Pinch缩放带有附加子视图的ImageView

我正在开发一款Android平板电脑应用程序，在那里我有一个蓝图，可以缩小缩放。从侧边菜单中，我可以将小符号拖动到可缩放图像中，稍后单击并修改。把它想象成地图上的标记

到目前为止，对于缩放部分，我使用了WebView。以下是我处理此功能的代码：

public void handlePinchZooming() {
    WebView webView = (WebView) findViewById(R.id.blueprintWebView);
    webView.setInitialScale(50);
    webView.getSettings().setBuiltInZoomControls(true);
    WebSettings settings = webView.getSettings();
    settings.setUseWideViewPort(true);
    settings.setLoadWithOverviewMode(true);
    webView.loadUrl("file:///android_asset/blueprint_example.jpg");
}

为了将标记拖动到图像中并将其作为子对象添加，我使用以下代码：

private void handleDragDrop() {
    findViewById(R.id.markerButton01).setOnTouchListener(new DragDropTouchListener());
    findViewById(R.id.markerButton02).setOnTouchListener(new DragDropTouchListener());
    findViewById(R.id.markerButton03).setOnTouchListener(new DragDropTouchListener());
    findViewById(R.id.blueprintWebView).setOnDragListener(new DragDropDragListener());
}

private final class DragDropTouchListener implements View.OnTouchListener {
    public boolean onTouch(View view, MotionEvent motionEvent) {
        view.setAlpha(100);
        if (motionEvent.getAction() == MotionEvent.ACTION_DOWN) {
            view.getLayoutParams().width = 50;
            view.getLayoutParams().height = 50;
            ClipData data = ClipData.newPlainText("", "");
            View.DragShadowBuilder shadowBuilder = new View.DragShadowBuilder(view);
            view.startDrag(data, shadowBuilder, view, 0);
            view.setVisibility(View.INVISIBLE);
            return true;
        } else {
            return false;
        }
    }
}

class DragDropDragListener implements View.OnDragListener {
    Drawable enterShape = getResources().getDrawable(R.drawable.blueprint_example);
    Drawable normalShape = getResources().getDrawable(R.drawable.blueprint_example);

    @Override
    public boolean onDrag(View v, DragEvent event) {
        int action = event.getAction();
        switch (event.getAction()) {
            case DragEvent.ACTION_DRAG_STARTED:
                // Do nothing
                break;
            case DragEvent.ACTION_DRAG_ENTERED:
                v.setBackgroundDrawable(enterShape);
                break;
            case DragEvent.ACTION_DRAG_EXITED:
                v.setBackgroundDrawable(normalShape);
                break;
            case DragEvent.ACTION_DROP:
                // Dropped, reassign View to ViewGroup
                View view = (View) event.getLocalState();
                ViewGroup owner = (ViewGroup) view.getParent();
                owner.removeView(view);
                WebView container = (WebView) v;
                container.addView(view);
                view.setX(event.getX()-25);
                view.setY(event.getY()-25);
                view.setVisibility(View.VISIBLE);
                setMarkerOnClickListener(view);
                break;
            case DragEvent.ACTION_DRAG_ENDED:
                v.setBackgroundDrawable(normalShape);
            default:
                break;
        }
        return true;
    }
}

现在，当我四处滑动蓝图图像时，标记会随之移动，但只要我放大或缩小，标记之间始终保持相同的绝对距离，这使它们远离蓝图上所需的位置

我不确定您是否需要这个，但这里是我的布局的XML文件的一部分：

<LinearLayout
        android:orientation="horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" android:gravity="center|right">

    <WebView
            android:layout_width="800dp"
            android:layout_height="600dp"
            android:id="@+id/blueprintWebView"
            android:layout_gravity="center" android:layout_margin="100dp"/>
    <LinearLayout
            android:orientation="vertical"
            android:layout_width="150dp"
            android:layout_height="fill_parent" android:layout_gravity="right" android:layout_marginRight="80dp"
            android:gravity="center_vertical|right" android:baselineAligned="false">
        <RelativeLayout
                android:layout_width="fill_parent"
                android:layout_height="150dp">
            <ImageView
                    android:layout_width="fill_parent"
                    android:layout_height="150dp"
                    android:id="@+id/imageButton01" android:src="@drawable/icon_printer"
                    android:adjustViewBounds="false"
                    android:longClickable="false"
                    android:cropToPadding="false" android:scaleType="fitCenter" android:layout_marginTop="20dp"
                    android:layout_marginBottom="20dp"/>
            <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:id="@+id/markerButton01" android:src="@drawable/icon_marker_pink"
                    android:scaleType="fitCenter" android:cropToPadding="false" android:visibility="visible"
                    android:focusableInTouchMode="false" android:alpha="0" android:adjustViewBounds="false"/>
        </RelativeLayout>
        <RelativeLayout
                android:layout_width="fill_parent"
                android:layout_height="150dp">
            <ImageView
                    android:layout_width="fill_parent"
                    android:layout_height="150dp"
                    android:id="@+id/imageButton02" android:src="@drawable/icon_printer"
                    android:scaleType="fitCenter" android:layout_marginTop="20dp" android:layout_marginBottom="20dp"/>
            <ImageView
                    android:layout_width="wrap_content" android:layout_height="wrap_content"
                    android:id="@+id/markerButton02" android:src="@drawable/icon_marker_pink"
                    android:scaleType="fitCenter" android:cropToPadding="false" android:visibility="visible"
                    android:focusableInTouchMode="false" android:alpha="0" android:adjustViewBounds="false"
                    android:baselineAlignBottom="false"/>
        </RelativeLayout>
        <RelativeLayout
                android:layout_width="fill_parent"
                android:layout_height="150dp">
            <ImageView
                    android:layout_width="fill_parent"
                    android:layout_height="150dp"
                    android:id="@+id/imageButton03" android:src="@drawable/icon_printer" android:cropToPadding="false"
                    android:scaleType="fitCenter" android:layout_marginBottom="20dp" android:layout_marginTop="20dp"/>
            <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content"
                         android:id="@+id/markerButton03" android:src="@drawable/icon_marker_pink"
                         android:scaleType="fitCenter" android:cropToPadding="false" android:visibility="visible"
                         android:focusableInTouchMode="false" android:alpha="0" android:adjustViewBounds="false"
                         android:baselineAlignBottom="false" android:focusable="false"/>
        </RelativeLayout>
    </LinearLayout>
</LinearLayout>

我非常感谢你帮我解决这个小问题

问候,

---

指节

你可能需要自己重新计算捏的位置。我不知道webview是否允许您获取有关其缩放状态等信息。 也许您希望切换到这种方法，让您完全控制缩放过程：

另一种方法是使用javascript在webview中显示标记。但这只是在您对web开发感兴趣的情况下