21.小程序的 image 组件提供了 4 种缩放模式、9 种裁
2020-05-13 本文已影响0人
TensorFlow开发者
在实际项目中,经常要面对原始图片的尺寸和设计图里的尺寸不一样的情况(尤其是原始图片高宽是未知和不固定的情况,比如动态从网络获取图片)。在这种情况下,我们必须要有所舍弃,或放弃等比例,或裁剪掉图片的一部分。接受不完美,也是编程中很重要的心态,如何选择,需要看业务上的需求。
小程序的 image 组件提供了 4 种缩放模式、9 种裁剪模式,共计 13 种模式,来支持我们的选择。
接下来我们以官网的图对这些模式做简单的说明和演示,先看下官网原图:
image4 种缩放模式
-
scaleToFill (
默认值
) 不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素。 -
aspectFit 保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。
意思就是说,将图片缩放到刚好能居中放入 image 中,此时 image 可以有空白部分。 - aspectFill 保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。
-
widthFix 宽度不变,高度自动变化,保持原图宽高比不变。
意思就是以 image 的宽为准,将原图按比例缩放至正好能放入 image 中,此时image 的高度就是缩放后的图片高度,也就是说 image 不会有多余空白部分。
9 种裁剪模式(只裁剪不缩放)
- top 显示图片的顶部区域。
- bottom 显示图片的底部区域。
- center 显示图片的中间区域。
- left 显示图片的左边区域。
- right 显示图片的右边区域。
- top left 显示图片的左上边区域。
- top right 显示图片的右上边区域。
- bottom left 显示图片的左下边区域。
- bottom right 显示图片的右下边区域。
这几种裁剪模式还是很好理解的,比如假设下面每个黄色框表示一个 image 组件,当 mode 依次等于这 9 种裁剪模式时,显示的效果就是每个黄框的内容:
小结
4 种缩放模式,带有 Fill 的会填满 image,widthFix 会重新调整 image 的高度。
image 的默认模式是 scaleToFill。
image 组件默认大小是 300px * 225px,建议自己设置大小。
image 组件中二维码/小程序码图片不支持长按识别,仅在 wx.previewImage 中支持长按识别。