鸿蒙实战—Image组件的剪切和缩放

1. Image图片标签

鸿蒙实战—Image组件的剪切和缩放

鸿蒙实战—Image组件的剪切和缩放

鸿蒙实战—Image组件的剪切和缩放

工作当中,关于image标签有两个习惯:

  1. 大小会包裹内容,图片多大,image标签多大
  2. image标签基本不会设置背景图片,只会设置前景图片,因为前景图片才是要展示出来的图片
鸿蒙实战—Image组件的剪切和缩放

	

鸿蒙实战—Image组件的剪切和缩放

鸿蒙实战—Image组件的剪切和缩放

鸿蒙实战—Image组件的剪切和缩放

2. 图片剪切 clip_alignment

鸿蒙实战—Image组件的剪切和缩放

鸿蒙实战—Image组件的剪切和缩放

鸿蒙实战—Image组件的剪切和缩放

鸿蒙实战—Image组件的剪切和缩放

3. 缩放图片 scale_mode

鸿蒙实战—Image组件的剪切和缩放

鸿蒙实战—Image组件的剪切和缩放

	
鸿蒙实战—Image组件的剪切和缩放

	
鸿蒙实战—Image组件的剪切和缩放

鸿蒙实战—Image组件的剪切和缩放

鸿蒙实战—Image组件的剪切和缩放

	
鸿蒙实战—Image组件的剪切和缩放

鸿蒙实战—Image组件的剪切和缩放

鸿蒙实战—Image组件的剪切和缩放

4. zoom_center 和 inside 区别:

鸿蒙实战—Image组件的剪切和缩放

鸿蒙实战—Image组件的剪切和缩放

5. 小节

1、图片剪切显示:

2、图片缩放显示:

  1. inside:表示将原图按比例缩放到与Image相同或更小的尺寸,并居中显示。 有可能不会填充组件
  2. center:表示不缩放,按Image大小显示原图中间部分。
  3. stretch:表示将原图缩放到与Image大小一致。 拉伸。将组件填充。
  4. clip_center:表示将原图按比例缩放到与Image相同或更大的尺寸,并居中显示。超过组件的部分被剪切掉。
  5. zoom_center:表示原图按照比例缩放到与Image最窄边一致,并居中显示。
  6. zoom_end:表示原图按照比例缩放到与Image最窄边一致,并靠结束端显示。
  7. zoom_start:表示原图按照比例缩放到与Image最窄边一致,并靠起始端显示。
鸿蒙实战—Image组件的剪切和缩放

3、 实际开发当中,尽量不剪切、也不缩放,因为剪切或缩放了,就有可能导致图片失帧

展开阅读全文

页面更新:2024-05-04

标签:缩放   组件   华为   鸿蒙   原图   实战   铺满   背景图片   属性   前景   尺寸   比例   大小   标签   方法   图片   科技   信息

1 2 3 4 5

上滑加载更多 ↓
推荐阅读:
友情链接:
更多:

本站资料均由网友自行发布提供,仅用于学习交流。如有版权问题,请与我联系,QQ:4156828  

© CopyRight 2020-2024 All Rights Reserved. Powered By 71396.com 闽ICP备11008920号-4
闽公网安备35020302034903号

Top