鸿蒙画布组件使用介绍

一、前言

DevEco Studio版本:4.0.0.600

前些天写了一篇 鸿蒙自定义控件实现罗盘数字时钟效果 的文章,有同学私信说能不能介绍鸿蒙中的画布组件,下面文章介绍下鸿蒙中的Canvas画布、CanvasRenderingContext2D绘制组件,实现绘制文本、矩形、线条、圆形、椭圆、三角形、扇形、图片等。

Canvas:提供画布组件,用于自定义绘制图形。

CanvasRenderingContext2D:使用RenderingContext在Canvas组件上进行绘制,绘制对象可以是矩形、文本、图片等,相当于画笔

RenderingContextSettings:用来配置CanvasRenderingContext2D对象的参数,包括是否开启抗锯齿

参考链接:OpenHarmony CanvasRenderingContext2D

二、实现效果

三、具体实现逻辑

1、初始化

private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private img: ImageBitmap = new ImageBitmap("images/startIcon.png")build() {Stack({ alignContent: Alignment.Center }) {Canvas(this.context).padding({ top: 76 }).width('100%').height('100%').onReady(() => {this.drawCanvas()})}.width('100%').height('100%')
}//画布逻辑
private drawCanvas(): void {this.context.fillStyle = '#0080DC' //画笔填充颜色this.context.strokeStyle = '#0080DC' //画笔线条颜色this.context.font = '22px' //字体大小
}

2、画文字

//画文字
this.context.fillText("Hello World!", 10, 10)

3、画矩形

//画矩形
this.context.strokeRect(10, 30, 100, 100)

4、画线条

//画线
this.context.beginPath()
this.context.moveTo(10, 150)
this.context.lineTo(180, 200)
this.context.stroke()

5、画圆形

//画圆形
this.context.beginPath()
this.context.arc(60, 250, 50, 0, 2 * Math.PI)
this.context.stroke()

6、画椭圆形

//画椭圆形
this.context.beginPath()
this.context.ellipse(100, 360, 50, 100, Math.PI * 0.5, 0, Math.PI * 2)
this.context.stroke()

7、画三角形

先画两条线,然后通过closePath()方法实现闭环,依次达到画三角形效果

//画三角形
this.context.beginPath()
this.context.moveTo(10, 500)
this.context.lineTo(60, 420)
this.context.lineTo(120, 500)
this.context.closePath()
this.context.stroke()

 

8、画扇形

先画弧线,在画两条基于弧线起点和终点的线,依次来达到画扇形的效果

//画扇形
this.context.beginPath()
this.context.arc(110, 620, 100, Math.PI, 1.75 * Math.PI)
this.context.moveTo(10, 620)
this.context.lineTo(110, 620)
this.context.lineTo(180.71, 549.29)
this.context.stroke()

9、画图片

//画图片
this.context.drawImage(this.img, 0, 0, 144, 144, 150, 0, 144, 144)

10、画二阶贝赛尔曲线的路径

原理演示动画:

效果:

代码实现:

import display from '@ohos.display'@Entry
@Component
struct Index {private settings: RenderingContextSettings = new RenderingContextSettings(true)private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)private mDisplayWidth: numberprivate mDisplayHeight: numberaboutToAppear() {this.getSize()}// 获取设备宽高计算表盘大小async getSize() {let mDisplay = await display.getDefaultDisplay()this.mDisplayWidth = mDisplay.widththis.mDisplayHeight = mDisplay.height}build() {Stack({ alignContent: Alignment.Center }) {Canvas(this.context).padding({ top: 76 }).width('100%').height('100%').onReady(() => {this.drawCanvas()}).onTouch((event) => this.touchEvent(event))}.width('100%').height('100%')}private drawCanvas(): void {this.context.clearRect(0, 0, this.mDisplayWidth, this.mDisplayHeight)this.context.strokeStyle = '#0080DC' //画笔线条颜色this.context.lineWidth = 3this.context.font = '22px' //字体大小//画第一个圆this.context.beginPath()this.context.arc(20, 200, 5, 0, 2 * Math.PI)this.context.stroke()//画第二个圆this.context.beginPath()this.context.arc(305, 200, 5, 0, 2 * Math.PI)this.context.stroke()//画贝塞尔曲线this.context.beginPath()this.context.moveTo(20, 195)this.context.quadraticCurveTo(this.eventX, this.eventY, 300, 200)this.context.stroke()}@State eventX: number = 0@State eventY: number = 500touchEvent(event: TouchEvent) {switch (event.type) {case TouchType.Down: // 手指按下case TouchType.Move: // 手指移动this.eventX = event.touches[0].xthis.eventY = event.touches[0].ythis.drawCanvas()break}}
}

11、画三阶贝赛尔曲线的路径

原理演示动画:

效果:

代码实现:

