HarmonyOS鸿蒙Next中ArkTS有没有类似OC中resizableImageWithCapInsets可以局部拉伸图片的函数？

HarmonyOS鸿蒙Next中ArkTS有没有类似OC中resizableImageWithCapInsets可以局部拉伸图片的函数？

3 回复

https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-image#resizable11

Image(this.imgUrl)
  .width('100%')
  .height(100)
  .resizable({
    slice: {
      top: '44%',
      bottom: '45%',
      left: '10%',
      right: '89%',
    }
  })

更多关于HarmonyOS鸿蒙Next中ArkTS有没有类似OC中resizableImageWithCapInsets可以局部拉伸图片的函数？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next的ArkTS中，可以使用Image组件的objectFit属性结合borderImage实现类似功能。具体可通过borderImageSlice设置九宫格切分区域，使用borderImageWidth定义拉伸区域。示例代码片段：

Image($r('app.media.example'))
  .borderImage({
    source: $r('app.media.example'),
    slices: {top: 20, right: 20, bottom: 20, left: 20},
    width: {top: 20, right: 20, bottom: 20, left: 20},
    repeat: 0 /* RepeatStyle.None */
  })
  .objectFit(ImageFit.Fill)

该方式通过九宫格参数控制图片的可拉伸区域。

在HarmonyOS Next的ArkTS中，确实提供了类似的图片局部拉伸功能。可以使用Image组件的resize和borderRadius属性来实现类似OC中resizableImageWithCapInsets的效果。

具体实现方式如下：

  1. 使用Image组件时设置resize属性为ResizeMode.Cover或ResizeMode.Contain
  2. 通过borderRadius属性设置图片的圆角区域（相当于OC中的cap insets）
  3. 结合clip属性来控制图片的裁剪区域

示例代码：

Image($r('app.media.example'))
  .resize(ResizeMode.Cover)
  .borderRadius({ 
    topLeft: 20,
    topRight: 20,
    bottomLeft: 20,
    bottomRight: 20 
  })
  .clip(true)

这种方式可以实现图片的局部拉伸而不失真，特别适合用于按钮背景等需要适配不同尺寸的场景。

回到顶部