# 基础绘制效果（ArkTS） ## 场景介绍 在进行绘制时，可以进行一些基础效果的设置，比如设置填充颜色、设置抗锯齿、设置图形描边、设置图形线条连接样式等。 主要通过画刷（Brush）设置填充基础效果，通过画笔（Pen）设置描边基础效果。 ## 填充效果 可以通过画刷设置基础的填充颜色，还可以通过画刷使用混合模式、着色器效果、滤波器效果等实现更多复杂绘制效果，具体可见[复杂绘制效果](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/complex-drawing-effect-arkts)。 ### 接口说明 使用画刷（Brush）设置绘制效果的常用接口如下表所示，详细的使用和参数请见[drawing.Brush](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-apis-graphics-drawing-brush)和[drawing.Canvas](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-apis-graphics-drawing-canvas)。 |接口|描述| |:----------------------------------------------------------------------|:-----------------------------------------------------------| |attachBrush(brush: Brush): void|用于设置画刷给画布，画布将会使用设置的画刷样式和颜色去填充绘制的图形形状。| |setColor(alpha: number, red: number, green: number, blue: number): void|用于设置画刷的颜色属性，颜色属性描述了画刷填充图形时使用的颜色。| |setAntiAlias(aa: boolean) : void|用于设置画刷的抗锯齿属性，设置为true则画刷在绘制图形时会对图形的边缘像素进行半透明的模糊处理，以使图形边缘更加平滑。| |detachBrush(): void|用于去除画布中的画刷，执行后画布将不使用此前设置的画刷，恢复到默认填充效果。| ### 开发步骤 1. 创建画刷Brush对象。 ```TypeScript // 创建画刷 const brush = new drawing.Brush(); ``` 2. 使用画刷设置基础绘制效果，例如设置填充颜色、开启抗锯齿效果等。 可使用setColor()接口设置填充颜色。 ```TypeScript // 填充颜色设为红色 brush.setColor(0xFF, 0xFF, 0x00, 0x00); ``` 可使用setAntiAlias()接口开启抗锯齿效果，以使图形边缘更加平滑。 ```TypeScript // 开启抗锯齿效果 brush.setAntiAlias(true); ``` 3. 使用attachBrush()接口给Canvas画布设置画刷。 ```TypeScript // 为画布设置画刷 canvas.attachBrush(brush); ``` 4. 按需绘制图元，具体可见[图元绘制](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/primitive-drawing-overview)一节。 5. 当不需要填充效果时，可以使用detachBrush()接口去除画布中的画刷。 ```TypeScript // 去除画刷 canvas.detachBrush(); ``` ## 描边效果 可以通过画笔设置基础的描边颜色，还可以通过画笔使用混合模式、路径效果、着色器效果、滤波器效果等实现更多复杂绘制效果，具体可见[复杂绘制效果](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/complex-drawing-effect-arkts)。 ### 接口说明 使用画笔（Pen）设置绘制效果的常用接口如下表所示，详细的使用和参数请见[drawing.Pen](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-apis-graphics-drawing-pen)和[drawing.Canvas](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-apis-graphics-drawing-canvas)。 |接口|描述| |:----------------------------------------------------------------------|:-------------------------------------------------------------------| |attachPen(pen: Pen): void|用于设置画笔给画布，画布将会使用设置画笔的样式和颜色去绘制图形形状的轮廓。| |setColor(alpha: number, red: number, green: number, blue: number): void|用于设置画笔的颜色属性，颜色属性描述了画笔绘制图形轮廓时使用的颜色。| |setStrokeWidth(width: number) : void|用于设置画笔的线宽。0线宽被视作特殊的极细线宽，在绘制时始终会被绘制为1像素，不随画布的缩放而改变；负数线宽在实际绘制时会被视作0线宽。| |setAntiAlias(aa: boolean) : void|用于设置画笔的抗锯齿属性，设置为true则画笔在绘制图形时会对图形的边缘像素进行半透明的模糊处理。| |setCapStyle(style: CapStyle): void|用于设置画笔线帽样式。| |setJoinStyle(style: JoinStyle): void|用于设置画笔绘制转角的样式。| |detachPen(): void|用于去除画布中的画笔，执行后画布将不去绘制图形形状的轮廓，恢复到默认的描边效果。| ### 开发步骤 1. 创建画笔Pen对象。 ```TypeScript // 创建画笔 let pen = new drawing.Pen(); ``` 2. 使用画笔设置具体的描边效果（可选以下的一个或者多个效果）。 * 可使用setColor()接口设置画笔颜色，对应为绘制图形轮廓时使用的颜色。 ```TypeScript // 设置颜色为红色 pen.setColor(0xFF, 0xFF, 0x00, 0x00); ``` * 可使用setStrokeWidth()接口设置画笔的线宽。 ```TypeScript // 设置线宽 pen.setStrokeWidth(15); ``` * 可使用setAntiAlias()接口设置画笔抗锯齿，以使图形绘制边缘更平滑。 ```TypeScript // 设置抗锯齿效果 pen.setAntiAlias(true); ``` * 可使用setCapStyle()接口设置画笔线帽样式。 ```TypeScript // 设置画笔线帽样式 pen.setCapStyle(drawing.CapStyle.SQUARE_CAP); ``` CapStyle线帽样式可选分类对应如下： |线帽样式|说明|示意图| |:---------|:---------------------------------------------|:----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| |FLAT_CAP|没有线帽样式，线条头尾端点处横切。|![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/b/v3/VVswcRnjSPySMsJaN9qR5Q/zh-cn_image_0000002779092359.jpg?HW-CC-KV=V1&HW-CC-Date=20260929T121647Z&HW-CC-Expire=31536000000&HW-CC-Sign=0D6357DDFD07511E647D18C78DA5CC3EFE5753102C6655AE0234A64A5B3CC22E)| |SQUARE_CAP|线帽的样式为方框，线条的头尾端点处多出一个方框，方框宽度和线段一样宽，高度是线段宽度的一半。|![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/13/v3/cqlRUU2ASWOqrnOROot19g/zh-cn_image_0000002778932501.jpg?HW-CC-KV=V1&HW-CC-Date=20260929T121647Z&HW-CC-Expire=31536000000&HW-CC-Sign=E65B5F6081BBB82FE540D458491EBF60399C420D602A950C7A5FF77DF8D486FE)| |ROUND_CAP|线帽的样式为圆弧，线条的头尾端点处多出一个半圆弧，半圆的直径与线段宽度一致。|![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/c1/v3/XupDBWmAQjufkbtjDxBEXQ/zh-cn_image_0000002749333420.jpg?HW-CC-KV=V1&HW-CC-Date=20260929T121647Z&HW-CC-Expire=31536000000&HW-CC-Sign=7433ACE0316976A82B6E2B88F284164C149CE6581F9CBA6494231C0AAD4196BC)| * 可使用setJoinStyle()接口设置画笔转角样式。 ```TypeScript // 设置画笔转角样式 pen.setJoinStyle(drawing.JoinStyle.ROUND_JOIN); ``` JoinStyle转角样式可选分类对应如下： |转角样式|说明|示意图| |:---------|:------|:----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| |MITER_JOIN|转角类型为尖角|![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/a2/v3/hvxrxkdLTOWwQ7Yf02MR7A/zh-cn_image_0000002749493302.png?HW-CC-KV=V1&HW-CC-Date=20260929T121647Z&HW-CC-Expire=31536000000&HW-CC-Sign=3DDA3C09D2DC4FAB7B7E95F9ABECC2C49A500B8854C0139A8A654FB1750AD103)| |ROUND_JOIN|转角类型为圆角|![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/21/v3/TsVgR7TjTUGpz2gO95cjXA/zh-cn_image_0000002779092361.png?HW-CC-KV=V1&HW-CC-Date=20260929T121647Z&HW-CC-Expire=31536000000&HW-CC-Sign=ECAC0132C05CCA5C81F4203198B242A6FF4CD27644DBE2D53BC01CD2662F3DD8)| |BEVEL_JOIN|转角类型为平角|![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/74/v3/8ClIYWseReGgaJdN7EwLDw/zh-cn_image_0000002778932503.png?HW-CC-KV=V1&HW-CC-Date=20260929T121647Z&HW-CC-Expire=31536000000&HW-CC-Sign=E1FE1F989CAD7E51C49B735587546B2AB43AA026EDF3CC13DC6CF50ACFC5D417)| 3. 使用attachPen()接口给Canvas画布设置画笔。画布将会使用设置的画笔样式和颜色等绘制图形轮廓。 ```TypeScript // 为画布设置画笔 canvas.attachPen(pen); ``` 4. 按需绘制图元，具体可见[图元绘制](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/primitive-drawing-overview)一节。 5. 当不需要描边效果时，可以使用detachPen()接口去除画布中的画笔。 ```TypeScript // 去除描边效果 canvas.detachPen(); ``` ## 示例代码 * [图形绘制（ArkTS）](https://gitcode.com/HarmonyOS_Samples/guide-snippets/tree/master/ArkGraphics2D/Drawing/ArkTSGraphicsDraw)