鸿蒙开发: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对象,少了几个属性,不过基本上也满足了日常的需求。

相关推荐
前端世界19 分钟前
HarmonyOS 数据处理性能优化:算法 + 异步 + 分布式实战
算法·性能优化·harmonyos
Android出海1 小时前
Google Play账户与App突遭封禁?紧急应对与快速重构上架策略
android·网络·重构·新媒体运营·产品运营·内容运营
恋猫de小郭1 小时前
Flutter 官方 LLM 动态 UI 库 flutter_genui 发布,让 App UI 自己生成 UI
android·前端·flutter
HarmonyOS小助手1 小时前
【案例+1】HarmonyOS官方模板优秀案例 第7期:金融理财 · 记账应用
harmonyos·鸿蒙·鸿蒙生态
锅拌饭2 小时前
saveEnabled导致的Fragment大量泄露
android
叽哥2 小时前
Kotlin学习第 3 课:Kotlin 流程控制:掌握逻辑分支与循环的艺术
android·java·kotlin
CYRUS_STUDIO2 小时前
别让 so 裸奔!移植 OLLVM 到 NDK 并集成到 Android Studio
android·android studio·llvm
尚久龙2 小时前
安卓学习 之 图片控件和图片按钮
android·java·学习·手机·android studio·安卓
东风西巷2 小时前
Don‘t Sleep:保持电脑唤醒,确保任务不间断
android·电脑·软件需求
tangweiguo030519872 小时前
FlutterActivity vs FlutterFragmentActivity:全面对比与最佳实践
android·flutter