鸿蒙Harmony-矩形绘制组件Rect使用详解

发布于:2024-11-04 ⋅ 阅读:(194) ⋅ 点赞:(0)

目录

一,定义

 二,绘制自定义图形

三,作为其他控件背景使用

一,定义

Rect是鸿蒙提供的矩形绘制组件,利用该组件可以绘制矩形背景,矩形图案等

官方提供的参数和属性:

参数:

参数名 参数类型 必填 默认值 参数描述
width string | number 0 宽度。
说明:
异常值按照默认值处理。
height string | number 0 高度。
说明:
异常值按照默认值处理。
radius string | number | Array<string | number> 0 圆角半径,支持分别设置四个角的圆角度数。
该属性和radiusWidth/radiusHeight属性效果类似,在组合使用时优先于radiusWidth/radiusHeight生效
说明:
异常值按照默认值处理。
radiusWidth string | number 0 圆角宽度。
说明:
异常值按照默认值处理。
radiusHeight string | number 0 圆角高度。
说明:
异常值按照默认值处理。

 属性:

名称 类型 默认值 描述
radiusWidth string | number 0 圆角的宽度,仅设置宽时宽高一致。
从API version 9开始,该接口支持在ArkTS卡片中使用。
说明:
异常值按照默认值处理。
radiusHeight string | number 0 圆角的高度,仅设置高时宽高一致。
从API version 9开始,该接口支持在ArkTS卡片中使用。
说明:
异常值按照默认值处理。
radius string | number | Array<string | number> 0 圆角半径大小。
从API version 9开始,该接口支持在ArkTS卡片中使用。
说明:
异常值按照默认值处理。
fill ResourceColor Color.Black 设置填充区域颜色。
从API version 9开始,该接口支持在ArkTS卡片中使用。
说明:
异常值按照默认值处理。
fillOpacity Length 1 设置填充区域透明度。
取值范围是[0.0, 1.0],若给定值小于0.0,则取值为0.0;若给定值大于1.0,则取值为1.0,其余异常值按1.0处理。
从API version 9开始,该接口支持在ArkTS卡片中使用。
stroke ResourceColor - 设置边框颜色,不设置时,默认没有边框。
从API version 9开始,该接口支持在ArkTS卡片中使用。
说明:
异常值不会绘制边框。
strokeDashArray Array<Length> [] 设置边框间隙。
从API version 9开始,该接口支持在ArkTS卡片中使用。
说明:
线段相交时可能会出现重叠现象。异常值按照默认值处理。
strokeDashOffset number | string 0 边框绘制起点的偏移量。
从API version 9开始,该接口支持在ArkTS卡片中使用。
说明:
异常值按照默认值处理。
strokeLineCap LineCapStyle LineCapStyle.Butt 设置边框端点绘制样式。
从API version 9开始,该接口支持在ArkTS卡片中使用。
strokeLineJoin LineJoinStyle LineJoinStyle.Miter 设置边框拐角绘制样式。
从API version 9开始,该接口支持在ArkTS卡片中使用。
strokeMiterLimit number | string 4 设置斜接长度与边框宽度比值的极限值。斜接长度表示外边框外边交点到内边交点的距离,边框宽度即strokeWidth属性的值。
从API version 9开始,该接口支持在ArkTS卡片中使用。
说明:
该属性取值需在strokeLineJoin属性取值LineJoinStyle.Miter时生效。
该属性的合法值范围应当大于等于1.0,当取值范围在[0,1)时按1.0处理,其余异常值按默认值处理。
strokeOpacity Length 1 设置边框透明度。
从API version 9开始,该接口支持在ArkTS卡片中使用。
说明:
该属性的取值范围是[0.0, 1.0],若给定值小于0.0,则取值为0.0;若给定值大于1.0,则取值为1.0,其余异常值按1.0处理 。
strokeWidth Length 1 设置边框宽度。
从API version 9开始,该接口支持在ArkTS卡片中使用。
说明:
该属性若为string类型, 暂不支持百分比,百分比按照1px处理。
antiAlias boolean true 是否开启抗锯齿效果。
从API version 9开始,该接口支持在ArkTS卡片中使用。
说明:
异常值按照默认值处理。

 二,绘制自定义图形

比如要绘制一个类似于叶子的图形

@Entry
@Component
struct Index {

  build() {
    Stack({alignContent: Alignment.Center}) {
      Rect({ width: 100, height: 50 }) //矩形的宽高
        .radius([[0, 0], [60, 60], [0, 0], [60, 60]]) //矩形的圆角
        .fill("#FF0000")//矩形的填充色
    }
    .width("100%")
    .height("100%")
  }
}

效果如下: 

设置矩形的边框颜色:

@Entry
@Component
struct Index {

  build() {
    Stack({alignContent: Alignment.Center}) {
      Rect({ width: 100, height: 50 }) //矩形的宽高
        .radius([[0, 0], [60, 60], [0, 0], [60, 60]]) //矩形的圆角
        .fill("#FF0000")//矩形的填充色
        .stroke("#000000") //矩形的边框颜色
    }
    .width("100%")
    .height("100%")
  }
}

效果如下: 

 

 设置矩形边框宽度:

@Entry
@Component
struct Index {

  build() {
    Stack({alignContent: Alignment.Center}) {
      Rect({ width: 100, height: 50 }) //矩形的宽高
        .radius([[0, 0], [60, 60], [0, 0], [60, 60]]) //矩形的圆角
        .fill("#FF0000")//矩形的填充色
        .stroke("#000000") //矩形的边框颜色
        .strokeWidth(6)//矩形的边框宽度
    }
    .width("100%")
    .height("100%")
  }
}

效果如下: 

三,作为其他控件背景使用

在安卓中,可以自定义drawable-xml来作为其他组件的背景,在鸿蒙中,可以将Rect作为其他组件的背景使用。

首先自定义Builder:

@Builder bg() {
    Rect({ width: "100%", height: "100%" })
      .radius([[17, 17], [17, 17], [17, 17], [17, 17]])
      .fill("#55000000")
  }

 然后在组件中使用:

@Entry
@Component
struct Index {

  @Builder bg() {
    Rect({ width: "100%", height: "100%" })
      .radius([[17, 17], [17, 17], [17, 17], [17, 17]])
      .fill("#55000000")
  }

  build() {
      Stack({alignContent: Alignment.Center}) {
        Image($r('app.media.pic_bed_nurse_in'))
          .width(60)
          .height(60)
          .background(this.bg())//设置背景
      }
      .width("100%")
      .height("100%")

  }
}

 运行效果:


网站公告

今日签到

点亮在社区的每一天
去签到