import display from '@ohos.display'@Entry
@Component
struct Index {private settings: RenderingContextSettings = new RenderingContextSettings(true)private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)private mDisplayWidth: numberprivate mDisplayHeight: number@State isFirst: boolean = trueaboutToAppear() {this.getSize()}// 获取设备宽高计算表盘大小async getSize() {let mDisplay = await display.getDefaultDisplay()this.mDisplayWidth = mDisplay.widththis.mDisplayHeight = mDisplay.height}build() {Stack({ alignContent: Alignment.Center }) {Canvas(this.context).padding({ top: 76 }).width('100%').height('100%').onReady(() => {this.drawCanvas()}).onTouch((event) => this.touchEvent(event))Button(`点击切换,当前${this.isFirst ? '第一点' : '第二点'}`).onClick(() => {this.isFirst = !this.isFirst})}.alignContent(Alignment.TopStart).width('100%').height('100%')}private drawCanvas(): void {this.context.clearRect(0, 0, this.mDisplayWidth, this.mDisplayHeight)this.context.strokeStyle = '#0080DC' //画笔线条颜色this.context.lineWidth = 3this.context.font = '22px' //字体大小//画第一个圆this.context.beginPath()this.context.arc(20, 200, 5, 0, 2 * Math.PI)this.context.stroke()//画第二个圆this.context.beginPath()this.context.arc(405, 200, 5, 0, 2 * Math.PI)this.context.stroke()//画贝塞尔曲线this.context.beginPath()this.context.moveTo(20, 195)this.context.bezierCurveTo(this.eventFirstX, this.eventFirstX, this.eventSecondX, this.eventSecondY, 400, 200)this.context.stroke()this.context.stroke()}@State eventFirstX: number = 120@State eventFirstY: number = 50@State eventSecondX: number = 200@State eventSecondY: number = 500touchEvent(event: TouchEvent) {switch (event.type) {case TouchType.Down: // 手指按下case TouchType.Move: // 手指移动if (this.isFirst) {this.eventFirstX = event.touches[0].xthis.eventFirstY = event.touches[0].y} else {this.eventSecondX = event.touches[0].xthis.eventSecondY = event.touches[0].y}this.drawCanvas()break}}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/822096.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

股票市场预测模型:未来趋势的智能分析工具

📈 股票市场预测模型:未来趋势的智能分析工具 🤑 🏦 概述 在这个充满变数的股票市场中,投资者需要一个强大的工具来预测未来的价格走势。我们的机器学习模型旨在通过分析历史数据,为投资者提供科学的市场…

03.卸载MySQL

卸载MySQL 1.Windows卸载MySQL8 停止服务 用命令停止或者在服务中停止都可以 net stop mysql(服务名字可以去服务里面看一下)控制面板卸载MySQL 卸载MySQL8.0的程序可以和其他桌面应用程序一样直接在控制面板选择卸载程序,并在程序列表中…

转换为elementUI提示方法为uni-app的showToast提示

// 转换为elementUI提示方法为uni-app的showToast提示---------------------------------------- // 一般提示 Vue.prototype.$message function(title) {title && uni.showToast({icon: none,title}); }; // 成功提示 Vue.prototype.$message.success (title) > …

无效的标记: --release

maven编译项目时候出现:无效的标记: --release 项目背景 介绍一下项目背景: java17 SpringBoot:3.2.0 SpringCloud: 2023.0.0 之前一直用java8开发项目 问题原因 maven所使用的jdk版本和idea所使用的jdk版本不一致导致的。…

客诉技术架构:构建客户满意的数字化支持系统

随着数字化时代的到来,客户体验已经成为企业竞争的关键因素之一。而客诉技术架构作为支持客户服务和解决问题的关键系统,对于企业提升客户满意度和品牌声誉具有重要意义。本文将深入探讨客诉技术架构的重要性、关键要素以及如何构建一个有效的客户支持系…

微服务之网关路由

一、概述 1.1认识网关 什么是网关? 顾明思议,网关就是网络的关口。数据在网络间传输,从一个网络传输到另一网络时就需要经过网关来做数据的路由和转发以及数据安全的校验。 更通俗的来讲,网关就像是以前园区传达室的大爷。 外…

跨境物流系统解决方案:构建全球化供应链的关键步骤

随着全球化的发展,跨境物流已成为国际贸易中不可或缺的重要环节。然而,由于各国之间的政治、法律、文化和语言差异,跨境物流常常面临诸多挑战,如货物清关、运输安全、物流跟踪等问题。因此,构建一个高效、可靠的跨境物…

Docker-Compose一键安装脚本

Docker-Compose一键安装脚本 Docker 安装: wget -qO- get.docker.com | bash systemctl start docker systemctl enable dockerDocker Compose 是 Docker 编排服务的一部分,Compose 可以让用户在集群中部署分布式应用。 Docker Compose 是一个属于 “应…

