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

相关推荐
似霰2 小时前
安卓adb shell串口基础指令
android·adb
NapleC3 小时前
HarmonyOS:一多能力介绍:一次开发,多端部署
华为·harmonyos
fatiaozhang95274 小时前
中兴云电脑W102D_晶晨S905X2_2+16G_mt7661无线_安卓9.0_线刷固件包
android·adb·电视盒子·魔百盒刷机·魔百盒固件
CYRUS_STUDIO5 小时前
Android APP 热修复原理
android·app·hotfix
我爱学习_zwj5 小时前
【鸿蒙HarmonyOS】深入理解router与Navigation
华为·harmonyos
NapleC5 小时前
HarmonyOS:1.7
harmonyos
鸿蒙布道师6 小时前
鸿蒙NEXT开发通知工具类(ArkTs)
android·ios·华为·harmonyos·arkts·鸿蒙系统·huawei
鸿蒙布道师6 小时前
鸿蒙NEXT开发网络相关工具类(ArkTs)
android·ios·华为·harmonyos·arkts·鸿蒙系统·huawei
大耳猫6 小时前
【解决】Android Gradle Sync 报错 Could not read workspace metadata
android·gradle·android studio