HarmonyOS 鸿蒙Next如何使一张图片拉伸但不变形

比如聊天气泡，长方形带有弧度，宽度根据内容拉伸，拉伸后保持弧度不变，该如何实现

可通过Image设置resizable属性设置
参考文档：Image-图片与视频-ArkTS组件-ArkUI（方舟UI框架）-应用框架 - 华为HarmonyOS开发者

[@Builder](/user/Builder)
function BubbleBackground() {
  Image($r('app.media.tess'))
    .objectFit(ImageFit.Fill)
    .resizable({
      slice: {
        left: 18,
        right: 18,
        top: 18,
        bottom: 18
      }
    })
    .width("100%")
    .height("100%")
}
[@Entry](/user/Entry)
[@Component](/user/Component)
struct Index {
  build() {
    Row() {
      // 布局
      Column() {
        Text("测试测试测试测试测试测试测试测试测试测试\nfasdfasdfadfasdfasdf")
          .fontColor(Color.Black)
      }
      .padding(10)
      .background(BubbleBackground)
    }
    .height('100%')
  }
}

yuanlaile 2楼•9 天前

在HarmonyOS鸿蒙Next中，要使一张图片拉伸但不变形，可以通过以下方式实现：

利用Image组件的resizable属性：自API 11+起，Image组件新增了resizable属性，它允许你设置图像在拉伸时可调整大小的选项。你需要指定不拉伸的上下左右边界（slice），这些边界内的内容在图片拉伸时将保持不变。关键在于将slice对象的top、right、bottom、left四个参数设置正确，这些参数的大小必须基于原图的大小进行转换，通常需要将原图像素值转为vp（视口单位）后再进行确认。
使用backgroundImageResizable属性：在特定场景下，你可以通过给Text组件或其他容器组件设置背景图片，并使用backgroundImageResizable属性来限定背景图的拉伸区域，确保在拉伸过程中图片的特定部分不会被拉伸变形。

通过以上方法，你可以在HarmonyOS鸿蒙Next中实现图片的拉伸效果，同时保持图片的关键部分不变形。如果问题依旧解决没法请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html 。