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

简介: Pen对象主要适用于修改图形形状的轮廓信息,可以修改的有,颜色,线宽,是否抗锯齿,透明度,线帽样式等等属性,当然了如果你想实现一个填充效果,需要切换Brush对象。

前言


本文基于Api13


在上篇文章结尾,我们留了一个悬念,在使用DrawingRenderingContext对象进行绘制的时候,是无法更改画笔的粗细,颜色等属性的,如果你需要更改这些属性,必须借助其它对象来实现,如果是修改轮廓信息,可以使用Pen,如果是填充信息,可以使用Brush对象。

我们这篇文章,主要概述如何使用Pen对象来修改绘制的轮廓信息。

Pen对象


如何创建呢,直接通过new即可,主要用于描述所绘制图形形状的轮廓信息


const pen = new drawing.Pen()


简单案例

我们把上篇文章中的案例,使用pen对象,修改一下外边框的颜色:

@Entry
@Component
struct DemoPage {
  private context: DrawingRenderingContext = new DrawingRenderingContext()
  build() {
    Canvas(this.context)
      .width("100%")
      .height("100%")
      .onReady(() => {
        //创建pen对象
        const pen = new drawing.Pen()
        //设置设置ARGB格式颜色
        pen.setColor(255, 255, 0, 0)
        //绑定画笔给画布
        this.context.canvas.attachPen(pen)
        //绘制圆形
        this.context.canvas.drawCircle(200, 200, 100)
        //使组件无效,触发组件的重新渲染。
        this.context.invalidate()
      })
  }
}


可以发现,已经发生了变化:

可能大家发现了,上篇文章中明明是黑色的实体圆,怎么改变颜色之后就成了一个圆形了,那是因为,上篇文章中使用的是默认的画笔,没有自己创建,而Pen对象上面已经说过了,主要用于描述所绘制图形形状的轮廓信息,说的直白一点,就是边框,主要想要填充,那么就需要Brush对象,这个,我们在以后的文章中再进行概述。


Pen对象主要方法

设置画笔颜色


目前设置画笔颜色提供了两个方法:

一个是common2D.Color对象形式。

setColor(color: common2D.Color): void;


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


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


虽然都可以进行设置颜色,但是第二个按照官方解读,性能是优于第一个,所以在日常的开发中,建议直接使用第二个。

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


//创建画笔对象
        const pen = new drawing.Pen()
        //设置ARGB格式颜色
        pen.setColor(255, 255, 0, 0)
        //绑定画笔给画布
        this.context.canvas.attachPen(pen)
        //绘制圆形
        this.context.canvas.drawCircle(200, 200, 100)
        //使组件无效,触发组件的重新渲染。
        this.context.invalidate()


设置画笔的线宽


通过setStrokeWidth来设置线宽,如果设置为0,将被视作特殊的极细线宽,在绘制时始终会被绘制为1像素,不随画布的缩放而改变;负数线宽在实际绘制时会被视作0线宽。


在上边的案例中,我们设置一下线宽为5:


//设置线宽
        pen.setStrokeWidth(5)


运行之后,我们看下效果,可以看待边框明显的变粗了。


是否开启抗锯齿setAntiAlias


通过setAntiAlias设置抗锯齿,开启后,可以使得图形的边缘在显示时更平滑。


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



设置抗锯齿:


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


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


设置透明度setAlpha


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

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

//设置透明度
        pen.setAlpha(60)


我们看下效果:

设置线帽样式setCapStyle


通过setCapStyle来设置线帽样式,有三种模式,第一种就是FLAT_CAP,没有线帽样式,线条头尾端点处横切;第二种是SQUARE_CAP,线帽的样式为方框,线条的头尾端点处多出一个方框,方框宽度和线段一样宽,高度是线段宽度的一半;第三种是ROUND_CAP,线帽的样式为圆弧,线条的头尾端点处多出一个半圆弧,半圆的直径与线段宽度一致。


//设置线帽样式
pen.setCapStyle(drawing.CapStyle.SQUARE_CAP)

除了以上的方法之外,还有一些不常用的方法,下面一起做一个简单总结。

方法

参数

概述

setMiterLimit

number

设置折线尖角长度与线宽的最大比值,当画笔绘制一条折线,并且JoinStyle为MITER_JOIN时,若尖角长度与线宽的比值大于限制值,则该折角使用BEVEL_JOIN绘制。

setImageFilter

ImageFilter /null

为画笔设置图像滤波器。

setColorFilter

ColorFilter

用于给画笔添加额外的颜色滤波器。

setMaskFilter

MaskFilter

用于给画笔添加额外的蒙版滤镜。

setPathEffect

PathEffect

设置画笔路径效果。

shaderEffect

ShaderEffect

设置画笔着色器效果。

setShadowLayer

ShadowLayer

设置画笔阴影层效果。当前仅在绘制文字时生效。

setBlendMode

BlendMode

用于设置画笔的混合模式。

setJoinStyle

JoinStyle

用于设置画笔绘制转角的样式。

setDither

boolean

开启画笔的抖动绘制效果。抖动绘制可以使得绘制出的颜色更加真实


