鸿蒙5.0版开发：ArkTS绘制组件（Rect）

最新推荐文章于 2024-10-02 09:54:20 发布
最新推荐文章于 2024-10-02 09:54:20 发布
阅读量679 收藏 21
点赞数 14
分类专栏： 鸿蒙5.0 ArkUI ArkTS 文章标签： harmonyos 华为 android 前端 鸿蒙 ArkUI ArkTS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_69424697/article/details/142659516
版权
鸿蒙5.0 同时被 3 个专栏收录
94 篇文章 0 订阅
订阅专栏
ArkUI
94 篇文章 0 订阅
订阅专栏
ArkTS
90 篇文章 0 订阅
订阅专栏

往期鸿蒙全套实战文章必看：

Rect

矩形绘制组件。

说明：

该组件从API Version 9开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

子组件

无

接口

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

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

参数：

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

属性

除支持通用属性外，还支持以下属性：

radiusWidth

radiusWidth(value: number | string)

设置圆角的宽度，仅设置宽时宽高一致。 异常值按照默认值处理。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valuenumber | string是圆角的宽度。
默认值：0

radiusHeight

radiusHeight(value: number | string)

设置圆角的高度，仅设置高时宽高一致。 异常值按照默认值处理。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valuenumber | string是圆角的高度。
默认值：0

radius

radius(value: number | string | Array<string | number>)

设置圆角半径大小。 异常值按照默认值处理。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valuenumber | string | Array<string | number>是圆角半径大小。
默认值：0

fill

fill(value: ResourceColor)

设置填充区域颜色。异常值按照默认值处理。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueResourceColor是填充区域颜色。
默认值：Color.Black

fillOpacity

fillOpacity(value: number | string | Resource)

设置填充区域透明度。取值范围是[0.0, 1.0]，若给定值小于0.0，则取值为0.0；若给定值大于1.0，则取值为1.0，其余异常值按1.0处理。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valuenumber | string | Resource是填充区域透明度。
默认值：1

stroke

stroke(value: ResourceColor)

设置边框颜色，不设置时，默认没有边框。异常值不会绘制边框。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueResourceColor是边框颜色。

strokeDashArray

strokeDashArray(value: Array<any>)

设置边框间隙。异常值按照默认值处理。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueArray<any>是边框间隙。
默认值：[]

strokeDashOffset

strokeDashOffset(value: number | string)

设置边框绘制起点的偏移量。异常值按照默认值处理。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valuenumber | string是边框绘制起点的偏移量。
默认值：0

strokeLineCap

strokeLineCap(value: LineCapStyle)

设置边框端点绘制样式。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueLineCapStyle是边框端点绘制样式。
默认值：LineCapStyle.Butt

strokeLineJoin

strokeLineJoin(value: LineJoinStyle)

设置边框拐角绘制样式。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueLineJoinStyle是边框拐角绘制样式。
默认值：LineJoinStyle.Miter

strokeMiterLimit

strokeMiterLimit(value: number | string)

设置斜接长度与边框宽度比值的极限值。斜接长度表示外边框外边交点到内边交点的距离，边框宽度即strokeWidth属性的值。该属性取值需在strokeLineJoin属性取值LineJoinStyle.Miter时生效。

该属性的合法值范围应当大于等于1.0，当取值范围在[0,1)时按1.0处理，其余异常值按默认值处理。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valuenumber | string是斜接长度与边框宽度比值的极限值。
默认值：4

strokeOpacity

strokeOpacity(value: number | string | Resource)

设置边框透明度。该属性的取值范围是[0.0, 1.0]，若给定值小于0.0，则取值为0.0；若给定值大于1.0，则取值为1.0，其余异常值按1.0处理 。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valuenumber | string | Resource是边框透明度。
默认值：1

strokeWidth

strokeWidth(value: Length)

设置边框宽度。该属性若为string类型, 暂不支持百分比，百分比按照1px处理。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueLength是边框宽度。
默认值：1

antiAlias

antiAlias(value: boolean)

设置是否开启抗锯齿效果。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueboolean是是否开启抗锯齿效果。
默认值：true

示例

示例1

