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

2020-05-13  本文已影响0人  TensorFlow开发者

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

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

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

image

4 种缩放模式

9 种裁剪模式(只裁剪不缩放)

这几种裁剪模式还是很好理解的,比如假设下面每个黄色框表示一个 image 组件,当 mode 依次等于这 9 种裁剪模式时,显示的效果就是每个黄框的内容:

小结

4 种缩放模式,带有 Fill 的会填满 image,widthFix 会重新调整 image 的高度。
image 的默认模式是 scaleToFill。
image 组件默认大小是 300px * 225px,建议自己设置大小。
image 组件中二维码/小程序码图片不支持长按识别,仅在 wx.previewImage 中支持长按识别。

上一篇 下一篇

猜你喜欢

热点阅读