【HarmonyOS NEXT应用开发】案例116：基于ArkUI实现类似.9图的拉伸能力

于 2024-09-05 11:25:50 发布
阅读量32 收藏
点赞数
分类专栏： HarmonyOS鸿蒙系统应用开发高级课程（100集） HarmonyOS Next应用开发案例 文章标签： harmonyos 华为 华为云 华为od 算法
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xzs51job/article/details/141926438
版权

场景描述

应用聊天界面简单气泡的拉伸实现。

效果图

最上方是未被拉伸的气泡图效果。

方案描述

分别使用backgroundImageResizable和resizable实现聊天气泡的拉伸。

backgroundImageResizable和resizable使用详解。

文档提供的图片，在设置了top、right、bottom、left四个参数后，图上的4角也就是1234区域不会被拉伸，关键点在于这4个参数的大小必须是原图的基础上的大小，所以需要将原图像素值转为vp后，在此基础上来确认参数。

效果图

了解本专栏 订阅专栏 解锁全文 超级会员免费看
青少年编程作品集
关注
专栏目录
订阅专栏
HarmonyOS从基础到实战-高性能华为在线答题元服务
一键难忘的博客
11-21 13万+
HarmonyOS从基础到实战-高性能华为在线答题元服务 在本文中，我们介绍了一个关于在线答题应用的项目，其中包括项目结构和开发计划。项目主要分为主应用的Ability（entryability）、卡片的Ability（Entnyformability）、从云数据库导出的数据类型（Models）以及页面代码文件夹（Pages）等模块。使用了两个重要的配置文件，分别是agconnect-services.json和schema.json，用于连接serverless服务和云端配置信息。
基于ArkUI实现类似.9图的拉伸能力
hongxiaomeng的博客
07-23 424
HarmonyOS实战开发-边框或背景图片拉伸案例
2401_82546228的博客
05-14 1090
HarmonyOS上不支持.9资源文件进行安全拉伸。 作为替代方案，本案例中商城页面的促销标签边框使用同一张图片资源，通过设置图片的resizable属性，展示不同长度的促销标签效果。
【鸿蒙应用开发基础】常用组件Image详解
HarmonyOS_001的博客
06-13 1562
在本文中，我们向你展示了如何使用 Image 组件。通过学习 Image 组件的用法，你可以在鸿蒙 ArkUI 中轻松地展示各种精美的图片，提升用户体验。总的来说，华为鸿蒙不再兼容安卓，对中年程序员来说是一个挑战，也是一个机会。随着鸿蒙的不断发展以及国家的大力支持,未来鸿蒙职位肯定会迎来一个大的爆发,只有积极应对变化，不断学习和提升自己，我们才能在这个变革的时代中立于不败之地。
【HarmonyOS NEXT】适配iPad体验，图片局部拉伸如何实现
Mayism123的博客
03-08 619
图片局部拉伸的iOS效果，例如：https://www.jianshu.com/p/84848c1b2d47的处理方式。适配 / iPad / 图片 / 局部拉伸 / ResizableOptions。当前已有图片ResizableOptions拉伸能力。现在鸿蒙有指定图片可以局部拉伸处理的方案吗？适配iPad体验 ，图片局部拉伸如何实现？
鸿蒙Harmony应用开发—ArkTS声明式开发（通用属性：背景设置）
m0_64420071的博客
03-01 8720
ArkTS声明式开发（通用属性：背景设置）
HarmonyOS系统应用开发基础入门
Crowd_chips的博客
07-08 780
ArkUI基础入门知识点
鸿蒙Harmony应用开发—ArkTS声明式开发（容器组件：Flex）
m0_64420071的博客
03-14 1273
ArkTS声明式开发（容器组件：Flex）
鸿蒙Harmony应用开发—ArkTS声明式开发（通用属性：尺寸设置）
m0_64420071的博客
03-01 4574
ArkTS声明式开发（通用属性：尺寸设置）
【HarmonyOS NEXT】如何实现图片局部拉伸
Mayism123的博客
05-16 515
适配iPad，图片需要局部拉伸处理，比如iOS的https://www.jianshu.com/p/84848c1b2d47。鸿蒙有指定图片可以局部拉伸处理的解决方案吗？ResizableOptions属性可以实现图片局部拉伸。图片 / 局部拉伸 / iOS。
【鸿蒙实战教程】华为HarmonyOS NEXT 开发一个简单的聊天界面
HarmonyOS_001的博客
06-17 1192
总的来说，华为鸿蒙不再兼容安卓，对中年程序员来说是一个挑战，也是一个机会。随着鸿蒙的不断发展以及国家的大力支持,未来鸿蒙职位肯定会迎来一个大的爆发,只有积极应对变化，不断学习和提升自己，我们才能在这个变革的时代中立于不败之地。
ArkTS中background相关的方法详细介绍
最新发布
LIUCHANGSHUO的博客
08-29 1118
当设置的背景图片为透明底色图片，且同时设置了backgroundColor时，二者叠加显示，背景颜色在最底部。同时设置了background，backgroundColor，backgroundImage时，叠加显示，background在最上层。当设置top+bottom大于原图的高或者left+right大于原图的宽时，ResizableOptions属性设置不生效。params:设置组件背景提亮效果，包括：亮度变化速率，提亮程度。options:设置组件背景属性包括：饱和度，亮度，颜色。
【ArkTS】鸿蒙开发 在用户界面点击图片实现图片旋转和图片缩小动画
m0_66128366的博客
03-22 2353
为了实现图片点击旋转、缩放、位移等功能，我主要应用了多态样式：stateStyles()属性和动画animation（）属性，具体用法可以参考官网给出的说明：stateStyles()属性： https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V2/arkts-statestyles-0000001482592098-V2。
鸿蒙开发-UI-组件-气泡/菜单
中年程序员
01-31 1885
上文主要学习了鸿蒙开发UI组件（文本输入、自定义弹窗、视频播放）的使用，详细学习了文本输入组件的样式定义以及事件添加，简单学习了默认弹窗以及模式视频播放器组件的使用，详细学习了自定义弹窗的使用步骤以及自定义视频播放的开发步骤。本文将学习鸿蒙开发UI气泡提示与菜单。开发者可以使用构建器CustomPopupOptions创建自定义气泡，@Builder中可以放自定义的内容。除此之外，还可以通过popupColor等参数控制气泡样式代码示例@Entry@Component。
【HarmonyOS NEXT】如何实现类似点9图的自动拉伸效果，背景长宽比自适应伸缩，四个角及右侧箭头保持不变
Mayism123的博客
06-05 330
使用borderImage来实现类似点9图的自动拉伸效果，但是borderImage只能设置四个角，如果类似聊天气泡的背景图如何自适应伸缩呢。Image组件有ResizableOptions属性，在图像拉伸时可调整大小的图像，自适应伸缩 / Image组件 / ResizableOptions。如下图实现背景长宽比自适应伸缩，四个角及右侧箭头保持不变。
HarmonyOS鸿蒙开发指南:基于ArkTS开发 折叠屏动态布局
sybh的博客
01-11 597
自适应布局随着屏幕设备规格的变化，界面中所呈现的信息量有所增加，但信息架构不变。常见的表现形式为：相对拉伸、相对缩放、延伸布局等。
HarmonyOS 开发-图片九宫格封装案例
1
04-09 1176
本示例介绍使用(Flex组件实现图片在不同个数情况下的布局效果(默认布局和自定义布局)。该场景多用于社交类应用。
HarmonyOS Next 图片九宫格封装案例
shudaoshanQAQ的博客
03-26 749
该场景多用于社交类应用。
鸿蒙ArkTS声明式组件：【Image】
2401_82772199的博客
06-23 2332
Image为图片组件，常用于在应用中显示图片。Image支持加载\[PixelMap]、\[ResourceStr]和\[DrawableDescriptor]类型的数据源，支持png、jpg、bmp、svg和gif类型的图片格式。
HarmonyOS NEXT应用开发性能优化指南
资源摘要信息:"本文档为《HarmonyOS NEXT应用开发性能指导》的资源摘要，旨在为开发者提供关于HarmonyOS NEXT应用开发的性能优化建议和实际案例分析。HarmonyOS NEXT是华为推出的操作系统，旨在为多种设备提供统一的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

青少年编程作品集

你的赞赏将带来极佳的运气和才气

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值