// xxx.ets
@Entry
@Component
struct RectExample {
  build() {
    Column({ space: 10 }) {
      Text('normal').fontSize(11).fontColor(0xCCCCCC).width('90%')
      // 绘制90% * 50的矩形
      Column({ space: 5 }) {
        Text('normal').fontSize(9).fontColor(0xCCCCCC).width('90%')
        // 绘制90% * 50矩形
        Rect({ width: '90%', height: 50 })
          .fill(Color.Pink)
        // 绘制90% * 50的矩形框
        Rect()
          .width('90%')
          .height(50)
          .fillOpacity(0)
          .stroke(Color.Red)
          .strokeWidth(3)

        Text('with rounded corners').fontSize(11).fontColor(0xCCCCCC).width('90%')
        // 绘制90% * 80的矩形, 圆角宽高分别为40、20
        Rect({ width: '90%', height: 80 })
          .radiusHeight(20)
          .radiusWidth(40)
          .fill(Color.Pink)
        // 绘制90% * 80的矩形, 圆角宽高为20
        Rect({ width: '90%', height: 80 })
          .radius(20)
          .fill(Color.Pink)
          .stroke(Color.Transparent)
      }.width('100%').margin({ top: 10 })
      // 绘制90% * 50矩形, 左上圆角宽高40,右上圆角宽高20,右下圆角宽高40,左下圆角宽高20
      Rect({ width: '90%', height: 80 })
        .radius([[40, 40], [20, 20], [40, 40], [20, 20]])
        .fill(Color.Pink)
    }.width('100%').margin({ top: 5 })
  }
}

示例2

// xxx.ets
@Entry
@Component
struct RectExample {
  build() {
    Column({ space: 10 }) {
      Column()
        .width(100)
        .height(100)
        .linearGradient({
          direction: GradientDirection.Right,
          colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 1.0]]
        })
        .clip(new Rect({ width: 100, height: 100, radius: 40 }))
      Rect()
        .width(100)
        .height(100)
        // 设置矩形填充，如果需要显示背景的渐变色，请设置区域透明度.fillOpacity(0.0)
        .fill(Color.Pink)
        // 设置倒角为40
        .radius(40)
        .stroke(Color.Black)
        // 设置渐变色，仅100*100的矩形区域生效，渐变色的边界不包含倒角
        .linearGradient({
          direction: GradientDirection.Right,
          colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 1.0]]
        })
    }
  }
}