3.2 iHRM人力资源 - 组织架构 - 编辑及删除

iHRM人力资源 - 组织架构 文章目录 iHRM人力资源 - 组织架构一、编辑功能1.1 表单弹层并数据回显1.2 编辑校验1.3 编辑 二、删除功能 一、编辑功能 编辑功能和新增功能用的组件其实是一个,结构几乎是一样的,其实是复用了组件,我们也省去了很…

Hive-Sql复杂面试题

参考链接:hive sql面试题及答案 - 知乎 1、编写sql实现每个用户截止到每月为止的最大单月访问次数和累计到该月的总访问次数 数据: userid,month,visits A,2015-01,5 A,2015-01,15 B,2015-01,5 A,2015-01,8 B,2015-01,25 A,2015-01,5 A,2015-02,4 A,20…

vite项目创建和打包编译

Vite(法语中“快速”的意思)是一个现代化的前端构建工具,它提供了快速的冷启动、即时的模块热更新(HMR)以及真正的按需编译,从而大幅提升了开发体验。Vite 通过原生 ES 模块(ESM)的优…

用于密集视觉冲击的紧凑三维高斯散射Compact 3D Gaussian Splatting For Dense Visual SLAM

Compact 3D Gaussian Splatting For Dense Visual SLAM 用于密集视觉冲击的紧凑三维高斯散射 Tianchen Deng 邓天辰11Yaohui Chen 陈耀辉11Leyan Zhang 张乐妍11Jianfei Yang 杨健飞22Shenghai Yuan 圣海元22Danwei Wang 王丹伟22Weidong Chen 陈卫东11 Abstract 摘要 …

基于Python的招聘信息爬虫系统的设计与实现

基于Python的招聘信息爬虫系统的设计与实现 Design and Implementation of a Python-based Recruitment Information Crawler System 完整下载链接:基于Python的招聘信息爬虫系统的设计与实现 文章目录 基于Python的招聘信息爬虫系统的设计与实现摘要第一章 绪论1.1 研究背景…

淘宝API商品详情数据在数据分析行业中具有不可忽视的重要性

淘宝商品详情数据在数据分析行业中具有不可忽视的重要性。这些数据为商家、市场分析师以及数据科学家提供了丰富的信息,有助于他们更深入地理解市场动态、消费者行为以及商品竞争态势。以下是淘宝商品详情数据在数据分析行业中的重要性体现: 请求示例&a…

ArcGIS三维景观分层显示

今天将向大家介绍的事在ArcGIS中如何创建多层三维显示。 地表为影像的 地表为地形晕渲的 在土壤分层、油气分层等都有着十分重要的应用。下面我们具体来看看实现过程 一、 准备数据及提取栅格范围 我们这次准备的数据是之前GIS100例-30讲的案例数据。《ArcGIS三维影像图剖面图…

基于栈求解迷宫的单条路径和所有路径

数据结构与算法课的一个实验,记录一下。 单纯想要了解利用栈求解迷宫的算法可以直接跳转到相应的小标题。 完整代码链接code_2024/mazeLab LeePlace_OUC/code - 码云 - 开源中国 (gitee.com) 文章目录 要求栈的实现MazeType类型的组织迷宫的初始化和销毁打印路径…

AIGC实战——VQ-GAN(Vector Quantized Generative Adversarial Network)

AIGC实战——VQ-GAN 0. 前言1. VQ-GAN2. ViT VQ-GAN小结系列链接 0. 前言 本节中,我们将介绍 VQ-GAN (Vector Quantized Generative Adversarial Network) 和 ViT VQ-GAN,它们融合了变分自编码器 (Variational Autoencoder, VAE)、Transformer 和生成对…

数字孪生与机械运行监控

随着信息技术的快速发展,传统装备正在向智能化和信息化方向转变。装备特别是关键装备持续良好运行对客户来说特别重要,这样装备运行状态的监控十分必要。将装备监控技术与网络通信技术、传感器技术深度融合,可以加速装备向智能化迈进&#xf…

C# 创建Bitmap位图中的PixelFormat如何影响stride步幅的计算

创建位图的方法 // // 摘要: // 用指定的大小、像素格式和像素数据初始化 System.Drawing.Bitmap 类的新实例。 // // 参数: // width: // 新 System.Drawing.Bitmap 的宽度(以像素为单位)。 // // height: // 新 System.Drawing.Bitma…

Vue加载glb / gltf模型(如何在vue中使用Three.js,vue使用threejs加载glb模型)

简介:Three.js 是一个用于在 Web 上创建和显示 3D 图形的 JavaScript 库。它提供了丰富的功能和灵活的 API,使开发者可以轻松地在网页中创建各种 3D 场景、模型和动画效果。可以用来展示产品模型、建立交互式场景、游戏开发、数据可视化、教育和培训等等…