基础绘制效果（ArkTS）

场景介绍

在进行绘制时，可以进行一些基础效果的设置，比如设置填充颜色、设置抗锯齿、设置图形描边、设置图形线条连接样式等。

主要通过画刷（Brush）设置填充基础效果，通过画笔（Pen）设置描边基础效果。

填充效果

可以通过画刷设置基础的填充颜色，还可以通过画刷使用混合模式、着色器效果、滤波器效果等实现更多复杂绘制效果，具体可见复杂绘制效果。

接口说明

使用画刷（Brush）设置绘制效果的常用接口如下表所示，详细的使用和参数请见drawing.Brush。

开发步骤

1. 创建画刷Brush对象。

   收起

   自动换行

   深色代码主题

   复制

   // 设置画刷
   const brush = new drawing.Brush();

   BasicEffect.ets

2. 使用画刷设置基础绘制效果，例如设置填充颜色、开启抗锯齿效果等。

   可使用setColor()接口设置填充颜色。

   收起

   自动换行

   深色代码主题

   复制

   // 填充颜色设为红色
   brush.setColor(0xFF, 0xFF, 0x00, 0x00);

   BasicEffect.ets

   可使用setAntiAlias()接口开启抗锯齿效果，以使图形边缘更加平滑。

   收起

   自动换行

   深色代码主题

   复制

   // 开启抗锯齿效果
   brush.setAntiAlias(true);

   BasicEffect.ets

3. 使用attachBrush()接口给Canvas画布设置画刷。

   收起

   自动换行

   深色代码主题

   复制

   // 为画布设置画刷
   canvas.attachBrush(brush);

   BasicEffect.ets

4. 按需绘制图元，具体可见图元绘制一节。

5. 当不需要填充效果时，可以使用detachBrush()接口去除画布中的画刷。

   收起

   自动换行

   深色代码主题

   复制

   // 去除画刷
   canvas.detachBrush();

   BasicEffect.ets

描边效果

可以通过画笔设置基础的描边颜色，还可以通过画笔使用混合模式、路径效果、着色器效果、滤波器效果等实现更多复杂绘制效果，具体可见复杂绘制效果。

接口说明

使用画笔（Pen）设置绘制效果的常用接口如下表所示，详细的使用和参数请见drawing.Pen。

开发步骤

1. 创建画笔Pen对象。

   收起

   自动换行

   深色代码主题

   复制

   // 创建画笔
   let pen = new drawing.Pen();

   BasicEffect.ets

2. 使用画笔设置具体的描边效果（可选以下的一个或者多个效果）。

   • 可使用setColor()接口设置画笔颜色，对应为绘制图形轮廓时使用的颜色。

     收起

     自动换行

     深色代码主题

     复制

     // 设置颜色为红色
     pen.setColor(0xFF, 0xFF, 0x00, 0x00);

     BasicEffect.ets

   • 可使用setStrokeWidth()接口设置画笔的线宽。

     收起

     自动换行

     深色代码主题

     复制

     // 设置线宽
     pen.setStrokeWidth(15);

     BasicEffect.ets

   • 可使用setAntiAlias()接口设置画笔抗锯齿，以使图形绘制边缘更平滑。

     收起

     自动换行

     深色代码主题

     复制

     // 设置抗锯齿效果
     pen.setAntiAlias(true);

     BasicEffect.ets

   • 可使用setCapStyle()接口设置画笔线帽样式。

     收起

     自动换行

     深色代码主题

     复制

     // 设置画笔线帽样式
     pen.setCapStyle(drawing.CapStyle.SQUARE_CAP);

     BasicEffect.ets

     CapStyle线帽样式可选分类对应如下：

     展开

     线帽样式	说明	示意图
     FLAT_CAP	没有线帽样式，线条头尾端点处横切。
     SQUARE_CAP	线帽的样式为方框，线条的头尾端点处多出一个方框，方框宽度和线段一样宽，高度是线段宽度的一半。
     ROUND_CAP	线帽的样式为圆弧，线条的头尾端点处多出一个半圆弧，半圆的直径与线段宽度一致。

   • 可使用setJoinStyle()接口设置画笔转角样式。

     收起

     自动换行

     深色代码主题

     复制

     // 设置画笔转角样式
     pen.setJoinStyle(drawing.JoinStyle.ROUND_JOIN);

     BasicEffect.ets

     JoinStyle转角样式可选分类对应如下：

     展开

     转角样式	说明	示意图
     MITER_JOIN	转角类型为尖角
     ROUND_JOIN	转角类型为圆头
     BEVEL_JOIN	转角类型为平头

3. 使用attachPen()接口给Canvas画布设置画笔。画布将会使用设置的画笔样式和颜色等绘制图形轮廓。

   收起

   自动换行

   深色代码主题

   复制

   // 为画布设置画笔
   canvas.attachPen(pen);

   BasicEffect.ets

4. 按需绘制图元，具体可见图元绘制一节。

5. 当不需要描边效果时，可以使用detachPen()接口去除画布中的画笔。

   收起

   自动换行

   深色代码主题

   复制

   // 去除描边效果
   canvas.detachPen();

   BasicEffect.ets

示例代码

• 图形绘制（ArkTS）