1 Star 0 Fork 5.2K

OpenHarmony-build / docs

forked from OpenHarmony / docs 
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
ts-drawing-components-rect.md 14.69 KB
一键复制 编辑 原始数据 按行查看 历史
zengyawen 提交于 2021-11-10 20:02 . add arkui

Rect

矩形绘制组件。

子组件

接口

Rect(value:{options?: {width: Length,height: Length,radius?: Length | Array<Length>} | {width: Length,height: Length,radiusWidth?: Length,radiusHeight?: Length}})

  • 参数

    参数名

    参数类型

    必填

    默认值

    参数描述

    options

    Object

    -

    options参数说明

  • options参数说明

    参数名

    参数类型

    必填

    默认值

    参数描述

    width

    Length

    -

    宽度。

    height

    Length

    -

    高度。

    radius

    Length | Array<Length>

    0

    圆角半径,支持分别设置四个角的圆角度数。

    radiusWidth

    Length

    0

    圆角宽度。

    radiusHeight

    Length

    0

    圆角高度。

属性

参数名称

参数类型

默认值

必填

参数描述

width

Length

0

宽度。

height

Length

0

高度。

radiusWidth

Length

0

圆角的宽度,仅设置宽时宽高一致。

radiusHeight

Length

0

圆角的高度,仅设置高时宽高一致。

radius

Length | Array<Length>

0

圆角大小。

示例

@Entry
@Component
struct RectExample {
  build() {
    Column({ space: 5 }) {
      Text('normal').fontSize(9).fontColor(0xCCCCCC).width('90%')
      // 绘制90% * 50矩形
      Rect({ width: '90%', height: 50 })
      // 绘制90% * 50矩形
      Rect().width('90%').height(50)

      Text('with rounded corners').fontSize(9).fontColor(0xCCCCCC).width('90%')
      // 绘制90% * 50矩形, 圆角宽高20
      Rect({ width: '90%', height: 50 }).radiusHeight(20).radiusWidth(20)
      // 绘制90% * 50矩形, 圆角宽高20
      Rect({ width: '90%', height: 50 }).radius(20)
    }.width('100%').margin({ top: 5 })
  }
}

1
https://gitee.com/openharmony-build/docs.git
git@gitee.com:openharmony-build/docs.git
openharmony-build
docs
docs
master

搜索帮助

53164aa7 5694891 3bd8fe86 5694891