赞
踩
目录
保持宽高比进行缩小或者放大,使得图片两边都大于或等于显示边界。
01.HarmonyOS4.0 工具安装 --- 启航篇https://ruocheng.blog.csdn.net/article/details/136640619
图片(Image)是用来显示图片的组件
使用网络图片时,需要申请权限ohos.permission.INTERNET
使用Stage模型的应用,需要在module.json5配置文件中声明权限。
- "requestPermissions": [
- {
- // 开发网络请求权限
- "name": 'ohos.permission.INTERNET'
- }
- ],
具体如下图所示:
- @Entry
- @Component
- struct Index {
-
- build() {
- Row() {
- Column() {
- Image('https://p3.itc.cn/q_70/images03/20210610/917db573aca1480cb7b8f4980eed61a7.png')
- .width(300)
- .height(100)
- }
- .width('100%')
- }
- .height('100%')
- }
- }
申请权限 | 未申请权限 |
| |
本地图片访问时使用的是$r
, 图片资源存放的位置是 src > main > resources > base > media
注意: 本地访问的话 格式为 $r('app.media.图片名字')
-
- Image($r('app.media.harmonyOs'))
- .width(300)
- .height(100)
设置图片的填充效果。默认值:ImageFit.Cover
- @Entry
- @Component
- struct ImageNote {
- build() {
- Column() {
- Row(){
- Text('图片填充效果').fontSize(30).fontColor('#ccc').padding(10)
- }.width('100%').justifyContent(FlexAlign.Start)
-
- Row({space:20}){
- Column(){
- Image($r('app.media.myImage'))
- .width(100)
- .height(100)
- .objectFit(ImageFit.Fill)
- Text('Fill效果').fontSize(20)
- }
- Column(){
- Image($r('app.media.myImage'))
- .width(100)
- .height(100)
- .objectFit(ImageFit.Cover)
- Text('Cover效果').fontSize(20)
- }
- Column(){
- Image($r('app.media.myImage'))
- .width(100)
- .height(100)
- .objectFit(ImageFit.Auto)
- Text('Auto效果').fontSize(20)
- }
-
- Column(){
- Image($r('app.media.myImage'))
- .width(100)
- .height(100)
- .objectFit(ImageFit.Contain)
- Text('Contain效果').fontSize(20)
- }
-
- }.width('100%')
- .height(150)
-
- Row({space:20}){
- Column(){
- Image($r('app.media.myImage'))
- .width(100)
- .height(100)
- .objectFit(ImageFit.Contain)
- Text('Contain效果').fontSize(20)
- }
-
- }.width('100%')
- .height(150)
- }
- .width('100%')
- }
- }
名称 | 描述 |
Contain | 保持宽高比进行缩小或者放大,使得图片完全显示在显示边界内。 |
Cover | 保持宽高比进行缩小或者放大,使得图片两边都大于或等于显示边界。 |
Auto | 自适应显示 |
Fill | 不保持宽高比进行放大缩小,使得图片充满显示边界。 |
ScaleDown | 保持宽高比显示,图片缩小或者保持不变。 |
None | 保持原有尺寸显示。 |
设置图片的渲染模式为原色或黑白。
默认值:ImageRenderMode.Original
注意: svg类型图源不支持该属性。
renderMode
名称 | 参数类型 | 描述 |
alt | string | Resource | 加载时显示的占位图,支持本地图片(png、jpg、bmp、svg和gif类型),不支持网络图片。 默认值:null 从API version 9开始,该接口支持在ArkTS卡片中使用。 |
objectFit | 设置图片的填充效果。 默认值:ImageFit.Cover 从API version 9开始,该接口支持在ArkTS卡片中使用。 | |
objectRepeat | 设置图片的重复样式。从中心点向两边重复,剩余空间不足放下一张图片时会截断。 默认值:ImageRepeat.NoRepeat 从API version 9开始,该接口支持在ArkTS卡片中使用。 说明: svg类型图源不支持该属性。 | |
interpolation | 设置图片的插值效果,即减轻低清晰度图片在放大显示时出现的锯齿问题。 默认值:ImageInterpolation.None 从API version 9开始,该接口支持在ArkTS卡片中使用。 说明: svg类型图源不支持该属性。 PixelMap资源不支持该属性。 | |
renderMode | 设置图片的渲染模式为原色或黑白。 默认值:ImageRenderMode.Original 从API version 9开始,该接口支持在ArkTS卡片中使用。 说明: svg类型图源不支持该属性。 | |
sourceSize | { width: number, height: number } | 设置图片解码尺寸,降低图片的分辨率,常用于需要让图片显示尺寸比组件尺寸更小的场景。和ImageFit.None配合使用时可在组件内显示小图。 单位:px 从API version 9开始,该接口支持在ArkTS卡片中使用。 说明: 仅在目标尺寸小于图源尺寸时生效。 svg类型图源不支持该属性。 PixelMap资源不支持该属性。 |
matchTextDirection | boolean | 设置图片是否跟随系统语言方向,在RTL语言环境下显示镜像翻转显示效果。 默认值:false 从API version 9开始,该接口支持在ArkTS卡片中使用。 |
fitOriginalSize | boolean | 图片组件尺寸未设置时,显示尺寸是否跟随图源尺寸。 组件不设置宽高或仅设置宽/高时,该属性不生效。 默认值:false 从API version 9开始,该接口支持在ArkTS卡片中使用。 |
fillColor | 设置填充颜色,设置后填充颜色会覆盖在图片上。 从API version 9开始,该接口支持在ArkTS卡片中使用。 说明: 仅对svg图源生效,设置后会替换svg图片的填充颜色。 | |
autoResize | boolean | 设置图片解码过程中是否对图源自动缩放。设置为true时,组件会根据显示区域的尺寸决定用于绘制的图源尺寸,有利于减少内存占用。如原图大小为1920x1080,而显示区域大小为200x200,则图片会自动解码到200x200的尺寸,大幅度节省图片占用的内存。 默认值:true 从API version 9开始,该接口支持在ArkTS卡片中使用。 |
syncLoad8+ | boolean | 设置是否同步加载图片,默认是异步加载。同步加载时阻塞UI线程,不会显示占位图。 默认值:false 从API version 9开始,该接口支持在ArkTS卡片中使用。 说明: 建议加载尺寸较小的本地图片时将syncLoad设为true,因为耗时较短,在主线程上执行即可。 |
copyOption9+ | 设置图片是否可复制。 当copyOption设置为非CopyOptions.None时,支持使用长按、鼠标右击、快捷组合键'CTRL+C'等方式进行复制。 默认值:CopyOptions.None 从API version 9开始,该接口支持在ArkTS卡片中使用。 说明: svg图片不支持复制。 | |
colorFilter9+ | 给图像设置颜色滤镜效果,入参为一个的4x5的RGBA转换矩阵。 矩阵第一行表示R(红色)的向量值,第二行表示G(绿色)的向量值,第三行表示B(蓝色)的向量值,第四行表示A(透明度)的向量值,4行分别代表不同的RGBA的向量值。 RGBA值分别是0和1之间的浮点数字,当矩阵对角线值为1时,保持图片原有色彩。 计算规则: 如果输入的滤镜矩阵为: 像素点为[R, G, B, A] 则过滤后的颜色为 [R’, G’, B’, A’] 从API version 9开始,该接口支持在ArkTS卡片中使用。 | |
draggable9+ | boolean | 设置组件默认拖拽效果,设置为true时,组件可拖拽。 不能和拖拽事件事件同时使用。 默认值:false |
- Column() {
- Image($r('app.media.myImage'))
- .width(100)
- .height(100)
- .borderRadius(50)
-
- Text('自定义形状').fontSize(20)
- }
- Column() {
- Image($r('app.media.myImage'))
- .width(100)
- .height(100)
- .borderRadius(10)
-
- Text('自定义圆角').fontSize(20)
- }
- ....
- @State myImgData: string = 'https://imssg2.baidu.com/it/u=42836227,536469854&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800'
- ....
-
- Column() {
- Image(this.myImgData)
- .width(100)
- .height(100)
- .borderRadius(10)
- .onError(()=>{
- // 图片加载错误, 重新复制
- // console.log()
- this.myImgData = 'https://img2.baidu.com/it/u=42836227,536469854&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800'
- })
-
- Text('图片加载错误').fontSize(20)
- }
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。