Image 中图片超出指定高度 截取上面部分 的问题 - HarmonyOS 鸿蒙Next

Image 中图片超出指定高度 截取上面部分 的问题 - HarmonyOS 鸿蒙Next 【设备信息】Mate60

【API版本】Api13

【DevEco Studio版本】5.0.7.200

【问题描述】

Image 中图片超出指定高度 想要截取上面部分,这么做?

3 回复

更多关于Image 中图片超出指定高度 截取上面部分 的问题 - HarmonyOS 鸿蒙Next的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


参考demo

//比例宽度填满 高度自适应且超出指定高度裁剪
@Entry
@Component
struct Page {
  build() {
    Column({ space: 20 }) {
      Scroll() {
        Image($r('app.media.startIcon'))
          .objectFit(ImageFit.Cover) //按比例缩放且不小于边界
      }
      .width('100%')
      .height(200) //需要设置的图片高度
      .scrollBar(BarState.Off) // 滚动条常驻显示
      .enabled(false) //禁用滑动
    }
    .width("100%")
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

在HarmonyOS鸿蒙Next中,如果Image组件中的图片超出指定高度并需要截取上面部分,可以使用clip属性。clip属性允许你对图片进行裁剪,以显示指定区域。具体实现可以通过设置clipRect参数来定义裁剪区域。例如,使用Rect(0, 0, width, height),其中widthheight分别为图片的宽度和指定高度,这样可以确保只显示图片的上半部分。此外,还可以结合scaleType属性来控制图片的缩放方式,确保裁剪效果符合预期。

回到顶部