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

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

前言


本文基于Api13


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

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

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


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


Brush对象主要方法

设置画笔颜色


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

一个是common2D.Color对象形式。

setColor(color: common2D.Color): void;


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


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


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


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


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


我们可以看下效果对比,未开启:


设置抗锯齿:


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


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


设置透明度setAlpha


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

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

//设置透明度
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月前
|
移动开发 前端开发 Android开发
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
314 12
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
2月前
|
移动开发 JavaScript 应用服务中间件
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
283 5
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
2月前
|
移动开发 Rust JavaScript
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
657 4
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
2月前
|
移动开发 Android开发
【03】建立隐私关于等相关页面和内容-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【03】建立隐私关于等相关页面和内容-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
177 0
|
3月前
|
存储 缓存 5G
鸿蒙 HarmonyOS NEXT端云一体化开发-云存储篇
本文介绍用户登录后获取昵称、头像的方法,包括通过云端API和AppStorage两种方式,并实现上传头像至云存储及更新用户信息。同时解决图片缓存问题,添加上传进度提示,支持自动登录判断,提升用户体验。
191 1
|
3月前
|
存储 负载均衡 数据库
鸿蒙 HarmonyOS NEXT端云一体化开发-云函数篇
本文介绍基于华为AGC的端云一体化开发流程,涵盖项目创建、云函数开通、应用配置及DevEco集成。重点讲解云函数的编写、部署、调用与传参,并涉及环境变量设置、负载均衡、重试机制与熔断策略等高阶特性,助力开发者高效构建稳定云端服务。
427 1
鸿蒙 HarmonyOS NEXT端云一体化开发-云函数篇
|
3月前
|
传感器 监控 安全
HarmonyOS NEXT 5.0 的星闪(NearLink)开发应用案例
V哥分享HarmonyOS NEXT 5.0星闪开发实战,涵盖智能车钥匙无感解锁与工业传感器监控。低延迟、高可靠,代码完整,速来学习!
595 0
|
移动开发 Ubuntu 网络协议
嵌入式linux/鸿蒙开发板(IMX6ULL)开发 (二)Ubuntu操作入门与Linux常用命令(中)
嵌入式linux/鸿蒙开发板(IMX6ULL)开发 (二)Ubuntu操作入门与Linux常用命令
359 1
嵌入式linux/鸿蒙开发板(IMX6ULL)开发 (二)Ubuntu操作入门与Linux常用命令(中)
|
XML Web App开发 开发框架
鸿蒙开发入门 | 开发第一个鸿蒙应用+页面跳转
准备好鸿蒙开发环境后,接下来就需要创建鸿蒙项目,掌握项目的创建过程以及配置。项目创建好后,需要把项目运行在模拟器上,鸿蒙的模拟和安卓模拟器有些不同,鸿蒙提供远程模拟器和本地模拟器,通过登录华为账号登录在线模拟器,使用DevEco Studio可将项目部署到远程模拟器中。
1758 1
鸿蒙开发入门 | 开发第一个鸿蒙应用+页面跳转
|
存储 Ubuntu 前端开发
嵌入式linux/鸿蒙开发板(IMX6ULL)开发 (二)Ubuntu操作入门与Linux常用命令(下)
嵌入式linux/鸿蒙开发板(IMX6ULL)开发 (二)Ubuntu操作入门与Linux常用命令
662 0
嵌入式linux/鸿蒙开发板(IMX6ULL)开发 (二)Ubuntu操作入门与Linux常用命令(下)

热门文章

最新文章