「Mac畅玩鸿蒙与硬件20」鸿蒙UI组件篇10 - Canvas 组件自定义绘图

news2024/11/23 14:59:36

Canvas 组件在鸿蒙应用中用于绘制自定义图形,提供丰富的绘制功能和灵活的定制能力。通过 Canvas,可以创建矩形、圆形、路径、文本等基础图形,为鸿蒙应用增添个性化的视觉效果。本篇将介绍 Canvas 组件的基础操作,涵盖绘制矩形、圆形、路径和文本的实例。

在这里插入图片描述

关键词
  • Canvas 组件
  • 绘图
  • 矩形绘制
  • 圆形绘制
  • 路径与文本

一、Canvas 组件概述

Canvas 组件是鸿蒙中用于自定义图形绘制的关键组件。通过 Canvas,开发者可以绘制多种图形元素,包括矩形、圆形、路径和文本,满足应用中各种个性化的设计需求。


二、基础图形绘制
2.1 绘制矩形

Canvas 提供了 fillRectstrokeRect 方法,可以绘制填充矩形和描边矩形。

@Entry
@Component
struct RectangleCanvasExample {
   
  build() {
   
    Column() {
   
      Canvas(this.context)
        .width('100%')
        .height(500)
        .onReady(() => {
   
          // 设置填充颜色为蓝色
          this.context.fillStyle = '#0000FF';
          // 绘制填充矩形
          this.context.fillRect(150, 150, 300, 200);

          // 设置描边颜色为黑色
          this.context.strokeStyle = '#000000';
          // 设置描边宽度为 5
          this.context.lineWidth = 5;
          // 绘制描边矩形
          this.context.strokeRect(150, 150, 300, 200);
        });
    }
  }

  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D();
}

效果示例:在画布上绘制一个蓝色填充、黑色边框的矩形。

在这里插入图片描述


2.2 绘制圆形

使用 arc 方法可以绘制圆形或圆弧,通过设置圆心坐标、半径等参数,可以实现完整圆形和部分圆弧的绘制。

@Entry
@Component
struct CircleCanvasExample {
   
  build

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

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

相关文章

spark-on-k8s 介绍

spark-on-k8s 介绍 摘要 最近一段时间都在做与spark相关的项目,主要是与最近今年比较火的隐私计算相结合,主要是在机密计算领域使用spark做大数据分析、SQL等业务,从中也了解到了一些spark的知识,现在做一个简单的总结&#xff…

【运动的&足球】足球场地区域图像分割系统源码&数据集全套:改进yolo11-RFAConv

改进yolo11-ContextGuidedDown等200全套创新点大全:足球场地区域图像分割系统源码&数据集全套 1.图片效果展示 项目来源 人工智能促进会 2024.10.28 注意:由于项目一直在更新迭代,上面“1.图片效果展示”和“2.视频效果展示”展…

C语言 | Leetcode C语言题解之第525题连续数组

题目: 题解: struct HashTable {int key, val;UT_hash_handle hh; };int findMaxLength(int* nums, int numsSize) {int maxLength 0;struct HashTable* hashTable NULL;struct HashTable* tmp malloc(sizeof(struct HashTable));tmp->key 0, tm…

Java JUC(四) 自定义线程池实现与原理分析

目录 一. 阻塞队列 BlockingQue 二. 拒绝策略 RejectPolicy 三. 线程池 ThreadPool 四. 模拟运行 在 Java基础(二) 多线程编程 中,我们简单介绍了线程池 ThreadPoolExecutor 的核心概念与基本使用。在本文中,我们将基于前面学…

金华迪加 现场大屏互动系统 mobile.do.php 任意文件上传漏洞复现

0x01 产品简介 金华迪加现场大屏互动系统是一种集成了先进技术和创意设计的互动展示解决方案,旨在通过大屏幕和多种交互方式,为观众提供沉浸式的互动体验。该系统广泛应用于各类活动、展览、会议等场合,能够显著提升现场氛围和参与者的体验感。 0x02 漏洞概述 金华迪加 现…

2024年系统架构师---下午题目真题

1. 数据仓库架构风格的优缺点: 优点: 1)数据统一保存在中央数据仓库,数据处理流程相对独立,支持交互式处理。 缺点: 1)仓库风格不支持并行,效率低。 2)仓库风格容错性和健…

JVM、JRE、JDK区别和联系

JVM(java virtual machine):Java虚拟机主要包括类加载器、执行引擎、本地接口和运行时数据区,其中运行时数据区是JVM的主要部分。JVM的主要作用是将class文件中的二进制数据加载到运行时数据区的方法区,在堆区生成相应的java.lang.Class对象&…

Vue中ref、reactive、toRef、toRefs的区别

