鸿蒙开发：Canvas绘制之画笔对象Pen

前言

本文基于Api13

在上篇文章结尾，我们留了一个悬念，在使用DrawingRenderingContext对象进行绘制的时候，是无法更改画笔的粗细，颜色等属性的，如果你需要更改这些属性，必须借助其它对象来实现，如果是修改轮廓信息，可以使用Pen，如果是填充信息，可以使用Brush对象。

我们这篇文章，主要概述如何使用Pen对象来修改绘制的轮廓信息。

Pen对象

如何创建呢，直接通过new即可，主要用于描述所绘制图形形状的轮廓信息。

 const pen = new drawing.Pen()

简单案例

我们把上篇文章中的案例，使用pen对象，修改一下外边框的颜色：

@Entry
@Component
struct DemoPage {
  private context: DrawingRenderingContext = new DrawingRenderingContext()

  build() {
    Canvas(this.context)
      .width("100%")
      .height("100%")
      .onReady(() => {
        //创建pen对象
        const pen = new drawing.Pen()
        //设置设置ARGB格式颜色
        pen.setColor(255, 255, 0, 0)
        //绑定画笔给画布
        this.context.canvas.attachPen(pen)
        //绘制圆形
        this.context.canvas.drawCircle(200, 200, 100)
        //使组件无效，触发组件的重新渲染。
        this.context.invalidate()
      })
  }
}

可以发现，已经发生了变化：

可能大家发现了，上篇文章中明明是黑色的实体圆，怎么改变颜色之后就成了一个圆形了，那是因为，上篇文章中使用的是默认的画笔，没有自己创建，而Pen对象上面已经说过了，主要用于描述所绘制图形形状的轮廓信息，说的直白一点，就是边框，主要想要填充，那么就需要Brush对象，这个，我们在以后的文章中再进行概述。

Pen对象主要方法

设置画笔颜色

目前设置画笔颜色提供了两个方法：

一个是common2D.Color对象形式。

 setColor(color: common2D.Color): void;

一个是直接设置ARGB格式颜色。

 setColor(alpha: number, red: number, green: number, blue: number): void;

虽然都可以进行设置颜色，但是第二个按照官方解读，性能是优于第一个，所以在日常的开发中，建议直接使用第二个。

我们把前言中的案例改下颜色：

        //创建画笔对象
        const pen = new drawing.Pen()
        //设置ARGB格式颜色
        pen.setColor(255, 255, 0, 0)
        //绑定画笔给画布
        this.context.canvas.attachPen(pen)
        //绘制圆形
        this.context.canvas.drawCircle(200, 200, 100)
        //使组件无效，触发组件的重新渲染。
        this.context.invalidate()

设置画笔的线宽

通过setStrokeWidth来设置线宽，如果设置为0，将被视作特殊的极细线宽，在绘制时始终会被绘制为1像素，不随画布的缩放而改变；负数线宽在实际绘制时会被视作0线宽。

在上边的案例中，我们设置一下线宽为5：

  //设置线宽
        pen.setStrokeWidth(5)

运行之后，我们看下效果，可以看待边框明显的变粗了。

是否开启抗锯齿setAntiAlias

通过setAntiAlias设置抗锯齿，开启后，可以使得图形的边缘在显示时更平滑。

我们可以看下效果对比，未开启：

设置抗锯齿：

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

看下效果，明显的平滑了很多。

设置透明度setAlpha

通过setAlpha设置画笔的透明度，参数选取范围在[0, 255]区间内的整数值。

比如，我设置了透明度为60。

  //设置透明度
        pen.setAlpha(60)

我们看下效果：

设置线帽样式setCapStyle

通过setCapStyle来设置线帽样式，有三种模式，第一种就是FLAT_CAP，没有线帽样式，线条头尾端点处横切；第二种是SQUARE_CAP，线帽的样式为方框，线条的头尾端点处多出一个方框，方框宽度和线段一样宽，高度是线段宽度的一半；第三种是ROUND_CAP，线帽的样式为圆弧，线条的头尾端点处多出一个半圆弧，半圆的直径与线段宽度一致。

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

除了以上的方法之外，还有一些不常用的方法，下面一起做一个简单总结。

除了设置一些属性之外，也提供了一些方法，可以获取一些属性。

相关总结

Pen对象主要适用于修改图形形状的轮廓信息，可以修改的有，颜色，线宽，是否抗锯齿，透明度，线帽样式等等属性，当然了如果你想实现一个填充效果，需要切换Brush对象。