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设置图片的切片左上右下达到我们要求的图片拉伸效果。本章节就介绍这些东西。后续章节我将依次从简入深，讲解鸿蒙的开发中遇到各种问题。欢迎大家一起交流。如果你在鸿蒙开发中遇到难点，不会的可以私信我，根据我最近的开发经历，已经基本踩完大部分坑，一起交流使我们共同进步。
