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.

Available APIs

The following table lists the APIs for setting the drawing effect using a brush. For details, see drawing.Brush.

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 restores to the default fill effect.

How to Develop

Create a brush object.

// Set the brush.
const brush = new drawing.Brush();

BasicEffect.ets

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);
```
BasicEffect.ets
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);
```
BasicEffect.ets
Call attachBrush() to set a brush for the canvas.
```
// Set a brush for the canvas.
canvas.attachBrush(brush);
```
BasicEffect.ets
Draw primitives as required. For details, see Drawing Primitives.
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();
```
BasicEffect.ets

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.

Available APIs

The following table lists the APIs for setting the drawing effect using a pen. For details, see drawing.Pen.

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 brush from the canvas. After the execution, the canvas does not draw the outline of the shape and restores to the default fill effect.

How to Develop

Create a pen object.

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

BasicEffect.ets

Call attachPen() to set a pen for the canvas. The canvas uses the pen style and color to draw the outline.
```
// Set a pen for the canvas.
canvas.attachPen(pen);
```
BasicEffect.ets

(Optional) Use the pen to set the stroke effect. You can select 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);
```
BasicEffect.ets
You can call setStrokeWidth() to set the pen width.
```
// Set the stroke width.
pen.setStrokeWidth(15);
```
BasicEffect.ets
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);
```
BasicEffect.ets

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

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

BasicEffect.ets

The options of CapStyle are as follows.

Line Cap Style	Description	Effect
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 height of which is half of the width of the line segment, with the same width.
ROUND_CAP	Round cap style. Both ends have a semicircle centered, 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);
```
BasicEffect.ets
The options of JoinStyle are as follows.

Line Join Style Description Effect

MITER_JOIN Miter join.

ROUND_JOIN Round join.

BEVEL_JOIN Beveled join.

Draw primitives as required. For details, see Drawing Primitives.
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();
```
BasicEffect.ets

Line Join Style	Description	Effect
MITER_JOIN	Miter join.
ROUND_JOIN	Round join.
BEVEL_JOIN	Beveled join.

Samples

The following samples are provided to help you better understand how to use the Drawing APIs (ArkTS) for development:

ArkTSGraphicsDraw (API20)