DEV Community

Cover image for HarmonyOS Development: Understanding Canvas Drawing
程序员一鸣
程序员一鸣

Posted on

HarmonyOS Development: Understanding Canvas Drawing

#harmonyos

Foreword

this article is based on Api13

the components of the system cannot meet our needs. In this case, we have to customize the components ourselves. In addition to customizing the combination components and expanding the components, there is another way, that is, completely self-drawing the components. In this case, common scenarios include, for example, stock market charts and fund line charts in financial software. Of course, there are other places that need to be highly drawn. Hongmeng is developing, similar to other languages, Canvas canvases are used for drawing, but the way of drawing tends to be the way in the Web front end.

Canvas is a Canvas and does not provide the ability to draw, but as a carrier, it undertakes the container of drawing. Currently, drawing is implemented and two objects are provided, one is drawingRenderingContext, and the other is canvasRenderingContext2D, this article will not cover the overview of these two objects for the time being. Let's first understand the basics of drawing.

The Canvas object, after Api12, adds a can the AI analysis option parameter ImageAIOptions, which allows you to configure the analysis type or bind an analysis controller.

(context: CanvasRenderingContext2D | DrawingRenderingContext, imageAIOptions: ImageAIOptions): CanvasAttribute;
Enter fullscreen mode Exit fullscreen mode

When however, there is also an attribute enableAnalyzer that supports AI analysis, but it needs to be used together with StartImageAnalyzer and StopImageAnalyzer in CanvasRenderingContext2D.

DRAWING REQUIREMENTS

Before drawing, we need to note that we must wait for the Canvas component to initialize, that is, draw in the onReady method.

Let's start with a simple case, draw a circle with a radius of 100.

@Entry
@Component
struct DemoPage {
  private context: DrawingRenderingContext = new DrawingRenderingContext()

  build() {
    Canvas(this.context)
      .width("100%")
      .height("100%")
      .onReady(() => {
        this.context.canvas.drawCircle(200, 200, 100)
        this.context.invalidate()
      })
  }
}
Enter fullscreen mode Exit fullscreen mode

After running, you can see the effect as follows, the default is black.

Image description

Introduction to DrawingRenderingContext

DrawingRenderingContext is a drawing tool. It can freely draw on Canvas Canvas components, such as rectangles, text, pictures, etc. It has a DEFAULT parameter LengthMetricsUnit, which mainly sets the length attribute unit. There are two values to choose from, DEFAULT and PX. The former is used to describe the length in the DEFAULT vp pixel unit, while the latter is used to describe the length in px pixel unit.

Image description

There are three properties or methods to choose from, with the following parameters:

name type description
size Size the width and height of the Context size.
canvas Canvas the Canvas object of the drawing module. For more information, see the Canvas object in the drawing module.
invalidate no parameters invalidates the component, triggering re-rendering of the component.

Introduction to CanvasRenderingContext2D

like DrawingRenderingContext, CanvasRenderingContext2D is a drawing tool that can draw some common rectangles, text, pictures, etc. Unlike DrawingRenderingContext, it has richer attributes and is compatible with its own functions. Therefore, CanvasRenderingContext2D is recommend used for drawing elements.

The RenderingContextSettings parameter is used to configure the parameters of the CanvasRenderingContext2D object.

constructor(settings?: RenderingContextSettings);
Enter fullscreen mode Exit fullscreen mode

After Api12, a parameter lengthmetricsununit is added, which is mainly used used to configure the unit mode of the CanvasRenderingContext2D object.

constructor(settings?: RenderingContextSettings, unit?: LengthMetricsUnit);
Enter fullscreen mode Exit fullscreen mode

Use CanvasRenderingContext2D simply draws a rectangle:

@Entry
@Component
struct DemoPage {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)

  build() {
    Canvas(this.context)
      .width('100%')
      .height('100%')
      .onReady(() => {
        this.context.fillRect(0, 0, 100, 100)
      })
  }
}
Enter fullscreen mode Exit fullscreen mode

related Summary

this article mainly briefly summarizes the basic knowledge of Canvas drawing. As a simple understanding, we will make further analysis on the relevant drawing in the following articles. First of all, we can make a simple summary: DrawingRenderingContext is far less convenient to use than CanvasRenderingContext2D, for example, it can be reflected in modifying the thickness, color and other attributes of the brush.

Top comments (0)