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

前言

本文基于Api13

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

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

TypeScript 复制代码

@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来创建，主要用于描述所绘制图形的填充信息。

TypeScript 复制代码

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

Brush对象主要方法

设置画笔颜色

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

一个是common2D.Color对象形式。

TypeScript 复制代码

 setColor(color: common2D.Color): void;

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

TypeScript 复制代码

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

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

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

TypeScript 复制代码

 //创建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设置抗锯齿，开启后，可以使得图形的边缘在显示时更平滑。

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

设置抗锯齿：

TypeScript 复制代码

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

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

设置透明度setAlpha

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

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

TypeScript 复制代码

//设置透明度
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	重置当前画笔为初始状态。

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

前言

Brush对象

Brush对象主要方法

设置画笔颜色

是否开启抗锯齿setAntiAlias

设置透明度setAlpha

相关总结