一、ref、reactive setup 函数中默认定义的变量并不是响应式的(即数据变了以后页面不会跟着变),如果想让变量变为响应式的变量,需要使用 ref 和 reactive 函数修饰变量。 ref 函数可以把基本类型变量变为响应式引用reactive 函数…

Linux安装es和kibana

安装Elasticsearch 参考文档:https://www.elastic.co/guide/en/elasticsearch/reference/current/targz.html#targz-enable-indices 基本步骤下载包,解压,官网提示: wget https://artifacts.elastic.co/downloads/elasticsearc…

spreadjs实现类似于企业微信的协同提示

核心代码 import * as GC from "grapecity-software/spread-sheets";function HighlightLayout(name:string){this.name name;this._eventNs ".HighlightLayout" name || "";this._sheetRangesInfo {} } HighlightLayout.prototype.bind f…

Linux云计算 |【第五阶段】PROJECT3-DAY1

主要内容: 跳板机(堡垒机)的概念、部署JumpeServer 一、跳板机(堡垒机)的概念 跳板机(Jump Server 或 Bastion Host)是一种网络安全设备或服务器,也称堡垒机,是一类可作…

PAT甲级-1133 Splitting A Linked List

题目 题目大意 给定一个链表的首节点地址和节点个数&#xff0c;以及一个数k。要求重新排列该链表&#xff0c;使其按<0 &#xff0c;> 0 && < k&#xff0c;>k 的顺序排序。但是不改变原有顺序&#xff0c;比如-4 -> -6 -> -2&#xff0c;不需要再…

重新回顾反向传播与梯度下降:训练神经网络的基石

有关反向传播与梯度下降&#xff1a;流程与公式推导 背景前向传播反向传播 背景 反向传播则是一种训练神经网络的算法&#xff0c;目前我们使用的深度学习模型大都是通过这种方法训练的。它的核心思想是通过计算损失函数相对于每个参数的导数&#xff0c;来更新神经网络中的权重…

Java | Leetcode Java题解之第524题通过删除字母匹配到字典里最长单词

题目&#xff1a; 题解&#xff1a; class Solution {public String findLongestWord(String s, List<String> dictionary) {int m s.length();int[][] f new int[m 1][26];Arrays.fill(f[m], m);for (int i m - 1; i > 0; --i) {for (int j 0; j < 26; j) {…

PHP合成图片,生成海报图,poster-editor使用说明

之前写过一篇使用Grafika插件生成海报图的文章&#xff0c;但是当我再次使用时&#xff0c;却发生了错误&#xff0c;回看Grafika文档&#xff0c;发现很久没更新了&#xff0c;不兼容新版的GD&#xff0c;所以改用了intervention/image插件来生成海报图。 但是后来需要对海报…

机器人领域中的scaling law:通过复现斯坦福机器人UMI——探讨数据规模化定律(含UMI的复现关键)

前言 在24年10.26/10.27两天&#xff0c;我司七月在线举办的七月大模型机器人线下营时&#xff0c;我们带着大家一步步复现UMI「关于什么是UMI&#xff0c;详见此文&#xff1a;UMI——斯坦福刷盘机器人&#xff1a;从手持夹持器到动作预测Diffusion Policy(含代码解读)」&…

丝杆支撑座的更换与细节注意事项

丝杆支撑座是支撑连接丝杆和电机的轴承支撑座&#xff0c;分固定侧和支撑侧&#xff0c;它们都有用预压调整的JIS5级的交界处球轴承。在自动化设备中是常用的传动装置&#xff0c;作为核心部件&#xff0c;对设备精度、稳定性和生产效率产生直接影响。在长时间运行中&#xff0…

行业深耕+全球拓展双轮驱动,用友U9 cloud加速中国制造全球布局

竞争加剧、供应链动荡、出海挑战……在日益激烈的市场竞争和新的全球化格局中&#xff0c;中国制造业的数智化转型已经步入深水区。 作为面向中型和中大型制造业的云ERP&#xff0c;用友U9 cloud一直是中国制造业转型升级的参与者和见证者。自2021年发布以来&#xff0c;用友U…

C#实现word和pdf格式互转

1、word转pdf 使用nuget&#xff1a; Microsoft.Office.Interop.Word winform页面&#xff1a; 后端代码&#xff1a; //using Spire.Doc; //using Spire.Pdf; using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using Sy…

Spring MVC 完整生命周期和异常处理流程图

先要明白 // 1. 用户发来请求: localhost:8080/user/1// 2. 处理器映射器(HandlerMapping)的工作 // 它会找到对应的Controller和方法 GetMapping("/user/{id}") public User getUser(PathVariable Long id) {return userService.getById(id); }// 3. 处理器适配…