【HarmonyOS NEXT】如何实现类似点9图的自动拉伸效果，背景长宽比自适应伸缩，四个角及右侧箭头保持不变

最新推荐文章于 2024-11-06 10:00:17 发布
最新推荐文章于 2024-11-06 10:00:17 发布
阅读量327 收藏 2
点赞数 2
文章标签： harmonyos
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mayism123/article/details/139476459
版权

【关键字】

自适应伸缩 / Image组件 / ResizableOptions

【问题描述】

使用borderImage来实现类似点9图的自动拉伸效果，但是borderImage只能设置四个角，如果类似聊天气泡的背景图如何自适应伸缩呢。

如下图实现背景长宽比自适应伸缩，四个角及右侧箭头保持不变。

cke_492.png

【解决方案】

Image组件有ResizableOptions属性，在图像拉伸时可调整大小的图像，

请参考文档：

https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-image-0000001815927572#ZH-CN_TOPIC_0000001815927572__resizableoptions11

Mayism123
关注
从零开始的HarmonyOS Next开发指南：打造HarmonyOS NEXT元服务
一键难忘的博客
05-26 5829
DevEco Studio 4.0是一个集成开发环境（IDE），专门为开发者提供一站式的HarmonyOS应用和服务开发支持。以下是DevEco Studio 4.0的一些主要特点：高效智能代码编辑：支持多种语言，如ArkTS、JavaScript、C/C++等，提供代码高亮、智能补齐、错误检查、自动跳转、格式化、查找等功能，以提升代码编写的效率。低代码可视化开发：拥有丰富的UI界面编辑能力，支持自由拖拽组件和可视化数据绑定，能够快速预览效果，所见即所得。
鸿蒙HarmonyOS应用开发 | 深入解析 HarmonyOS Next 中的仓颉语言
一键难忘的博客
09-29 2974
仓颉语言是专为 HarmonyOS Next 设计的编程语言，它具有简洁、高效、易读易写等特点。仓颉语言借鉴了多种现代编程语言的优点，同时结合了 HarmonyOS Next 的特性，使得开发者能够更加高效地开发出高质量的应用。仓颉语言在 HarmonyOS Next 开发中具有重要的地位，它的简洁性、高效性和与 HarmonyOS Next 的深度融合，使得开发者能够更加轻松地开发出高质量的应用。随着 HarmonyOS Next 的不断发展，仓颉语言也将不断完善和壮大，为开发者带来更多的惊喜和便利。
HarmonyOS实战开发-边框或背景图片拉伸案例
2401_82546228的博客
05-14 1086
HarmonyOS上不支持.9资源文件进行安全拉伸。 作为替代方案，本案例中商城页面的促销标签边框使用同一张图片资源，通过设置图片的resizable属性，展示不同长度的促销标签效果。
设置 border 边框单侧样式 - HarmonyOSNext
survivorsfyh的博客
05-27 470
设置 border 边框单侧样式 - HarmonyOSNext
鸿蒙HarmonyOS NEXT开发：Image（基础组件）
shudaoshanBBQ的博客
08-15 2189
Image为图片组件，常用于在应用中显示图片。
鸿蒙Harmony应用开发—ArkTS声明式开发（通用属性：图片边框设置）
m0_64420071的博客
03-01 1789
ArkTS声明式开发（通用属性：图片边框设置）
【HarmonyOS NEXT】Image控件加载图片缓存问题
Mayism123的博客
03-22 715
是否有方案能实现下述业务需求：图片在app全局使用缓存，在特定场景下实时从服务端获取，例如加载用户头像时，业务一旦将图片下线处理，图片找不到时需要恢复默认。图片有内存缓存机制，会统计到当前APP，缓存采用内置的LRU策略，新图片加载后，如果超过缓存上限，会删除最久未再次加载的缓存。也可以不开启全局缓存，使用ImageKnife给图片单独设置缓存，部分场景下使用Image组件来设置图片不缓存。目前ArkUI提供的Image组件原生能力，无法满足全局缓存、部分场景下不缓存的业务场景。
【HarmonyOS NEXT】适配iPad体验，图片局部拉伸如何实现
Mayism123的博客
03-08 618
图片局部拉伸的iOS效果，例如：https://www.jianshu.com/p/84848c1b2d47的处理方式。适配 / iPad / 图片 / 局部拉伸 / ResizableOptions。当前已有图片ResizableOptions拉伸能力。现在鸿蒙有指定图片可以局部拉伸处理的方案吗？适配iPad体验 ，图片局部拉伸如何实现？
【面试一】
weixin_50337713的博客
04-26 4903
#2021·HTML5大前端企业面试真题宝典 第一部分：HTML5+CSS3 1、父元素和子元素宽高不固定，如何实现水平垂直居中 第一种方法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"
JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)
10-19
本文主要介绍使用JavaScript结合jQuery库实现自动轮播图效果，其特点包括自适应屏幕宽度和支持手机触屏滑动操作。轮播图广泛应用于网页设计中，用于展示一系列的图片或内容，通常放置在网站的首页或广告位，以吸引...
HarmonyOS从基础到实战-高性能华为在线答题元服务
热门推荐
一键难忘的博客
11-21 13万+
HarmonyOS从基础到实战-高性能华为在线答题元服务 在本文中，我们介绍了一个关于在线答题应用的项目，其中包括项目结构和开发计划。项目主要分为主应用的Ability（entryability）、卡片的Ability（Entnyformability）、从云数据库导出的数据类型（Models）以及页面代码文件夹（Pages）等模块。使用了两个重要的配置文件，分别是agconnect-services.json和schema.json，用于连接serverless服务和云端配置信息。
基于HarmonyOS NEXT开发智能提醒助手
软贱开发攻城狮
06-30 1万+
随着智能设备的普及和物联网技术的飞速发展，人们对于智能化、个性化服务的需求日益增加，智能设备已经深入到我们生活的方方面面。在这个智能化的时代，一款能够实时、精准地提供信息提醒的智能助手，在内卷严重的当下，对于提升个人工作效率、优化生活质量显得尤为重要，这样的背景下，智能提醒助手应运而生，成为了人们生活中不可或缺的一部分。智能提醒助手不仅可以帮助用户管理时间、提醒重要事项，还能根据用户的习惯和需求提供个性化的服务。
【HarmonyOS NEXT】如何实现图片局部拉伸
Mayism123的博客
05-16 512
适配iPad，图片需要局部拉伸处理，比如iOS的https://www.jianshu.com/p/84848c1b2d47。鸿蒙有指定图片可以局部拉伸处理的解决方案吗？ResizableOptions属性可以实现图片局部拉伸。图片 / 局部拉伸 / iOS。
基于ArkUI实现类似.9图的拉伸能力
hongxiaomeng的博客
07-23 422
HarmonyOS Next（鸿蒙星河版）侧载应用
最新发布
Dream It Possible
11-06 374
仅需登录华为账号, 开启手机开发者模式和usb调试，即可安装任意hap应用 (tip: 必须保持开发者模式才能正常使用哦)这个版本支持无线安装哦！github找到了个项目。
鸿蒙网络编程系列41-仓颉版HttpRequest模拟登录示例
长弓三石
10-31 1064
在本系列的第9篇文章《鸿蒙网络编程系列9-使用HttpRequest模拟登录示例》中，我们基于ArkTS语言在API 9的环境下使用HttpRequest发起HTTP请求，模拟了对目标网站的登录，本文将使用仓颉语言在API 12的环境中实现类似的功能。//创建一个HTTP请求，每一个HttpRequest对象对应一个HTTP请求,如需发起多个HTTP请求，须为每个请求创建对应对象。//根据URL地址，发起HTTP网络请求，在callback回调函数中返回响应。
HarmonyOS开发 - Ability往页面(Pages)中传递数据
觉醒法师的专栏
11-05 1016
在程序中，页面之间传递数据或数据共享，可以实现页面间的平滑过渡，避免重复加载数据，提高应用的响应速度和流量度；另外，数据传递机制使得页面更容易被重用，可以通过传入不同参数，来适应不同的上下文内容，以及根据需要传递数据，实现按需加载 ，减少内存消耗和提高应用的性能等。这篇将通过LocalStorage、EventHub、全局变量，以及Preferences用户首选项等功能，实现Ability向页面(Pages)中传递数据。
鸿蒙（Harmony）实现滑块验证码
yilylong的专栏
11-04 1032
鸿蒙原生实现滑块验证码
[HarmonyOS NEXT] arkts 实现一个带动画的圆角六边形环形进度条
09-10
在HarmonyOS NEXT (鸿蒙操作系统) 中，arkts 提供了丰富的组件和样式支持，包括动画效果和自定义控件。为了实现一个带有动画的圆角六边形环形进度条，你可以按照以下步骤操作： 1. **引入所需库**：首先，你需要导入相关的UI库和ArkUI组件，如`ArcProgress` 和 `RingProgress`，它们可能包含内置的动画功能。 ```java import com.harmonyos.arkui.widget.ArcProgress; import com.harmonyos.arkui.widget.RingProgress; ``` 2. **创建六边形环形进度条**：使用`RingProgress` 组件，设置其形状为六边形，并可以调整圆角属性以增加视觉吸引力。 ```java RingProgress ringProgress = new RingProgress(); ringProgress.setShape(RingProgress.Shape.HEXAGON); ringProgress.setBorderRadius(10); // 调整圆角大小 ``` 3. **设置进度**：通过`setProgress` 方法设定当前进度值，它会自动触发动画更新。 ```java ringProgress.setProgress(progressValue); ``` 4. **启用动画**：有些`RingProgress` 的子类可能会有内置动画，比如`ArcProgress`，如果需要，可以开启动画效果。 ```java ringProgress.setShowIndeterminateAnimation(true); // 如果需要无限循环动画 ringProgress.setProgressUpdateDuration(500); // 设置动画持续时间 ``` 5. **添加到布局中**：将环形进度条添加到你的视图层级结构中，如`LinearLayout`, `NestedLayout` 或者 ArkUI 的自适应布局上。 ```java rootView.addView(ringProgress); ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值