Skip to main content
Version: v3

ARC

arc_sample

Arc widget to display arc progress. Support setting line width, color, start and end angle.

Create UI widget

const arc = hmUI.createWidget(hmUI.widget.ARC, Param)

Type

Param: object

PropertiesDescriptionRequiredType
xThe x-coordinate of componentsYESnumber
yThe y-coordinate of componentsYESnumber
wThe width of componentsYESnumber
hThe height of componentsYESnumber
radiusRadiusYESnumber
start_angleThe angle at the beginning of the arc. (0 degrees is the positive three o'clock direction)YESnumber
end_angleThe angle at the end of the arc. (0 degrees is the positive three o'clock direction)YESnumber
line_widthWidth of circular arc.YESnumber
colorColor of circular arc.YESnumber

Code example

Page({
build() {
const arc = hmUI.createWidget(hmUI.widget.ARC, {
x: 100,
y: 100,
w: 250,
h: 250,
start_angle: -90,
end_angle: 90,
color: 0xfc6950,
line_width: 20
})

arc.addEventListener(hmUI.event.CLICK_DOWN, (info) => {
arc.setProperty(hmUI.prop.MORE, {
y: 150
})
})
}
})