当前位置: 首页 > news >正文

HarmonyOS/OpenHarmony元服务开发-卡片使用自定义绘制能力

ArkTS卡片开放了自定义绘制的能力,在卡片上可以通过Canvas组件创建一块画布,然后通过CanvasRenderingContext2D对象在画布上进行自定义图形的绘制,如下示例代码实现了在画布的中心绘制了一个笑脸。

@Entry
@Component
struct Card {
private canvasWidth: number = 0;
private canvasHeight: number = 0;
// 初始化CanvasRenderingContext2D和RenderingContextSettings
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);build() {
Column() {
Row() {
Canvas(this.context)
.margin('5%')
.width('90%')
.height('90%')
.onReady(() => {
console.info('[ArkTSCard] onReady for canvas draw content');
// 在onReady回调中获取画布的实际宽和高
this.canvasWidth = this.context.width;
this.canvasHeight = this.context.height;
// 绘制画布的背景
this.context.fillStyle = 'rgba(203, 154, 126, 1.00)';
this.context.fillRect(0, 0, this.canvasWidth, this.canvasHeight);
// 在画布的中心绘制一个红色的圆
this.context.beginPath();
let radius = this.context.width / 3
let circleX = this.context.width / 2
let circleY = this.context.height / 2
this.context.moveTo(circleX - radius, circleY);
this.context.arc(circleX, circleY, radius, 2 * Math.PI, 0, true);
this.context.closePath();
this.context.fillStyle = 'red';
this.context.fill();
// 绘制笑脸的左眼
let leftR = radius / 4
let leftX = circleX - (radius / 2)
let leftY = circleY - (radius / 3.5)
this.context.beginPath();
this.context.arc(leftX, leftY, leftR, 0, Math.PI, true);
this.context.strokeStyle = '#ffff00'
this.context.lineWidth = 10
this.context.stroke()
// 绘制笑脸的右眼
let rightR = radius / 4
let rightX = circleX + (radius / 2)
let rightY = circleY - (radius / 3.5)
this.context.beginPath();
this.context.arc(rightX, rightY, rightR, 0, Math.PI, true);
this.context.strokeStyle = '#ffff00'
this.context.lineWidth = 10
this.context.stroke()
// 绘制笑脸的嘴巴
let mouthR = radius / 2.5
let mouthX = circleX
let mouthY = circleY + (radius / 3)
this.context.beginPath();
this.context.arc(mouthX, mouthY, mouthR, Math.PI, 0, true);
this.context.strokeStyle = '#ffff00'
this.context.lineWidth = 10
this.context.stroke()
})
}
}.height('100%').width('100%')
}
}

 

相关文章:

HarmonyOS/OpenHarmony元服务开发-卡片使用自定义绘制能力

