如何在ImageView上定义可点击区域（类似HTML图片映射）

一、解决ClickableAreasImages库的编译问题 #

你遇到的编译失败是因为该库硬编码依赖了旧版本的PhotoView，可通过Gradle的依赖排除功能解决：

implementation ('com.github.Lukle:ClickableAreasImages:v0.1') {
    exclude group: 'com.github.chrisbanes', module: 'PhotoView'
}
implementation 'com.github.chrisbanes:PhotoView:2.0.0'

这样就能强制使用你指定的新版PhotoView，避免依赖冲突。

二、无需第三方库，手动实现点击区域判断 #

如果不想依赖第三方库，也可以自己实现核心逻辑，步骤如下：

1. 处理坐标转换（适配图片缩放） #

如果使用PhotoView实现图片缩放，需要将屏幕点击坐标转换为图片原始坐标：

PhotoView mapPhotoView = findViewById(R.id.campus_map);
mapPhotoView.setOnTouchListener((v, event) -> {
    if (event.getAction() == MotionEvent.ACTION_UP) {
        // 获取屏幕点击坐标
        float screenX = event.getX();
        float screenY = event.getY();
        
        // 转换为图片原始坐标
        Matrix invertMatrix = new Matrix();
        mapPhotoView.getImageMatrix().invert(invertMatrix);
        float[] originalPoints = {screenX, screenY};
        invertMatrix.mapPoints(originalPoints);
        float originalX = originalPoints[0];
        float originalY = originalPoints[1];
        
        // 判断点击区域
        handleMapClick(originalX, originalY);
    }
    return false;
});

2. 定义点击区域并处理事件 #

通过计算点击点与目标点的距离（或使用矩形区域）判断是否命中，示例：

private void handleMapClick(float x, float y) {
    int clickRadius = 10; // 点击判定半径
    
    // 音乐教室
    if (Math.hypot(x - 30, y - 70) <= clickRadius) {
        Toast.makeText(this, "点击音乐教室", Toast.LENGTH_SHORT).show();
        return;
    }
    // 校园花园
    if (Math.hypot(x - 120, y - 80) <= clickRadius) {
        startActivity(new Intent(this, SchoolGardenActivity.class));
        return;
    }
    // 图书馆
    if (Math.hypot(x - 60, y - 50) <= clickRadius) {
        // 处理图书馆点击逻辑
        return;
    }
    // 食堂
    if (Math.hypot(x - 60, y - 40) <= clickRadius) {
        // 处理食堂点击逻辑
        return;
    }
    // 主办公室
    if (Math.hypot(x - 70, y - 60) <= clickRadius) {
        // 处理主办公室点击逻辑
        return;
    }
}

三、替代库推荐：android-image-map #

如果需要更简洁的实现，可以尝试android-image-map库，依赖兼容较好：

implementation 'com.github.devsideal:android-image-map:1.0.1'

使用示例：

ImageMapView imageMapView = findViewById(R.id.campus_map_view);
// 添加音乐教室点击区域（x,y,宽度,高度,点击回调）
imageMapView.addArea(new Area(30, 70, 20, 20, () -> {
    Toast.makeText(this, "点击音乐教室", Toast.LENGTH_SHORT).show();
}));
// 添加校园花园点击区域
imageMapView.addArea(new Area(120, 80, 20, 20, () -> {
    startActivity(new Intent(this, SchoolGardenActivity.class));
}));
// 其他区域同理添加

内容的提问来源于stack exchange，提问作者anta40