Skip to main content
版本:v1.0

IMG

img_sample

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

提示
  1. 推荐使用 24 位或 32 位,颜色方案为 RGB 或者 RGBA 的 png 格式图片。
  2. 图片控件的参数建议结合下文图片示例进行理解。

创建 UI 控件

const img = hmUI.createWidget(hmUI.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

图片示例

警告

wh 是图片控件的宽高,IMG 区域则是图片资源的显示边界,其宽高暂时无法单独设置,值取决于图片资源文件本身的尺寸,即无法实现缩放效果。

坐标图示

旋转图示

代码示例

Page({
build() {
const img = hmUI.createWidget(hmUI.widget.IMG, {
x: 125,
y: 125,
src: 'zeppos.png'
})
img.addEventListener(hmUI.event.CLICK_DOWN, (info) => {
img.setProperty(hmUI.prop.MORE, {
y: 200
})
})
}
})
Page({
build() {
const img_hour = hmUI.createWidget(hmUI.widget.IMG)
img_hour.setProperty(hmUI.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
})
}
})