ArkTS卡片开放了自定义绘制的能力,在卡片上可以通过Canvas组件创建一块画布,然后通过CanvasRenderingContext2D对象在画布上进行自定义图形的绘制,如下示例代码实现了在画布的中心绘制了一个笑脸。 Entry Component struct Card { private c…...

SpringBoot引入MyBatisGenerator

1.引入插件 <plugin><groupId>org.mybatis.generator</groupId><artifactId>mybatis-generator-maven-plugin</artifactId><version>1.3.5</version><configuration><!--generator配置文件所在位置--><configuratio…...

JVM面试题--实践

目录 JVM 调优的参数可以在哪里设置参数值 war包部署在tomcat中设置 jar包部署在启动参数设置 JVM 调优的参数都有哪些&#xff1f; 设置堆空间大小 虚拟机栈的设置 年轻代中Eden区和两个Survivor区的大小比例 年轻代晋升老年代阈值 设置垃圾回收收集器 JVM 调优的工…...

神经网络的搭建与各层分析

为什么去西藏的人都会感觉很治愈 拉萨的老中医是这么说的 缺氧脑子短路&#xff0c;很多事想不起来&#xff0c;就会感觉很幸福 一、卷积层 解释&#xff1a;卷积层通过卷积操作对输入数据进行处理。它使用一组可学习的滤波器&#xff08;也称为卷积核或特征检测器&#xff09…...

SQL-每日一题【1174. 即时食物配送 II】

题目 配送表: Delivery 如果顾客期望的配送日期和下单日期相同&#xff0c;则该订单称为 「即时订单」&#xff0c;否则称为「计划订单」。 「首次订单」是顾客最早创建的订单。我们保证一个顾客只会有一个「首次订单」。 写一条 SQL 查询语句获取即时订单在所有用户的首次订…...

MySQL学习记录:第一章 DQL语言

文章目录 第一章 查询语言,DQL语言一、基础查询1、查询表中单个字段2、查询表中多个字段3、查询表中所有字段4、查询常量值5、查询表达式6、查询函数7、起别名8、去重9、+号的作用二、条件查询1、按条件表达式筛选2、按逻辑表达式筛选三、模糊查询四、排序查询五、常见函数1、…...

redis+token+分布式锁确保接口的幂等性

目录 1.幂等性是什么&#xff1f; 2.如何实现幂等性呢&#xff1f; 1.新增管理员&#xff0c;出弹窗的同时&#xff0c;请求后台。 2.后端根据雪花算法生成唯一标识key&#xff0c;以雪花数为key存到redis。并返回key给前端。 3.前端保存后端传过来的key。 4.前端输入完成…...

Vue模版语法

目录 接下来学习click 例题&#xff1a;修改背景颜色 例题&#xff1a;反复点击button按钮&#xff0c;可以不断切换背景颜色 先看以下例题是回顾vue的用法 <body><div id"box">{{myname}} - {{myage}}</div><script>var vm new Vue({el…...

新一代开源流数据湖平台Apache Paimon入门实操-上

文章目录 概述定义核心功能适用场景架构原理总体架构统一存储基本概念文件布局 部署环境准备环境部署 实战Catalog文件系统Hive Catalog 创建表创建Catalog管理表查询创建表&#xff08;CTAS&#xff09;创建外部表创建临时表 修改表修改表修改列修改水印 概述 定义 Apache Pa…...

ELK 企业级日志分析系统(一)

目录 一、ELK 简介 1.1 组件说明 1.2 为什么要使用ELK 1.3 完整日志系统的基本特征 1.4 ELK工作原理 二、Elasticsearch的介绍 2.1 Elasticsearch的核心: 三、Logstash 3.1 Logstash简介 四、Kibana 五、部署ELK日志分析系统 5.1 服务器配置 5.2 ELK Elasticse…...

2023-08-01力扣今日二题-Hard-DPLIS优先队列-好题

链接&#xff1a; 354. 俄罗斯套娃信封问题 题意&#xff1a; 一个信封有长宽&#xff0c;如果一个信封的长宽均严格大于另一个信封&#xff0c;那么大的这个信封可以装下小的这个信封 求最多能套娃几个信封 解&#xff1a; 类似普通的最长上升子序列&#xff0c;但是信封…...

并发 如何创建线程 多线程

进程&#xff1a;一个程序的执行过程 线程&#xff1a;一个方法就是一个线程 并发&#xff1a;多个线程抢夺一个资源 操作同一个对象 创建线程方法1 //创建线程方法1 继承Thread类 重写润方法 调用start开启线程 public class TestThead extends Thread{Overridepublic voi…...

亚马逊鲲鹏系统是怎么引流的?

亚马逊鲲鹏系统有三种引流方式&#xff0c;可设置通过亚马逊站点搜索、站外引流、直接访问产品页面进入到相关产品页面进行操作。 1、通过亚马逊站点搜索 正常的登录到我们的亚马逊主页&#xff0c;然后通过设置关键词及asin&#xff0c;最后进入你指定的产品&#xff0c;进行…...

第五章 Git

5-1、Git的安装 1、为什么要使用代码版本控制系统 【1】版本控制 【2】开发中存在的麻烦 2、Git和SVN的对比 【1】Git和SVN对比 &#xff08;1&#xff09;SVN &#xff08;2&#xff09;Git 3、Git下载和安装 【1】下载 【2】安装 一路下一步就好了&#xff0c;更换安装…...

无涯教程-Lua - 变量声明

变量的名称可以由字母&#xff0c;数字和下划线字符组成。它必须以字母或下划线开头&#xff0c;由于Lua区分大小写&#xff0c;因此大写和小写字母是不同的。 在Lua中&#xff0c;尽管无涯教程没有变量数据类型&#xff0c;但是根据变量的范围有三种类型。 全局变量(Global) …...

vue3学习-组件基础、深入组件

组件 基本概述 单独的 .vue文件 单文件组件&#xff08;SFC&#xff09;&#xff08;single file component&#xff09; 使用子组件 导入&#xff0c;无需注册&#xff0c;直接使用编译时&#xff0c;区分大小写可使用 />关闭标签 传递 props 需要再组件上声明注册 def…...

原型链污染分析

原型链污染问题 原型链原型的继承原型链污染 原型链 原型的继承 先创建一个对象&#xff0c;查看一下属性 const obj { prop1: 111, prop2: 222,} 这里的Object.prototype就是对象的原型。 原型里面有许多的属性&#xff0c;这里面的constructor是我们需要着重关注的。 除此…...

RF PCB的9条改进型建议

1.小功率的RF的PCB设计中,主要使用标准的FR4材料(绝缘特性好、材质均匀、介电常数ε=4,10%)。主要使用4层~6层板,在成本非常敏感的情况下可以使用厚度在1mm以下的双面板,要保证反面是一个完整的地层,同时由于双面板的厚度在1mm以上,使得地层和信号层之间的FR4介质较厚,…...

网络安全(黑客)自学就业

前段时间&#xff0c;遇到网友提问&#xff0c;说为什么我信息安全专业的找不到工作&#xff1f; 造成这个结果主要是有两大方面的原因。 第一个原因&#xff0c;求职者本身的学习背景问题。那这些问题就包括学历、学校学到的知识是否扎实&#xff0c;是否具备较强的攻防实战…...

uni-app选择器( uni-data-picker)选择任意级别

背景说明 uni-app 官方的插件市场有数据驱动选择器&#xff0c;可以用作多级分类的场景。引入插件后&#xff0c;发现做不到只选择年级&#xff0c;不选择班级&#xff08;似乎&#xff0c;只能到最后子节点了&#xff09;。 需求中&#xff0c;有可能选择的不是叶子。比如&a…...

Windows环境下coturn服务器部署与配置实战

1. Windows下coturn服务器部署全攻略 最近在做一个WebRTC项目时&#xff0c;发现很多开发者卡在了TURN服务器搭建这个环节。特别是需要在Windows环境下部署coturn的场景&#xff0c;网上的资料要么太零散&#xff0c;要么直接照搬Linux的教程。今天我就把自己在Windows 10上通过…...

激光+视觉+IMU+RTK融合实战:如何用多传感器打造厘米级三维重建系统?

激光视觉IMURTK融合实战&#xff1a;如何用多传感器打造厘米级三维重建系统&#xff1f; 在自动驾驶和机器人领域&#xff0c;三维重建技术正经历着从实验室走向工业落地的关键转折。传统单一传感器方案已无法满足复杂场景下的精度需求&#xff0c;而多传感器融合正成为突破性能…...

Chandra OCR多平台部署指南:Windows WSL2/Mac Metal/Linux Docker全搞定

Chandra OCR多平台部署指南&#xff1a;Windows WSL2/Mac Metal/Linux Docker全搞定 1. Chandra OCR核心能力解析 Chandra是Datalab.to在2025年10月开源的布局感知OCR模型&#xff0c;与传统OCR工具最大的区别在于它能完整保留文档的排版结构信息。想象一下&#xff1a;当你扫…...

李慕婉-仙逆-造相Z-Turbo AI核心原理科普:如何用Transformer理解并生成人类语言

李慕婉-仙逆-造相Z-Turbo AI核心原理科普&#xff1a;如何用Transformer理解并生成人类语言 你有没有想过&#xff0c;当你和“李慕婉-仙逆-造相Z-Turbo”这样的AI模型对话时&#xff0c;它到底是怎么“听懂”你的话&#xff0c;又“想”出那些回答的&#xff1f;它不像我们人…...

告别手动重复!用Python+ArcPy实现多要素批量裁剪年度影像的保姆级教程

PythonArcPy自动化遥感影像裁剪&#xff1a;从原理到实战的完整解决方案 遥感影像处理是GIS工程师的日常必修课。每当拿到新一年的土地利用数据或行政区划影像时&#xff0c;最头疼的莫过于要为每个行政单元单独裁剪每年的数据。我曾花费整整一周时间手动处理30个乡镇5年的NDVI…...

基于博途1200PLC + HMI的交通灯控制系统仿真:打造灵活交通指挥中枢

基于博途1200PLCHMI交通灯/红绿灯控制系统仿真(时间可设置) 程序&#xff1a; 1、任务&#xff1a;PLC.人机界面控制交通灯 2、系统说明&#xff1a; 系统设有手动模式、自动模式、黄闪模式、红绿灯时间可设置、各灯可单独手动模式、故障模拟模式、数码管显示等模式运行 交通灯…...

CLIP 实战宝典:从零开始掌握文本与图像编码的终极技巧

1. CLIP模型基础入门&#xff1a;图文匹配的魔法钥匙 第一次听说CLIP模型时&#xff0c;我正被一个图像搜索项目折磨得焦头烂额。传统方法需要先标注海量数据&#xff0c;再训练复杂的分类器&#xff0c;整个过程就像用算盘计算火箭轨道。直到遇见CLIP&#xff0c;才发现原来图…...

别再只画可达空间了!宇树Z1机械臂‘死角’排查与灵活工作空间优化实战

宇树Z1机械臂死角排查与灵活工作空间优化实战指南 当宇树Z1机械臂在自动化产线上执行抓取任务时&#xff0c;工程师们常会遇到一个令人头疼的现象——某些看似可达的位姿却无法实现预期动作。这背后隐藏的往往是机械臂工作空间中的"死角"问题&#xff0c;即那些虽然理…...

Wi-Fi 6高密度网络优化:实战漫游与性能提升

Wi-Fi 6高密度网络优化&#xff1a;实战漫游与性能提升在诸如大型企业园区、高流量高校、人流密集的会展中心等高密度用户环境中&#xff0c;传统Wi-Fi网络面临着严峻的无线接入挑战。Wi-Fi 6 (802.11ax) 标准以更高的频谱效率、更低的延迟和卓越的设备并发能力&#xff0c;为解…...

comsol matlab联合仿真 也可加入solidworks三软件联合 参数化建模 全自动...

comsol matlab联合仿真 也可加入solidworks三软件联合 参数化建模 全自动建模迭代分析 实现多目标优化 帕累托前沿 代码模型与仿真参数化建模这事儿&#xff0c;玩过CAD和仿真的都懂——改个螺丝孔直径就得重新画图导出&#xff0c;累死个人。不过要是把SolidWorks、COMSOL和M…...