鸿蒙中如何实现图片拉伸效果

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/473300.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Unity 2022 Nav Mesh 自动寻路入门

untiy 2022 window-PackageManager-AINavigation 安装 Install 2.创建一个空物体命名Nav,在其自身挂载 NavMeshSurface 然后点击bake 烘焙地形即可 3.创建palyer和怪物 怪物AI代码 using System.Collections; using System.Collections.Generic; using UnityEngi…

基于gradio+networkx库对图结构进行可视化展示

前言 在gradio框架下对蛋白质-蛋白质相互作用网络(PPI网络)进行可视化,并将其在网页前端进行展示。 方法 其实很简单 可以直接使用networkx画图后保存图片,然后使用Gradio框架的image组件进行展示即可。 但实际上gradio还配置…

MSTP知识点

多生成树协议 在 MSTP(Multiple Spanning Tree Protocol)中,根桥(root)、指定端口(designated port)、备用端口(alternate port)等角色都是确保网络中没有循环并且流量能…

为正在运行的 Docker 容器重启策略,以提高服务的可用性

为正在运行的 Docker 容器重启策略,以提高服务的可用性。 为正在运行的 Docker 容器添加 --restartalways –restartalways 是 Docker 中一个常用的参数,用来设置容器的重启策略。它的作用是确保容器在一定条件下能够自动重启,以提高服务的可用性。 方…

后台管理系统(开箱即用)

很久没有更新博客了,给大家带上一波福利吧,大佬勿扰 现在市面上流行的后台管理模板很多,若依,芋道等,可是这些框架对我们来说可能会有点重,所以我自己从0到1写了一个后台管理模板,你们使用时候可扩展性也会更高 项目主要功能: 成员管理,部门管理&#…

Cursor安装Windows / Ubuntu

一、安装 1、下载软件 2、安装依赖 #安装fuse sudo apt-get install fuse3、将cursor添加到应用程序列表 sudo mv cursor-0.42.5x86_64.AppImage /opt/cursor.appimage #使用自己版本号替换 sudo chmod x /opt/cursor.appimage #给予可执行权限 sudo nano /usr/share/applic…

谷粒商城のRedisESRabbit MQ集群

文章目录 前言一、搭建Redis集群三、搭建ES集群三、搭建Rabbit MQ集群 前言 本篇是谷粒商城集群部署篇,搭建Redis、ES、Rabbit MQ集群实践的个人笔记,也是谷粒商城笔记的最后一篇。集群相关的理论性内容,会放在面试篇的笔记中。 一、搭建Redi…

孙赢利_11月17日_超分周报

一. 康佳PC端实现:1080 → 4K 实时超分 1. 将图像预处理操作从 CPU → GPU 运行 2. 后处理部分操作 从 CPU → GPU 运行 inference_realesrgan_Animal_Video.py import argparse import cv2 import glob import os from basicsr.archs.rrdbnet_arch import RRDBNe…

录的视频怎么消除杂音?从录制到后期的杂音消除攻略

在录制视频时,杂音往往是一个令人头疼的问题。无论是环境噪音、设备噪音还是电磁干扰,杂音的存在都会极大地影响视频的听觉体验。录的视频怎么消除杂音?通过一些前期准备和后期处理技巧,我们可以有效地消除这些杂音,提…

论文《基于现实迷宫地形的电脑鼠设计》深度分析——智能车驱动算法

论文概述 《基于现实迷宫地形的电脑鼠设计》是由吴润强、庹忠曜、刘文杰、项璟晨、孙科学等人于2023年发表的一篇优秀期刊论文。其针对现阶段电脑鼠计算量庞大且不适用于现实迷宫地形的问题,特基于超声波测距与传统迷宫算法原理,设计出一款可在现实迷宫地…

算法日记 26-27day 贪心算法

接下来的题目有些地方比较相似。需要注意多个条件。 题目:分发糖果 135. 分发糖果 - 力扣(LeetCode) n 个孩子站成一排。给你一个整数数组 ratings 表示每个孩子的评分。 你需要按照以下要求,给这些孩子分发糖果: 每…

vue3点击按钮el-dialog对话框不显示问题

vue3弹框不显示问题,控制台也没报错 把 append-to-body:visible.sync"previewDialogOpen" 改为 append-to-bodyv-model"previewDialogOpen" 就好了。

wordpress使用相关

这里写目录标题 遇到的相关问题WordPress安装插件过程中遇到需要ftp出现确实XMLReader 插件的提示cURL Support Missing(curl 缺失) 遇到的相关问题 WordPress安装插件过程中遇到需要ftp 一般在这个位置 出现确实XMLReader 插件的提示 解决&#xff1a…

21.3D surface

3D surface """ File : 05-decoding-Major Name : 3d_surface.py Author : lyq Date : 2024/11/16 23:10 Envi : PyCharm Description: files details """ import numpy as np import matplotlib.pyplot as plt# 设置全局默认字体…

ARM(安谋) China处理器

0 Preface/Foreword 0.1 参考博客 Cortex-M23/M33与STAR-MC1星辰处理器 ARM China,2018年4月established,独立运行。 1 处理器类型 1.1 周易AIPU 1.2 STAR-MC1(星辰处理器) STAT-MC1,主要为满足AIOT应用性能、功…

windows C#-异步编程概述(二)

不要阻塞,而要等待 上述代码演示了一种不好的做法:构建同步代码来执行异步操作。正如所写,此代码会阻止执行它的线程执行任何其他工作。在任何任务正在进行时,它都不会被中断。这就像你把面包放进去后盯着烤面包机一样。你会忽略…

【Android原生问题分析】夸克、抖音划动无响应问题【Android14】

1 问题描述 偶现问题,用户打开夸克、抖音后,在界面上划动无响应,但是没有ANR。回到Launcher后再次打开夸克/抖音,发现App的界面发生了变化,但是仍然是划不动的。 2 log初分析 复现问题附近的log为: 用户…

【STM32】MPU6050简介

文章目录 MPU6050简介MPU6050关键块带有16位ADC和信号调理的三轴MEMS陀螺仪具有16位ADC和信号调理的三轴MEMS加速度计I2C串行通信接口 MPU6050对应的数据手册:MPU6050 陀螺仪加速度计 链接: https://pan.baidu.com/s/13nwEhGvsfxx0euR2hMHsyw?pwdv2i6 提取码: v2i6…

【软件测试】设计测试用例的万能公式

文章目录 概念设计测试用例的万能公式常规思考逆向思维发散性思维万能公式水杯测试弱网测试如何进行弱网测试 安装卸载测试 概念 什么是测试用例? 测试⽤例(Test Case)是为了实施测试⽽向被测试的系统提供的⼀组集合,这组集合包…

使用 TensorFlow 实现 ZFNet 进行 MNIST 图像分类

ZFNet(ZF-Net)是由 Matthew Zeiler 和 Rob Fergus 提出的卷积神经网络架构,它在图像分类任务中取得了显著的效果。它在标准卷积神经网络(CNN)的基础上做了一些创新,例如优化了卷积核大小和池化策略&#xf…