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

前言

本文基于Api13

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

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

Pen对象

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

TypeScript 复制代码

 const pen = new drawing.Pen()

简单案例

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

TypeScript 复制代码

@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对象形式。

TypeScript 复制代码

 setColor(color: common2D.Color): void;

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

TypeScript 复制代码

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

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

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

TypeScript 复制代码

        //创建画笔对象
        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：

TypeScript 复制代码

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

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

是否开启抗锯齿setAntiAlias

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

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

设置抗锯齿：

TypeScript 复制代码

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

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

设置透明度setAlpha

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

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

TypeScript 复制代码

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

我们看下效果：

设置线帽样式setCapStyle

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

TypeScript 复制代码

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

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

方法	参数	概述
setMiterLimit	number	设置折线尖角长度与线宽的最大比值，当画笔绘制一条折线，并且JoinStyle为MITER_JOIN时，若尖角长度与线宽的比值大于限制值，则该折角使用BEVEL_JOIN绘制。
setImageFilter	ImageFilter /null	为画笔设置图像滤波器。
setColorFilter	ColorFilter	用于给画笔添加额外的颜色滤波器。
setMaskFilter	MaskFilter	用于给画笔添加额外的蒙版滤镜。
setPathEffect	PathEffect	设置画笔路径效果。
shaderEffect	ShaderEffect	设置画笔着色器效果。
setShadowLayer	ShadowLayer	设置画笔阴影层效果。当前仅在绘制文字时生效。
setBlendMode	BlendMode	用于设置画笔的混合模式。
setJoinStyle	JoinStyle	用于设置画笔绘制转角的样式。
setDither	boolean	开启画笔的抖动绘制效果。抖动绘制可以使得绘制出的颜色更加真实

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

方法	返回值	概述
getMiterLimit	number	获取折线尖角的限制值。
getColorFilter	ColorFilter	获取画笔的颜色滤波器。
getColor	common2D.Color	获取画笔的颜色。
getWidth	number	获取画笔的线宽属性，线宽描述了画笔绘制图形轮廓的宽度
isAntiAlias	boolean	获取画笔是否开启抗锯齿属性。
getAlpha	number	获取画笔的透明度。
getJoinStyle	JoinStyle	用于获取画笔绘制转角的样式。
getCapStyle	CapStyle	用于获取画笔的线帽样式。
getFillPath	boolean	获取使用画笔绘制的源路径轮廓，并用目标路径表示。
reset	void	重置当前画笔为初始状态。

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

前言

Pen对象

简单案例

Pen对象主要方法

设置画笔颜色

设置画笔的线宽

是否开启抗锯齿setAntiAlias

设置透明度setAlpha

设置线帽样式setCapStyle

相关总结