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

相关推荐
每次的天空1 小时前
Android-自定义View的实战学习总结
android·学习·kotlin·音视频
恋猫de小郭1 小时前
Flutter Widget Preview 功能已合并到 master,提前在体验毛坯的预览支持
android·flutter·ios
断剑重铸之日2 小时前
Android自定义相机开发(类似OCR扫描相机)
android
随心最为安2 小时前
Android Library Maven 发布完整流程指南
android
岁月玲珑2 小时前
【使用Android Studio调试手机app时候手机老掉线问题】
android·ide·android studio
万少5 小时前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
幽蓝计划6 小时前
HarmonyOS NEXT仓颉开发语言实战案例:电影App
华为·harmonyos
还鮟7 小时前
CTF Web的数组巧用
android
点金石游戏出海7 小时前
每周资讯 | Krafton斥资750亿日元收购日本动画公司ADK;《崩坏:星穹铁道》新版本首日登顶iOS畅销榜
游戏·ios·业界资讯·apple·崩坏星穹铁道
HMS Core8 小时前
HarmonyOS免密认证方案 助力应用登录安全升级
安全·华为·harmonyos