# 如何控制Image组件的点击响应区域

#### 问题现象

在Image组件展示图片时，发现了如下问题：

1.  如何扩大Image组件的有效触控面积？
2.  对于视觉面积远小于点击区域的Image组件，如何将点击事件限制在固定区域内触发？

#### 背景知识

*   Image：图片组件，常用于在应用中显示图片。
*   responseRegion：设置一个或多个触摸热区。

#### 解决方案

针对问题一：通过配置responseRegion中Rectangle对象的width和height属性，可调整组件的点击区域范围，其实际响应区域为width和height所定义的矩形范围。当width或height设置为100%时，响应区域将恢复为组件原有的默认区域。

示例代码如下：

```
@Entry
@Component
struct Index1 {
  build() {
    Column() {
      // 本地资源，使用时自行替换
      Image($r('app.media.startIcon'))
        .width(150)
        .height(150)
        .border({ width: 1 })
        .onClick(() => {
          this.getUIContext().getPromptAction().showToast({
            message: '已触发'
          });
        })
        .responseRegion({
          x: '-50%',
          y: '-50%',
          width: 300,
          height: 300
        });
    }
    .width('100%')
    .height('100%')
    .alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center);
  }
}
```

针对问题二：由于Image是矩形组件，绑定点击手势的话也是整个Image组件范围，不规则图片只是里面图形不规则，图片宽高还是固定的宽高，所以无法使用Image组件来达到理想的效果。此时可以通过Stack组件在Image组件上面覆盖一个更小的Column组件，并给Column组件绑定点击事件来触发图片效果。

示例代码如下：

```
@Entry
@Component
struct Index3 {
  build() {
    Stack() {
      // 本地资源，使用时自行替换
      Image($r('app.media.startIcon'))
        .width('300')
        .height('300')
        .border({ width: 1 });
      Column() {
      }
      .width('40%')
      .height('280')
      .justifyContent(FlexAlign.Center)
      .backgroundColor(Color.Gray)
      .opacity(0.5) //实际使用可以把不透明度降为0
      .onClick(() => {
        this.getUIContext().getPromptAction().showToast({
          message: '已触发'
        });
      });
    }
    .width('100%')
    .height('100%');
  }
}
```