HarmonyOS 鸿蒙Next 圆角弧度图片如何仿照.9图片拉伸

发布于 1周前 作者 sinazl 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 圆角弧度图片如何仿照.9图片拉伸

在如下这个图上会展示文本，但是文本长度不固定（最长15个字），图片高度固定38VP，拉伸只拉伸中部

cke_479.png

现状：

使用Image的resizable进行处理后，图片左右两边的圆角无法在延长后保持原状

也使用用Button的backgroundImageResizable进行拉伸，效果就是圆角保住了，但是左右两边出去了一点，导致图片不太对

请求社区各位大佬帮忙解答，并附上OK的源码


更多关于HarmonyOS 鸿蒙Next 圆角弧度图片如何仿照.9图片拉伸的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
4 回复

给个思路：把从图片圆角结束的地方切开分别为bg1/bg2/bg3，分成3张。用row装3个组件分别设置三张背景图片，其中bg2的图片设置weight为1。

更多关于HarmonyOS 鸿蒙Next 圆角弧度图片如何仿照.9图片拉伸的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


楼主您好，当前Image对于点九图的使用是给Image组件设置resizable属性，达到图片局部拉伸的效果，建议试下一楼的思路。

我也遇到了这个问题，试了backgroundImageResizable和borderImage都不行，
backgroundImageResizable的slice改变1vp就把整张图都拉伸了…

在HarmonyOS鸿蒙Next中，实现圆角弧度图片的拉伸效果，而不使用Android的.9图片格式（因为鸿蒙系统不直接支持.9图片），你可以通过以下方式实现：

  1. 使用ShapeableImageView：鸿蒙系统提供了ShapeableImageView组件，可以用来设置图片的圆角。你可以通过设置ShapeableImageView的corner_size属性来调整圆角的弧度。

  2. 自定义布局与图片拉伸：如果需要在圆角图片上进行拉伸，可以考虑使用自定义布局，将图片分割成不同的部分（如九宫格），然后通过自定义布局的逻辑来模拟拉伸效果。这通常涉及到对图片不同部分的裁剪和重新组合。

  3. 使用Canvas绘制：在鸿蒙应用中，你也可以通过重写组件的onDraw方法，使用Canvas来手动绘制圆角图片，并在绘制过程中实现自定义的拉伸逻辑。

  4. 图片资源准备：为了确保拉伸效果的自然，你可能需要准备多张不同尺寸的图片资源，以适应不同的拉伸需求。

请注意，以上方法可能需要根据你的具体需求进行调整和优化。如果问题依旧没法解决请联系官网客服，官网地址是 https://www.itying.com/category-93-b0.html，

回到顶部