当前位置：首页 > article >正文

鸿蒙中如何实现图片拉伸效果

article 2024/11/18 6:16:44

2024年10月22日，华为发布会上，推出鸿蒙5.0。现在加入恰逢时机，你，我皆是鸿蒙时代合伙人。无论为了学习技术，还是为了谋福利，在鸿蒙的浩瀚海洋中分到一杯羹。现在学习鸿蒙正当时。

一文了解鸿蒙中图片拉伸的使用。鸿蒙中图片可以实现拉伸吗，可以像安卓的.9图一样任意拉伸吗，可以像iOS一样以任意位置拉伸吗，鸿蒙中图片怎么拉伸，目前鸿蒙中图片拉伸存在哪里问题，通过本文阅读让我们来一起了解。

一、鸿蒙中图片可以拉伸吗？

鸿蒙中图片肯定可以拉伸。

image组件不设置大小即宽度高度，不设置默认比例是任意拉伸的

二、鸿蒙中图片怎么拉伸？

目前图片拉伸有二种方法通过Image组件设置和通过设置组件背景实现。

（1）通过设置组件背景实现

backgroundImage：设置需要拉伸的图片信息

backgroundImageSize：设置图片大小宽度、高度

backgroundImageResizable：设置图片上下左右切片，表示那部分不拉伸。

设置不拉伸的位置。

slice: { top: this.top, bottom: this.bottom, left: this.left, right: this.right, }

在使用图片拉伸时候，需要确定好，slice中上下左右的数据，否则会造成图片不按照设置的拉伸。无法达到预期效果。对于left,top，right,bottom 几个值的设置是有要求的，如果超过某个值设置的将会无效。

设置图像拉伸时可调整大小的图像选项。拉伸对拖拽缩略图以及占位图有效。

设置合法的 ResizableOptions 时，objectRepeat 属性设置不生效。

当设置 top +bottom 大于原图的高或者 left + right 大于原图的宽时 ResizableOptions 属性设置不生效。

当组件的参数类型为AnimatedDrawableDescriptor时设置该属性不生效。

Text(this.message)
  .padding({
    left: 10,
    right: 10,
    top: 10,
    bottom: 10
  })
  .constraintSize({ minHeight: 40, maxWidth: 200 })
  .id('HelloWorld')
  .fontSize(14)
  .fontWeight(FontWeight.Bold)
  .alignRules({
    center: { anchor: '__container__', align: VerticalAlign.Center },
    middle: { anchor: '__container__', align: HorizontalAlign.Center }
  })
  .onSizeChange((oldValue: SizeOptions, newValue: SizeOptions) => {
    this.needWidth = newValue.width
    this.needHeight = newValue.height
    hilog.error(1, "",
      `oldValue: width :${oldValue.width}  height :${oldValue.height}  newValue: width :${newValue.width}  height :${newValue.height}`)
  })
.backgroundImageResizable({
  slice: {
    top: this.top,
    bottom: this.bottom,
    left: this.left,
    right: this.right,
  }
})
.backgroundImageSize({
  width: this.needWidth,
  height: this.needHeight
})
.backgroundImage($r("app.media.message_right_bubble")

（2）通过设置完全相同大小的Image组件实现

利用设置完全相同的Image组件实现，和通过设置组件背景实现基本相同，这里只讲叙其中的差异。

首先获取组件大小，把组件大小设置给Image大小，对Image设置resizable切片实现效果。与设置背景基本上完全一致。达到的效果和存在的问题也基本上一致。

Image($r("app.media.message_right_bubble"))
  .width(this.needWidth)
  .height(this.needHeight)
  .resizable({
    slice: {
      top: this.top,
      bottom: this.bottom,
      left: this.left,
      right: this.right,
    }
  })
  .alignRules({
    bottom: { anchor: "HelloWorld", align: VerticalAlign.Bottom },
    top: { anchor: "HelloWorld", align: VerticalAlign.Top },
    left: { anchor: "HelloWorld", align: HorizontalAlign.Start },
    right: { anchor: "HelloWorld", align: HorizontalAlign.End }
  })
  .backgroundColor(Color.Red)

三、鸿蒙中图片拉伸在App中有哪些用途？

在聊天消息中，我们经常消息泡泡，或者一些背景图片需要通过拉伸设置，因为消息泡泡需要根据文字数量确定，长度宽度都是不固定的，所以需要通过图片的拉伸来实现泡泡的效果。

四、鸿蒙图片拉伸目前存在哪里问题？

我们在使用图片拉伸过程中想实现完全类似安卓.9图片的效果或者实现类似IOS中以某个位置拉伸，是达不到的。目前鸿蒙的图片拉伸存在一定问题，简单的图片拉伸功能基本可以实现，但是如果想以中间某个位置拉伸，现在是达不到。

我写的例子中分别以可以调整左上右下的切片距离。

当图片1左右分别为10时候，看着拉伸还算凑合，能看。

当图片2左右15,20时候，才看着正常。

当图片3，左边15，右边继续拉伸，到35 时候整个图片拉伸就失效。

虽然没有超过官文文档提示的， left + right 大于原图的宽时 ResizableOptions 属性设置不生效。

此时：left+right = 15 + 35 = 50 小于当前实际宽度是194，但是此时已经失效了。

此问题已经反馈给华为，但是此时还没有解决方案。这是很多问题用它无法达到预期的效果。

阅读本文章，我们已经了解了鸿蒙中图片拉伸的的实现，可以按照上边的方法实现简单的图片拉伸效果，对于复杂的图片拉伸还需要研究，华为暂时也没有提供更好的解决方案，如果你有好的解决方案欢迎一起探讨；利用backgroundImage，设置图片的背景，通过backgroundImageSize设置图片的大小，通过backgroundImageResizable设置图片的切片左上右下达到我们要求的图片拉伸效果。本章节就介绍这些东西。后续章节我将依次从简入深，讲解鸿蒙的开发中遇到各种问题。欢迎大家一起交流。如果你在鸿蒙开发中遇到难点，不会的可以私信我，根据我最近的开发经历，已经基本踩完大部分坑，一起交流使我们共同进步。