鸿蒙开发: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 重置当前画笔为初始状态。

相关总结

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

相关推荐
帅次24 分钟前
Flutter DropdownButton 详解
android·flutter·ios·kotlin·gradle·webview
际宇人30 分钟前
移动端APP阿里云验证码2.0接入实录
android
.又是新的一天.44 分钟前
02_MySQL安装及配置
android·数据库·mysql
别说我什么都不会1 小时前
OpenHarmony解读之设备认证:sts协议-客户端发起sts end请求
物联网·嵌入式·harmonyos
QING6181 小时前
Kotlin groupBy用法及代码示例
android·kotlin·源码阅读
QING6181 小时前
Kotlin getOrElse用法及代码示例
android·kotlin·源码阅读
QING6181 小时前
Kotlin getOrNull用法及代码示例
android·kotlin·源码阅读
QING6181 小时前
Kotlin getValue用法及代码示例
android·kotlin·源码阅读
QING6181 小时前
Kotlin getOrPut用法及代码示例
android·kotlin·源码阅读
QING6181 小时前
Kotlin groupingBy用法及代码示例
android·kotlin·源码阅读