HarmonyOS 鸿蒙Next：请问鸿蒙ArkUI上如何确保图片的四个角不拉伸，拉伸指定位置，类似安卓点9和iOS上resizableImageWithCapInsets

iOS上:

UIImage *newImage = [norImage resizableImageWithCapInsets:UIEdgeInsetsMake(h, w, h, w)

resizingMode:UIImageResizingModeStretch]; 的操作来指定拉伸位置，

请问应该如何操作？

我在设置Row的背景时候，怎么设置指定区域去拉伸, 类似微信的气泡，不让气泡变形

Row() {
xxx
}
.backgroundImage($r(‘app.media.jk_mine_badge_bubble’))

yuanlaile 1楼•1 个月前

backgroundImageSize

backgroundImageSize(value: SizeOptions | ImageSize)

设置组件背景图片的宽高。

ImageSize

从API version 9开始，该接口支持在ArkTS卡片中使用。

类型	描述
Cover	默认值，保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界。
Contain	保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内。
Auto	保持原图的比例不变。

ionicwang 2楼•1 个月前

请问这个问题解决了吗？怎么实现呀？

gougou168 3楼•1 个月前

在HarmonyOS的ArkUI中，要实现图片四个角不拉伸，同时拉伸指定位置的效果，可以借鉴安卓的点9图片（.9.png）或iOS的resizableImageWithCapInsets方法。虽然HarmonyOS直接不支持.9图片格式，但可以通过设置图片的resizable属性来达到类似效果。

具体步骤如下：

准备图片：确保你的图片资源适合拉伸，即图片的中间部分是可以拉伸的，而四个角及边缘部分应保持不变。
设置resizable属性：在ArkUI中，可以通过Image组件的resizable属性来设置图片的拉伸区域。你需要指定不拉伸的上下左右边界（slice），这些边界内的内容在图片拉伸时将保持不变。

示例代码（假设使用TypeScript和ArkTS框架）：
```
Image($r('app.media.your_image'))
  .resizable({ slice: { top: 10, right: 10, bottom: 10, left: 10 } })
  .width('100%')
  .height('100%')
```
这里slice属性定义了图片顶部、右侧、底部和左侧不拉伸的像素数。
调整布局：根据实际需求调整Image组件的宽高，以确保图片正确显示。

如果问题依旧没法解决，请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html。同时，也可以参考华为开发者官网的相关文档和社区讨论，获取更多帮助。