1# Basic Drawing Effects (ArkTS) 2 3 4## When to Use 5 6During drawing, you can set basic effects, such as the fill color, anti-aliasing, outline, and line connection style. 7 8Set the basic filling effect by using the brush, and set the basic stroke effect by using the pen. 9 10 11## Filling Effects 12 13You can use the brush to set the basic fill color, or use the blending mode, shader effect, and filter effect to implement more complex drawing effects. For details, see [Complex Drawing Effects](complex-drawing-effect-arkts.md). 14 15 16### Available APIs 17 18The following table lists the common APIs for setting the drawing effect by using the brush. For details about the usage and parameters, see [drawing.Brush](../reference/apis-arkgraphics2d/js-apis-graphics-drawing.md#brush). 19 20| Interface| Description| 21| -------- | -------- | 22| 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.| 23| setColor(alpha: number, red: number, green: number, blue: number): void | Sets the color attribute of the brush. The color attribute describes the color used by the brush to fill the image.| 24| setAntiAlias(aa: boolean) : void | Sets the anti-aliasing attribute of the brush. If this attribute is set to true, the brush performs translucent blur processing on the edge pixels of the image when drawing the image to make the image edges smoother.| 25| detachBrush(): void | Removes the brush from the canvas. After this operation is performed, the canvas does not use the previously set brush and the default filling effect is restored.| 26 27 28### How to Develop 29 301. Creates a Brush object. 31 32 ```ts 33 const brush = new drawing.Brush(); 34 ``` 35 362. Use the brush to set the basic drawing effect, for example, setting the fill color and enabling the anti-aliasing effect. 37 You can use the setColor() interface to set the fill color. 38 39 ```ts 40 brush.setColor(0xFF, 0xFF, 0x00, 0x00); 41 ``` 42 43 You can use the setAntiAlias() interface to enable the anti-aliasing effect to smooth the image edges. 44 45 ```ts 46 brush.setAntiAlias(true); 47 ``` 48 493. Use the attachBrush() API to set the brush for the canvas. 50 51 ```ts 52 canvas.attachBrush(brush); 53 ``` 54 554. Draw diagram elements as required. For details, see [Primitive Drawing](primitive-drawing-overview.md). 56 575. If the filling effect is not required, you can call detachBrush() to remove the brush from the canvas. 58 59 ```ts 60 canvas.detachBrush(); 61 ``` 62 63 64## Stroke Effects 65 66You can use the pen to set the basic stroke color, or use the blending mode, path effect, shader effect, and filter effect to implement more complex drawing effects. For details, see [Complex Drawing Effects](complex-drawing-effect-arkts.md). 67 68 69### Available APIs 70 71The following table lists the common APIs for setting the drawing effect using the pen. For details about the usage and parameters, see [drawing.Pen](../reference/apis-arkgraphics2d/js-apis-graphics-drawing.md#pen). 72 73 74| Interface| Description| 75| -------- | -------- | 76| 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.| 77| setColor(alpha: number, red: number, green: number, blue: number): void | Sets the color attribute of the pen. The color attribute describes the color used by the pen to draw the outline of a graph.| 78| 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.| 79| setAntiAlias(aa: boolean) : void | Enables or disables anti-aliasing for a pen. Anti-aliasing makes the pixels around the shape edges semi-transparent.| 80| setCapStyle(style: CapStyle): void | Sets the line cap style for a pen.| 81| setJoinStyle(style: JoinStyle): void | Sets the line join style for a pen.| 82| detachPen(): void | Removes the pen from the canvas. After this method is executed, the canvas does not draw the outline of the shape and restores the default filling effect.| 83 84 85### How to Develop 86 871. Creates a pen object. 88 89 ```ts 90 let pen = new drawing.Pen(); 91 ``` 92 932. Use the attachPen() API to set a pen for the Canvas. The canvas will use the configured pen style and color to draw the outline of the graph. 94 95 ```ts 96 canvas.attachPen(pen); 97 ``` 98 993. Use the pen to set one or more of the following stroke effects. 100 101 - You can use the setColor() interface to set the pen color, which is used for drawing the outline of a graph. 102 103 ```ts 104 // Set the color to red. 105 pen.setColor(0xFF, 0xFF, 0x00, 0x00); 106 ``` 107 108 - You can use the setStrokeWidth() interface to set the stroke width. 109 110 ```ts 111 pen.setStrokeWidth(15); 112 ``` 113 114 - You can use the setAntiAlias() interface to set the anti-aliasing function of the pen to make the drawing edges smoother. 115 116 ```ts 117 pen.setAntiAlias(true); 118 ``` 119 120 - You can use the setCapStyle() interface to set the line cap style of the pen. 121 122 ```ts 123 pen.setCapStyle(drawing.CapStyle.SQUARE_CAP); 124 ``` 125 126 CapStyle can be classified into the following types: 127 128 | Wire cap style| Description| Diagram| 129 | -------- | -------- | -------- | 130 | FLAT_CAP | There is no cap style. Both ends of the line segment are cut off square.|  | 131 | 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.|  | 132 | 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.|  | 133 134 - You can use the setJoinStyle() interface to set the pen corner style. 135 136 ```ts 137 pen.setJoinStyle(drawing.JoinStyle.ROUND_JOIN); 138 ``` 139 140 The options of JoinStyle are as follows: 141 142 | Corner style| Description| Diagram| 143 | -------- | -------- | -------- | 144 | MITER_JOIN | The corner type is sharp corner.|  | 145 | ROUND_JOIN | Round corner.|  | 146 | BEVEL_JOIN | Beveled corner.|  | 147 1484. Draw diagram elements as required. For details, see [Primitive Drawing](primitive-drawing-overview.md). 149 1505. If the stroke effect is not required, you can call detachPen() to remove the pen from the canvas. 151 152 ```ts 153 canvas.detachPen(); 154 ``` 155
