鸿蒙开发:使用Rect绘制矩形

程序员一鸣
• 阅读 18

前言

本文基于Api13

几何图形的绘制,很多人都能想到使用Canvas,除了Canvas之外,其实还有着很多的实现方式,比如要实现一个简单的矩形,如果是填充方式,我们就可以使用backgroundColor,设置一定宽高即可,如果是轮廓边框模式,我们就可以使用border,我们可以简单列举一下:

实现一个长100,宽100,背景为红色的实心矩形,这种情况下,我们就可以随意使用一个组件来实现:

Column() {

      }.width(100)
      .height(100)
      .backgroundColor(Color.Red)

效果如下:

鸿蒙开发:使用Rect绘制矩形

当然了,你也可以加上一个borderRadius属性,让其变为一个圆形:

Column() {

      }.width(100)
      .height(100)
      .backgroundColor(Color.Red)
      .borderRadius(100)

效果如下:

鸿蒙开发:使用Rect绘制矩形

如果你要实现的不是一个实心的,而是一个空心的,那么我们可以使用border来实现:

Column() {

      }.width(100)
      .height(100)
      .border({ width: 1, color: Color.Red })

可以看到,实心已经变成了空心效果:

鸿蒙开发:使用Rect绘制矩形

以上的案例呢,只能说我们是用背景和边框样式实现的,其实除了以上的实现方式之外,鸿蒙中还给我们提供了很多的几何组件,比如圆形,矩形,三角形等等,目前有7种绘制类型,分别为Circle(圆形)、Ellipse(椭圆形)、Line(直线)、Polyline(折线)、Polygon(多边形)、Path(路径)、Rect(矩形),必须使用Shape组件做为父组件。

矩形Rect

Rect主要用于绘制矩形绘制组件。

我们看下源码,参数如下:

    new (value?: {
        width?: number | string;
        height?: number | string;
        radius?: number | string | Array<any>;
    } | {
        width?: number | string;
        height?: number | string;
        radiusWidth?: number | string;
        radiusHeight?: number | string;
    }): RectAttribute;

width:宽度,取值范围≥0;height: 高度,取值范围≥0;radius:圆角半径,支持分别设置四个角的圆角度数,取值范围≥0;radiusWidth:圆角宽度,取值范围≥0;radiusHeight:圆角高度,取值范围≥0。

除了属性之外,也支持以下的方法:

方法 参数 概述
radiusWidth number/string 设置圆角的宽度,仅设置宽时宽高一致
radiusHeight number/string 设置圆角的高度,仅设置高时宽高一致
radius number /string / Array<string/ number> 设置圆角半径大小,取值范围≥0
fill ResourceColor 设置填充区域的颜色,异常值按照默认值处理
fillOpacity number /string/ Resource 设置填充区域透明度。取值范围是[0.0, 1.0],若给定值小于0.0,则取值为0.0;若给定值大于1.0,则取值为1.0,其余异常值按1.0处理
stroke ResourceColor 设置边框颜色,不设置时,默认没有边框
strokeDashArray Array<any> 设置边框间隙。取值范围≥0
strokeDashOffset number/string 设置边框绘制起点的偏移量
strokeLineCap LineCapStyle 设置边框端点绘制样式
strokeLineJoin LineJoinStyle 设置边框拐角绘制样式
strokeMiterLimit number/string 设置斜接长度与边框宽度比值的极限值
strokeOpacity number/string/Resource 设置边框透明度
strokeWidth Length 设置边框宽度
antiAlias boolean 设置是否开启抗锯齿效果

实心矩形

默认情况下,它就是一个实心的矩形,背景颜色为黑色。

Rect().width(100)
      .height(100)

效果如下:

鸿蒙开发:使用Rect绘制矩形

通过fill属性设置填充颜色,通过stroke属性设置边框颜色。

设置背景颜色为粉色:

Rect().width(100)
       .height(100)
      .fill(Color.Pink)

效果如下:

鸿蒙开发:使用Rect绘制矩形

边框矩形

绘制边框需要注意一点,那就是不能仅设置stroke属性,还要设置fillOpacity属性,否则边框是没有效果的,比如,设置边框为1,颜色为粉色的案例如下:

Rect().width(100)
      .height(100)
      .fillOpacity(0)
      .stroke(Color.Pink)
      .strokeWidth(1)

效果如下:

鸿蒙开发:使用Rect绘制矩形

圆角矩形

实现一个圆角效果,可以通过radius属性,比如实现一个,圆角度数为10的矩形:

 Rect()
        .width(100)
        .height(100)
        .fill(Color.Pink)
        .radius(10)

效果如下:

鸿蒙开发:使用Rect绘制矩形

当然了,你也可以实现单独的一个角的度数设置,比如设置左上角为10度。

 Rect()
          .width(100)
          .height(100)
          .fill(Color.Pink)
          .radius([[10,10]])