星星不闪包退1
关注
专栏目录
HarmonyOS角落里的知识：ArkTS卡片自定义绘制
m0_70749039的博客
06-24 770
ArkTS卡片具备JS卡片的全量能力
鸿蒙5.0版开发：ArkTS绘制组件（Polyline）
m0_69424697的博客
09-30 613
折线绘制组件。
鸿蒙5.0版开发：ArkTS组件通用属性（自定义绘制设置）
m0_73088370的博客
09-05 792
自定义组件绘制提供了自定义绘制修改器，来实现更自由地组件绘制。
鸿蒙5.0版开发：ArkTS基础组件（Slider）
m0_69424697的博客
09-20 1020
滑动条组件，通常用于快速调节设置值，如音量调节、亮度调节等应用场景。
鸿蒙5.0版开发：ArkTS基础组件（XComponent）
m0_69424697的博客
09-22 776
可用于EGL/OpenGLES和媒体数据写入，并显示在XComponent组件。
鸿蒙5.0版开发：ArkTS组件-基础组件（Image）
m0_69424697的博客
09-13 897
Image为图片组件，常用于在应用中显示图片。
鸿蒙Harmony应用开发—ArkTS声明式开发（绘制组件：Rect）
m0_64420071的博客
03-18 1137
ArkTS声明式开发（绘制组件：Rect）
鸿蒙HarmonyOS NEXT开发：自定义绘制设置（ArkTS通用属性）
shudaoshanBBQ的博客
08-11 769
自定义组件绘制提供了自定义绘制修改器，来实现更自由地组件绘制。
HarmonyOS应用开发：Rect（绘制组件）
situnanQAQ的博客
06-20 1156
矩形绘制组件。
HarmonyOS鸿蒙开发指南:基于ArkTS的声明式开发范式 声明式UI开发实例 绘图与动画
sybh的博客
01-07 987
除绘制基础几何图形，开发者还可以使用Path组件来绘制自定义的路线，下面进行绘制应用的Logo图案。在pages文件夹下创建新的页面Logo.ets。Logo.ets中删掉模板代码，创建Logo Component。@Entry@Componentbuild() {创建Flex组件为根节点，宽高设置为100%，设置其在主轴方向和交叉轴方向的对齐方式都为Center，创建Shape组件为Flex子组件。Shape组件是所有绘制组件的父组件。
从零开发HarmonyOS（鸿蒙）手机小游戏——数字华容道
weixin_52542088的博客
12-20 6678
HarmonyOS（鸿蒙）手机第一个小游戏app——数字华容道前言概述正文创建项目实现初始界面布局实现数字的随机打乱实现滑动或点击调换数字实现游戏成功界面源代码结语 前言 2月16号HarmonyOS2.0手机开发者Beta版已经发布了，作为“1+8+N”战略的重要入口和生态核心，怎么能少得了手机应用开发呢，今天将由深鸿会深大学习小组（Zzt_01-23）从零基础开发第一个HarmonyOS手机小游戏——数字华容道（界面略丑陋，大佬别喷），此前已经在运动手表上成功开发了：HarmonyOS运动手表游戏合并、
OpenHarmony实战开发-如何实现绘制图形
2401_82546228的博客
04-30 460
Svg组件可以用来绘制常见图形和线段，如矩形（）、圆形（）、线条(）等，具体支持图形样式还请参考svg组件。
OpenHarmony实战开发-如何使用画布绘制实现自定义图形 (Canvas)
2401_82546228的博客
04-27 684
Canvas提供画布组件，用于自定义绘制图形，开发者使用CanvasRenderingContext2D对象和OffscreenCanvasRenderingContext2D对象在Canvas组件上进行绘制，绘制对象可以是基础形状、文本、图片等。
5.2、绘制几何图形（Shape）
lujianfeiccie2009的专栏
06-09 127
绘制组件支持通过各种属性对组件样式进行更改。通过fill可以设置组件填充区域颜色。Path()通过stroke可以设置组件边框颜色。Path()通过可以设置边框透明度。Path()通过可以设置线条拐角绘制样式。拐角绘制样式分为Bevel(使用斜角连接路径段)、Miter(使用尖角连接路径段)、Round(使用圆角连接路径段)。Polyline()// 设置折线拐角处为圆弧通过设置斜接长度与边框宽度比值的极限值。斜接长度表示外边框外边交点到内边交点的距离，边框宽度即属性的值。
鸿蒙ArkUI实战开发-主打自研语言及框架
最新发布
zzlyx99的专栏
10-02 647
ArkUI 是 HarmonyOS 的声明式 UI 开发框架，而 ArkUI-X 是基于 ArkUI 框架扩展而来的跨平台开发框架。ArkUI-X 支持 HarmonyOS、OpenHarmony、Android 和 iOS 平台，允许开发者使用一套代码构建支持多平台的应用程序。
【鸿蒙】HarmonyOS NEXT应用开发快速入门教程之布局篇（上）
pixle的博客
09-27 1245
HarmonyOS NEXT（鸿蒙应用）开发快速入门教程之布局篇，基于HarmonyOS NEXT Beta1版本（api 12）讲解。本文将从前端开发者角度来学习鸿蒙的布局语法，通过类比鸿蒙布局和web css布局相似之处，帮助大家快速掌握鸿蒙布局开发。
鸿蒙NEXT开发-自定义构建函数（基于最新api12稳定版）
qq_56760790的博客
09-28 1015
鸿蒙自定义构建函数的学习包含了：构建函数的基本介绍、传参传递、尾随闭包等
HarmonyOS Next应用开发——响应式布局之媒体查询
高心星的专栏
09-27 1063
媒体查询可根据不同设备类型或同设备不同状态修改应用的样式，常用于多屏幕的应用适配。语法规则包括媒体类型（media-type）、媒体逻辑操作（media-logic-operations）（经常省略）和媒体特征（media-feature）。媒体查询条件由媒体类型、逻辑操作符、媒体特征组成，其中媒体类型可省略，逻辑操作符用于连接不同媒体类型与媒体特征，其中，媒体特征要使用“()”包裹且可以有多个。
iOS开发：自定义UIView绘制扇形图教程
本文主要介绍了在iOS开发中如何实现画扇形图的实例...iOS开发中的扇形图绘制主要依赖于自定义UIView以及`drawRect:`方法，通过图形上下文、路径添加和填充操作，可以灵活地实现各种图形的绘制，满足数据可视化的需求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值