STROKE_RECT

Supported from API_LEVEL 2.0. For API compatibility, please refer to API_LEVEL.

The stroked rectangle widget adds a stroke on the basis of the filled rectangle widget.

Create UI Widget

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

const strokeRect = createWidget(widget.STROKE_RECT, Param)

Type

Param: object

Property	Description	Required	Type	API_LEVEL
x	The x-axis coordinate of the widget	YES	number	2.0
y	The y-axis coordinate of the widget	YES	number	2.0
w	The width of the widget	YES	number	2.0
h	The height of the widget	YES	number	2.0
color	The widget's color	YES	number	2.0
radius	The rectangle's rounded corners	NO	number	2.0
line_width	The width of stroke	NO	number	2.0
angle	Rotation angle	NO	number	2.0
pos_x	Drawing area x offset (only effective when angle%360!=0)	NO	number	4.0
pos_y	Drawing area y offset (only effective when angle%360!=0)	NO	number	4.0
rect_width	Width of the drawing area (only effective when angle%360!=0)	NO	number	4.0
rect_height	Height of the drawing area (only effective when angle%360!=0)	NO	number	4.0

Property Access Support List

Property Name	setProperty	getProperty	setter	getter
x	Y	Y	Y	Y
y	Y	Y	Y	Y
w	Y	Y	Y	Y
h	Y	Y	Y	Y
color	Y	Y	Y	Y
radius	Y	Y	Y	Y
line_width	Y	Y	Y	Y
angle	Y	Y	Y	Y
pos_x	N	Y	N	Y
pos_y	N	Y	N	Y
rect_width	N	N	N	Y
rect_height	N	N	N	Y

Code Example

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

Page({
  build() {
    const strokeRect = createWidget(widget.STROKE_RECT, {
      x: 125,
      y: 125,
      w: 230,
      h: 150,
      radius: 20,
      line_width: 4,
      color: 0xfc6950
    })

    strokeRect.addEventListener(event.CLICK_DOWN, (info) => {
      strokeRect.setProperty(prop.MORE, {
        y: 200
      })
    })
  }
})