效果如下: 鸿蒙开发:使用Rect绘制矩形

渐变矩形

渐变色,我们可以直接使用通用属性linearGradient来实现,案例如下:

Rect()
          .width(100)
          .height(100)
          .fillOpacity(0)
          .linearGradient({
            direction: GradientDirection.Right,
            colors: [[Color.Red, 0.0], [Color.Orange, 0.3], [Color.Pink, 1.0]]
          })

效果如下:

鸿蒙开发:使用Rect绘制矩形

相关总结

几何矩形,在实际的开发中,有多种的实现方式,并非一定需要Rect组件,但是,如果有需要用到矩形的场景,建议还是使用Rect组件,因为Rect组件自身携带了很多样式属性,可以满足我们日常的不同的需求。

点赞
收藏
评论区
推荐文章
Wesley13 Wesley13
3年前
Unity3D GUI笔记
Rect(intleft,inttop,intwidth,intheight)//left:离屏幕左边距离;top:离屏幕上边距离;width:Rect宽度;height:Rect高度;文本:Label(Rect(),Stringtext)//text:文字内容按钮:Button(Rect(),Tex
Stella981 Stella981
3年前
Agile Lite默认控制器CSS扩展实现H5组件动画切换
AgileLite中提供了很多控制器和组件的交互,但是实际开发过程中还会遇到很多种场景无法满足。这里介绍一下如何使用AgileLite的默认控制器和组件的UI渲染来满足不同的场景需要默认控制器的扩展默认控制器的扩展是指通过CSS样式对控制器进行UI渲染,使得默认控制器的使用场景更丰富。扩展默认控制器的方法
Wesley13 Wesley13
3年前
.NET Core使用FluentEmail发送邮件
前言    在实际的项目开发中,我们会遇到许多需要通过程序发送邮件的场景,比如异常报警、消息、进度通知等等。一般情况下我们使用原生的SmtpClient类库居多,它能满足我们绝大多数场景。但是使用起来不够简洁,许多场景需要我们自行封装方法去实现,而且代码量非常可观。庆幸的是,我们有一款非常棒的组件,能满足我们绝大多数应用场景,而且使用简单功能强大
Wesley13 Wesley13
3年前
D3画完整柱状图(带坐标轴、标签)
   昨天晚上本来打算花一点时间把之前学的柱状图改一下,用CSV文件来替换自定义数据。这一替换可不得了,一晚上就搭进去了,还好今早找到了问题的所在,原因在于我的数据引用出了问题。现在就来讲解一下如何画一个柱状图吧:  柱状图的画法和折线图其实很类似,只要掌握了比例尺的用法和坐标轴的画法,我们只要在此基础上添加“rect”元素添加矩形就可以了,但这其中
程序员一鸣 程序员一鸣
23小时前
鸿蒙开发:使用Ellipse绘制椭圆
除了使用Ellipse组件可以一个椭圆之外,我们还可以使用Canvas来绘制一个椭圆,但是相对来说,还是没有Ellipse组件高效,所以,如果说Ellipse组件能够满足需求,还是以Ellipse组件为主。
程序员一鸣 程序员一鸣
23小时前
鸿蒙开发:父组件如何调用子组件中的方法?
也许大家可能会有疑问,子组件更新UI,直接由装饰器触发不就行了,希望大家能够明白,以上呢只是简单的案例,在实际的开发中,子组件方法中可能很多的逻辑,比如网络请求,比如数据存储等等,并不是简单的UI更新。
京东云开发者 京东云开发者
7个月前
鸿蒙跨端实践-ArkTS和CAPI的混合开发实现
一、背景在文章中,讲述了动态化适配鸿蒙的方案实现,当在鸿蒙系统进行UI渲染的时候,我们使用了系统的组件进行递归渲染。在iOS和Android也是借助各自系统组件进行的渲染,但是在鸿蒙系统会存在以下4个严重问题:1.UI层级过多以金融APP理财频道页中的一个
陈杨 陈杨
1星期前
鸿蒙原生绘图API:从基础到高阶的绘制之旅(进阶版)
家人们,还记得上次一起探索的鸿蒙绘图API基础用法吗?上手是不是特别容易!今天,咱们就接着深入,开启进阶版的学习,解锁更多复杂又炫酷的绘图技能,让你的鸿蒙应用界面直接“出圈”!我将结合实际开发场景,丰富绘制路径、圆角矩形、绘制图片、画笔与画刷、裁剪区域设置
程序员一鸣 程序员一鸣
23小时前
鸿蒙开发:使用Circle绘制圆形
绘制矩形也好,圆形也好,大家做为一个了解即可,在有需要用到的场景中,合理的使用即可,毕竟现成的组件,要比自己用别的方式实现要简单的多。