Skip to main content
版本:v3

IMG

API_LEVEL 2.0 开始支持,API 兼容性请参考 API_LEVEL

img_sample

图片控件用于展示图片,支持图片旋转。

提示
  1. 推荐使用 24 位或 32 位,颜色方案为 RGB 或者 RGBA 的 png 格式图片。

创建 UI 控件

import { createWidget, widget } from '@zos/ui'

const img = createWidget(widget.IMG, Param)

类型

Param: object

属性说明是否必须类型版本
src图片路径,资源存放路径参考 目录结构string-
x控件 x 坐标number-
y控件 y 坐标number-
w控件宽度,如果不传递值为图片资源的宽度number-
h控件高度,如果不传递值为图片资源的高度number-
pos_x相对坐标,图片相对控件坐标的水平偏移number-
pos_y相对坐标,图片相对控件坐标的垂直偏移number-
angle图片旋转角度,12 点方向为 0 度number-
center_x图片旋转中心水平方向坐标number-
center_y图片旋转中心垂直方向坐标number-
alpha透明度,取值 0 - 255,默认值为 255 不透明,0 为全透明number-
auto_scale图片区域是否跟随控件宽高进行缩放,默认图片区域的尺寸为资源文件本身尺寸boolean-
auto_scale_obj_fit仅当 auto_scaletrue 时该字段生效,表示图片是否填充整个控件区域(不保持图片宽高比)boolean-

图片示例

警告

wh 是图片控件的宽高,IMG 区域则是图片资源的显示边界

坐标图示

旋转图示

代码示例

import { createWidget, widget, prop } from '@zos/ui'

Page({
build() {
const img = createWidget(widget.IMG, {
x: 125,
y: 125,
src: 'zeppos.png'
})
img.addEventListener(event.CLICK_DOWN, (info) => {
img.setProperty(prop.MORE, {
y: 200
})
})
}
})
import { createWidget, widget, prop } from '@zos/ui'

Page({
build() {
const img_hour = createWidget(widget.IMG)
img_hour.setProperty(prop.MORE, {
x: 0,
y: 0,
w: 454,
h: 454,
pos_x: 454 / 2 - 27,
pos_y: 50 + 50,
center_x: 454 / 2,
center_y: 454 / 2,
src: 'hour.png',
angle: 30
})
}
})