目录

Basic Drawing Effects (ArkTS)

Overview

You can set some basic effects, such as the fill color, anti-aliasing, stroke, and line connection style.

You can set the basic fill effect using a brush and set the basic stroke effect using a pen.

Fill Effect

You can set the basic fill color using a brush and use the brush to implement more complex drawing effects, such as the blend mode, shader effect, and filter effect. For details, see Complex Drawing Effects.

[h2]Available APIs

The following table describes the commonly used APIs for setting drawing effects with a brush. For details about the usage and parameters, see drawing.Brush and drawing.Canvas.

API Description
attachBrush(brush: Brush): void Attaches a brush to a canvas so that the canvas can use the style and color of the brush to fill in a shape.
setColor(alpha: number, red: number, green: number, blue: number): void Sets the color for a brush, which is used to fill in a shape.
setAntiAlias(aa: boolean) : void Enables or disables anti-aliasing for a brush. Anti-aliasing makes the pixels around the shape edges semi-transparent, delivering a smoother effect.
detachBrush(): void Removes the brush from the canvas. After the execution, the canvas does not use the previously set brush and is restored to the default fill effect.

[h2]How to Develop

  1. Create a brush object.

    // Create a brush.
const brush = new drawing.Brush();

  2. Use the brush to set basic drawing effects, such as setting the fill color and enabling the anti-aliasing effect.

    You can call setColor() to set the fill color.

    // Set the fill color to red.
brush.setColor(0xFF, 0xFF, 0x00, 0x00);

    You can call setAntiAlias() to enable the anti-aliasing effect to smooth the edges of the graphics.

    // Enable the anti-aliasing effect.
brush.setAntiAlias(true);

  3. Call attachBrush() to set a brush for the canvas.

    // Set a brush for the canvas.
canvas.attachBrush(brush);

  4. Draw primitives as required. For details, see Drawing Primitives.

  5. If the fill effect is not required, you can use the detachBrush() API to remove the brush from the canvas.

    // Remove the brush.
canvas.detachBrush();

Stroke Effect

You can set the basic stroke color using a pen and use the pen to implement more complex drawing effects, such as the blend mode, path effect, shader effect, and filter effect. For details, see Complex Drawing Effects.

[h2]Available APIs

The following table describes the commonly used APIs for setting drawing effects with a pen. For details about the usage and parameters, see drawing.Pen and drawing.Canvas.

API Description
attachPen(pen: Pen): void Attaches a pen to a canvas so that the canvas can use the style and color of the pen to outline a shape.
setColor(alpha: number, red: number, green: number, blue: number): void Sets the color for a pen, which is used to outline a shape.
setStrokeWidth(width: number) : void Sets the width for a pen. The value 0 is treated as an unusually thin width. During drawing, the width of 0 is always drawn as 1 pixel wide, regardless of any scaling applied to the canvas. Negative values are also regarded as the value 0 during the drawing process.
setAntiAlias(aa: boolean) : void Enables or disables anti-aliasing for a pen. Anti-aliasing makes the pixels around the shape edges semi-transparent.
setCapStyle(style: CapStyle): void Sets the line cap style for a pen.
setJoinStyle(style: JoinStyle): void Sets the line join style for a pen.
detachPen(): void Removes the pen from the canvas. After execution, the canvas will not draw the outline of the shape, and the default stroke effect is restored.

[h2]How to Develop

  1. Create a pen object.

    // Create a pen object.
let pen = new drawing.Pen();

  2. Use the pen to set specific stroke effects (you can choose one or more of the following effects).

    • You can call setColor() to set the pen color, which is used to outline a shape.

      // Set the color to red.
pen.setColor(0xFF, 0xFF, 0x00, 0x00);

    • You can call setStrokeWidth() to set the stroke width.

      // Set the stroke width.
pen.setStrokeWidth(15);

    • You can call setAntiAlias() to set anti-aliasing for the pen to make the drawing edge smoother.

      // Set the anti-aliasing effect.
pen.setAntiAlias(true);

    • You can call setCapStyle() to set the line cap style.

      // Set the line cap style.
pen.setCapStyle(drawing.CapStyle.SQUARE_CAP);

      The options of CapStyle are as follows.

      Line Cap Style Description Schematic Diagram
      FLAT_CAP No cap style. Both ends of the line segment are cut off square.
      SQUARE_CAP Square cap style. Both ends have a square, the width of which is the same as the line segment, and the height is half of the width of the line segment.
      ROUND_CAP Round cap style. Both ends have a semicircle, the diameter of which is the same as the width of the line segment.

    • You can call setJoinStyle() to set the pen join style.

      // Set the pen join style.
pen.setJoinStyle(drawing.JoinStyle.ROUND_JOIN);

      The options of JoinStyle are as follows.

      Line Join Style Description Schematic Diagram
      MITER_JOIN The line join style is a sharp corner.
      ROUND_JOIN The line join style is a round corner.
      BEVEL_JOIN The line join style is a flat corner.

  3. Use the attachPen() API to set the pen for the canvas. The canvas will use the configured pen style and color to draw shape outlines.

    // Set the pen for the canvas.
canvas.attachPen(pen);

  4. Draw primitives as required. For details, see Drawing Primitives.

  5. If the stroke effect is not required, you can use the detachPen() API to remove the pen from the canvas.

    // Remove the stroke effect.
canvas.detachPen();

Sample Code