除了设置一些属性之外,也提供了一些方法,可以获取一些属性。

方法

返回值

概述

getMiterLimit

number

获取折线尖角的限制值。

getColorFilter

ColorFilter

获取画笔的颜色滤波器。

getColor

common2D.Color

获取画笔的颜色。

getWidth

number

获取画笔的线宽属性,线宽描述了画笔绘制图形轮廓的宽度

isAntiAlias

boolean

获取画笔是否开启抗锯齿属性。

getAlpha

number

获取画笔的透明度。

getJoinStyle

JoinStyle

用于获取画笔绘制转角的样式。

getCapStyle

CapStyle

用于获取画笔的线帽样式。

getFillPath

boolean

获取使用画笔绘制的源路径轮廓,并用目标路径表示。

reset

void

重置当前画笔为初始状态。


相关总结


Pen对象主要适用于修改图形形状的轮廓信息,可以修改的有,颜色,线宽,是否抗锯齿,透明度,线帽样式等等属性,当然了如果你想实现一个填充效果,需要切换Brush对象。

相关文章
|
18天前
|
存储 缓存 5G
鸿蒙 HarmonyOS NEXT端云一体化开发-云存储篇
本文介绍用户登录后获取昵称、头像的方法,包括通过云端API和AppStorage两种方式,并实现上传头像至云存储及更新用户信息。同时解决图片缓存问题,添加上传进度提示,支持自动登录判断,提升用户体验。
90 0
|
18天前
|
存储 负载均衡 数据库
鸿蒙 HarmonyOS NEXT端云一体化开发-云函数篇
本文介绍基于华为AGC的端云一体化开发流程,涵盖项目创建、云函数开通、应用配置及DevEco集成。重点讲解云函数的编写、部署、调用与传参,并涉及环境变量设置、负载均衡、重试机制与熔断策略等高阶特性,助力开发者高效构建稳定云端服务。
178 0
鸿蒙 HarmonyOS NEXT端云一体化开发-云函数篇
|
18天前
|
存储 JSON 数据建模
鸿蒙 HarmonyOS NEXT端云一体化开发-云数据库篇
云数据库采用存储区、对象类型、对象三级结构,支持灵活的数据建模与权限管理,可通过AGC平台或本地项目初始化,实现数据的增删改查及端侧高效调用。
50 0
|
18天前
|
存储 开发者 容器
鸿蒙 HarmonyOS NEXT星河版APP应用开发-ArkTS面向对象及组件化UI开发使用实例
本文介绍了ArkTS语言中的Class类、泛型、接口、模块化、自定义组件及状态管理等核心概念,并结合代码示例讲解了对象属性、构造方法、继承、静态成员、访问修饰符等内容,同时涵盖了路由管理、生命周期和Stage模型等应用开发关键知识点。
150 0
鸿蒙 HarmonyOS NEXT星河版APP应用开发-ArkTS面向对象及组件化UI开发使用实例
|
18天前
鸿蒙 HarmonyOS NEXT星河版APP应用开发-阶段三
本文介绍了UI开发中的样式复用与组件构建技术,涵盖@Extend、@Styles和@Builder的使用方法,并通过Swiper轮播、Scroll滚动、Tabs导航等常用组件实现典型界面效果,结合生肖抽卡、小米轮播、回顶按钮等案例,展示实际应用技巧。
77 0
|
18天前
鸿蒙 HarmonyOS NEXT星河版APP应用开发-阶段二
本文介绍鸿蒙应用界面开发中的弹性布局(Flex)、绝对定位、层叠布局及ArkTS语法进阶,涵盖字符串拼接、类型转换、数组操作、条件与循环语句,并结合B站视频卡、支付宝首页等案例,深入讲解点击事件、状态管理与界面交互功能。
84 0
鸿蒙 HarmonyOS NEXT星河版APP应用开发-阶段二
|
7天前
|
传感器 监控 安全
HarmonyOS NEXT 5.0 的星闪(NearLink)开发应用案例
V哥分享HarmonyOS NEXT 5.0星闪开发实战,涵盖智能车钥匙无感解锁与工业传感器监控。低延迟、高可靠,代码完整,速来学习!
|
4月前
|
容器
HarmonyOS NEXT仓颉开发语言实战案例:外卖App
仓颉语言实战分享,教你如何用仓颉开发外卖App界面。内容包括页面布局、导航栏自定义、搜索框实现、列表模块构建等,附完整代码示例。轻松掌握Scroll、List等组件使用技巧,提升HarmonyOS应用开发能力。
|
3月前
|
安全 JavaScript API
鸿蒙开发核心要素
鸿蒙开发核心要素
|
4月前
|
存储 IDE 定位技术
【HarmonyOS 5】鸿蒙组件&模板服务详解 - 助力高效开发的利器
在移动应用开发领域,效率与质量始终是开发者追求的核心目标。鸿蒙系统作为新兴的操作系统,为开发者提供了丰富且强大的开发资源,其中鸿蒙组件&模板服务更是成为开发者快速构建高质量应用的得力助手。
136 0