HarmonyOS Development: Using Rect to Draw Rectangles

Foreword

this article is based on Api13

many people can think of using Canvas for drawing geometric figures. Besides Canvas, there are actually many implementation methods. For example, to realize a simple rectangle, if it is filling method, we can use backgroundColor and set a certain width and height. If it is contour border mode, we can use border. We can simply list:

implement a solid rectangle with a length of 100, a width of 100, and a red background. In this case, we can use a component to implement it at will:

Column() {

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

the effect is as follows:

of course, you can also add a borderRadius attribute to make it a circle:

Column() {

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

the effect is as follows:

if what you want to achieve is not a solid, but a hollow, then we can use border to achieve:

Column() {

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

as you can see, the solid has become a hollow effect:

the above cases can only be said that we are implemented with background and border styles. In fact, in addition to the above implementation methods, Hongmeng also provides us with many geometric components, such as Circle, rectangle, triangle, etc. At present, there are 7 drawing types, namely Circle (Circle), Ellipse (Ellipse), Line (straight Line), Polyline (Polyline), Polygon (Polygon), path (Path), Rect (rectangle), you must use the Shape component as the parent component.

Rectangle Rect

Rect is mainly used to draw rectangular drawing components.

Let's look at the source code and the parameters are as follows:

    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: width, value range ≥ 0;height: height, value range ≥ 0;radius: Fillet radius, which supports setting the fillet degree of Four Corners respectively, value range ≥ 0;radius: fillet width, value range ≥ 0;radiusHeight: fillet height, value range ≥ 0.

In addition to properties, the following methods are also supported:

method	parameters	overview
radiusWidth	number/string	set the width of the fillet, only set the width when the width is consistent
radiusHeight	number/string	set the height of the fillet, only set the height to be the same
radius	number /string / Array	set the fillet radius size, value range ≥ 0
fill	ResourceColor	set the color of the filled area, and deal with abnormal values according to the default value.
fillOpacity	number /string/ Resource	Sets the transparency of the filled area. The value range is [0.0, 1.0]. If the given value is less than 0.0, the value is 0.0. If the given value is greater than 1.0, the value is 1.0. Other abnormal values are treated as 1.0.
stroke	ResourceColor	set the border color. If it is not set, there is no border by default.
strokeDashArray	Array	sets the border gap. Value range ≥ 0
strokeDashOffset	number/string	sets the offset from which the border is drawn
strokeLineCap	LineCapStyle	set the border endpoint drawing style
strokeLineJoin	LineJoinStyle	set Border Corner Draw Style
strokeMiterLimit	number/string	sets the limit for the ratio of the miter length to the border width
strokeOpacity	number/string/Resource	set border transparency
strokeWidth	Length	set border width
antiAlias	boolean	set whether to turn on the anti-aliasing effect

solid rectangle

by default, it is a solid rectangle with a black background color.

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

The effect is as follows:

by the fill property sets the fill color and the border color through the stroke property.

Set the background color to pink:

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

the effect is as follows:

border rectangle

one thing to note when drawing borders is that you cannot just set stroke property, also set fillOpacity attribute, otherwise the border has no effect, for example, the case of setting the border to 1 and the color to pink is as follows:

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

the effect is as follows:

rounded Rectangle

to achieve a rounded corner effect, you can use the radius attribute, for example, to achieve a rectangle with a rounded corner of 10:

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

the effect is as follows:

of course, you can also implement a separate angle degree setting, such as setting the upper left corner to 10 degrees.

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

The effect is as follows:

gradient Rectangle

gradient color, we can directly useThe common attribute linearGradient is implemented as follows:

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

the effect is as follows:

related Summary

in actual development, there are many implementation methods for geometric rectangles, and the Rect component is not necessarily required. However, if the rectangle is needed, it is recommended to use the Rect component, because the Rect component itself carries many style attributes, which can meet our different daily needs.