0

我需要使这个可点击的图像类似于 HTML 中的 imageMap。我还需要在可点击区域上放置一个图标（在中心，有点像地图标记），但是我如何考虑图像大小的调整？

即我的图像可能是 800x600，可点击区域可能是 20,20 和 60,40 覆盖的矩形，但是当这些像素没有显示在完美像素上时，这些像素实际上不再指代图像中的相同位置时尚。

编辑：我的图像是从 sdcard 中获取的，而不是从可绘制文件夹中获取的

4

1 回答 1

-1

这是我在这个链接中找到的

我发现自己需要显示图像并让用户点击图像的不同部分来导航和执行操作。在勾勒出我需要的东西之后，很明显我想要的是一个类似于 HTML 地图标签的东西，但是在 Android 视图中。再想一想，我决定这将是一个有用的小部件。

结果代码：

支持在布局中作为可绘制或位图的图像 允许在 xml 中列出区域标签 允许使用剪切和粘贴 HTML 区域标签到资源 xml（即，能够获取 HTML 地图和图像并在最少编辑的情况下使用它） 支持如果图像大于设备屏幕，则平移支持捏缩放支持点击区域时的回调。支持将注释显示为气泡文本并在点击气泡时提供回调代码可以在GitHub找到 - Android Image Map

2012 年 3 月 2 日更新：添加了始终使用原始图像位调整图像大小的选项。某些图像在上下调整大小时会损失很多图像质量。始终从原始位调整大小可提供最佳图像，但需要额外的内存。权衡现在取决于您。

这里有一些关于实现的快速说明，我将在后续帖子中详细介绍一些关键领域。

将地图与 img 关联起来的难易程度与在 HTML 中的 img 标签中关联的难易程度相匹配。只需提供要在布局中使用的地图名称：

<!--?xml version="1.0" encoding="utf-8"?-->
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:ctc="http://schemas.android.com/apk/res/com.ctc.android.widget"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
    <com.ctc.android.widget.ImageMap  
        android:id="@+id/map"
        android:layout_width="fill_parent" 
        android:layout_height="fill_parent" 
        android:src="@drawable/usamap"
        ctc:map="usamap"/>
</LinearLayout>

区域地图在您的项目中的 res/xml/map.xml 中指定。与 HTML 地图的一个区别是每个区域都必须有一个 id。我在这个要求上反复讨论，我可能会更改代码以允许没有 id 的区域。如果存在，代码将使用 name 属性，否则它将查找 title 或 alt。当前的实现还需要为每个区域命名，尽管这可以很容易地更改。

<!--?xml version="1.0" encoding="utf-8"?-->
<maps xmlns:android="http://schemas.android.com/apk/res/android">
    <map name="gridmap">
        <area id="@+id/area1001" shape="rect" coords="118,124,219,226" />
        <area id="@+id/area1002" shape="rect" coords="474,374,574,476" />
        <area id="@+id/area1004" shape="rect" coords="710,878,808,980" />
        <area id="@+id/area1005" shape="circle" coords="574,214,74" />
        <area id="@+id/area1006" shape="poly" coords="250,780,250,951,405,951" />
        <area id="@+id/area1007" shape="poly" coords="592,502,592,730,808,730,808,502,709,502,709,603,690,603,690,502" />
    </map>
    <map name="usamap">
        <area id="@+id/area1" shape="poly" coords="230,35,294,38,299,57,299,79,228,79" />
...
     </map>
</maps>

图像本身放置在 res/drawable-nodpi 中，以便系统不会尝试根据 dpi 将图像适合设备。这样我们就可以保证我们的区域坐标将正确地映射到显示的图像。

这是一个在布局中查找视图并添加点击处理程序的示例活动

public class ImageMapTestActivity extends Activity {
    ImageMap mImageMap;

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

        // find the image map in the view
        mImageMap = (ImageMap)findViewById(R.id.map);

        // add a click handler to react when areas are tapped
        mImageMap.addOnImageMapClickedHandler(new ImageMap.OnImageMapClickedHandler() {
            @Override
            public void onImageMapClicked(int id) {
                // when the area is tapped, show the name in a
                // text bubble
                mImageMap.showBubble(id);
            }

            @Override
            public void onBubbleClicked(int id) {
                // react to info bubble for area being tapped
            }
        });
    }
}

希望这会有所帮助。

于 2013-02-05T12:13:25.430 回答