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

前言

本文基于Api13

在之前的文章中，我们主要针对Pen对象做了概述，知道了Pen对象主要用于修改绘制图形的轮廓信息，如果你想要实现一个实心的效果，那么就必须需要Brush对象了。

我们还是拿着前边的案例代码做演示，使用Brush对象来实现一个修改颜色的效果：

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

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

效果如下：

上边可以看到和Pen对象有着明显的区别，Pen对象是边框，这里绘制的是一个实心。

Brush对象

和Pen对象的实现方式一致，都是通过new来创建，主要用于描述所绘制图形的填充信息。

//创建Brush对象
const brush = new drawing.Brush()

Brush对象主要方法

设置画笔颜色

和Pen对象一致，设置画笔颜色都是提供了提供了两个方法：

一个是common2D.Color对象形式。

 setColor(color: common2D.Color): void;

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

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

也是和Pen对象一样，由于性能是优于第一个，所以在以后的开发中，建议直接使用第二个。

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

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

可以看到，颜色已经发生了变化：

是否开启抗锯齿setAntiAlias

和Pen对象中的一致，都是通过setAntiAlias设置抗锯齿，开启后，可以使得图形的边缘在显示时更平滑。

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

设置抗锯齿：

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

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

设置透明度setAlpha

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

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

//设置透明度
brush.setAlpha(30)

我们看下效果：

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

方法	参数	概述
setColorFilter	ColorFilter	用于给画刷添加额外的蒙版滤镜。
setMaskFilter	MaskFilter	用于给画笔添加额外的蒙版滤镜。
shaderEffect	ShaderEffect	设置画刷着色器效果。
setShadowLayer	ShadowLayer	阴影层对象。为null时表示清空阴影层效果。
setBlendMode	BlendMode	用于设置画刷的混合模式。
setJoinStyle	JoinStyle	用于设置画笔绘制转角的样式。
setImageFilter	ImageFilter/null	为画刷设置图像滤波器。

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

方法	返回值	概述
getMiterLimit	number	获取折线尖角的限制值。
getColorFilter	ColorFilter	获取画刷的颜色滤波器。
getColor	common2D.Color	获取画刷的颜色。
isAntiAlias	boolean	获取画刷是否开启抗锯齿属性。
getAlpha	number	获取画刷的透明度。
reset	void	重置当前画笔为初始状态。

相关总结

Brush对象主要适用于绘制图形的填充信息，可以修改的有，颜色，是否抗锯齿，透明度等属性，相对比Pen对象，少了几个属性，不过基本上也满足了日常的需求。