美文网首页
21.小程序的 image 组件提供了 4 种缩放模式、9 种裁

21.小程序的 image 组件提供了 4 种缩放模式、9 种裁

作者: TensorFlow开发者 | 来源:发表于2020-05-13 14:19 被阅读0次

在实际项目中,经常要面对原始图片的尺寸和设计图里的尺寸不一样的情况(尤其是原始图片高宽是未知和不固定的情况,比如动态从网络获取图片)。在这种情况下,我们必须要有所舍弃,或放弃等比例,或裁剪掉图片的一部分。接受不完美,也是编程中很重要的心态,如何选择,需要看业务上的需求。

小程序的 image 组件提供了 4 种缩放模式、9 种裁剪模式,共计 13 种模式,来支持我们的选择。

接下来我们以官网的图对这些模式做简单的说明和演示,先看下官网原图:

image

4 种缩放模式

  • 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 中支持长按识别。

相关文章

网友评论

      本文标题:21.小程序的 image 组件提供了 4 种缩放模式、9 种裁

      本文链接:https://www.haomeiwen.com/subject/osynnhtx.html