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

鸿蒙HarmonyOS-带笔锋手写板(三)

        笔者用ArkTS 写了一个简单的带笔锋的手写板应用,并且可以将手写内容保存为图片。

一、效果图

        手写效果如下(在鸿蒙手机模拟器上运行,手写时反应可能会有点慢)

二、实现方法

参考文章:

支持笔锋效果的手写签字控件_android 写字板如何兼容笔峰-CSDN博客

安卓画笔笔锋的实现探索(一) - 简书

主要代码:

        核心思想在于通过插值,在两点之间逐渐绘制多个椭圆,从而呈现出笔锋的效果。

  drawLine 方法是一段用于在2D渲染画布上绘制线条并赋予其笔锋效果的代码。

        在代码中,curDis 用于计算起始点和结束点之间的欧几里德距离。steps 根据距离计算出线条上需要绘制的点的数量。deltaX, deltaY, deltaW 分别表示 x 坐标、y 坐标和宽度每一步的增量。

        通过 for 循环,在两点之间进行插值,绘制多个椭圆,以模拟笔锋效果。每一步循环中,创建一个椭圆对象 (oval),并设置其位置调用 oval 方法绘制椭圆。

        最后,更新坐标和宽度的增量,为绘制下一个椭圆做准备。

  /*** 绘制线条方法,实现笔锋效果* @param canvas 2D 渲染上下文对象* @param x0 起始点 x 坐标* @param y0 起始点 y 坐标* @param w0 起始点宽度* @param x1 结束点 x 坐标* @param y1 结束点 y 坐标* @param w1 结束点宽度*/private drawLine(canvas: CanvasRenderingContext2D, x0: number, y0: number, w0: number, x1: number, y1: number, w1: number): void {// 计算两点之间的欧几里德距离const curDis: number = Math.hypot(x0 - x1, y0 - y1);let steps: number;// 根据距离计算步数steps = 1 + Math.floor(curDis / 2);// 计算每一步的增量let deltaX: number = (x1 - x0) / steps;let deltaY: number = (y1 - y0) / steps;let deltaW: number = (w1 - w0) / steps;let x: number = x0;let y: number = y0;let w: number = w0;// 根据步数循环绘制椭圆for (let i = 0; i < steps; i++) {// 创建椭圆对象const oval: MyRect = new MyRect();const top: number = y - w / 2.0;const left: number = x - w / 4.0;const right: number = x + w / 4.0;const bottom: number = y + w / 2.0;// 设置椭圆的位置oval.set(left, top, right, bottom);// 调用绘制椭圆的方法this.oval(canvas, oval);// 更新坐标和宽度增量x += deltaX;y += deltaY;w += deltaW;}}

        绘制椭圆的方法,在安卓中可以用canvas.drawOval()方法,在HarmonyOS中需要通过canvas.ellipse()方法来实现:

/*** 绘制椭圆的方法* @param canvas 渲染画布* @param roundedCircleBox 圆角矩形的边界框*/private oval(canvas: CanvasRenderingContext2D, roundedCircleBox: MyRect): void {// 开始新的路径canvas.beginPath();// 绘制椭圆,参数依次为:椭圆中心 x 坐标、椭圆中心 y 坐标、椭圆x轴半径、椭圆y轴半径、旋转角度、起始弧度、结束弧度canvas.ellipse(roundedCircleBox.left + (roundedCircleBox.right - roundedCircleBox.left) / 2,roundedCircleBox.top + (roundedCircleBox.bottom - roundedCircleBox.top) / 2,(roundedCircleBox.right - roundedCircleBox.left) / 2,(roundedCircleBox.bottom - roundedCircleBox.top) / 2,0, // 旋转角度为 0,表示不旋转0, // 起始弧度为 02 * Math.PI); // 结束弧度为 2π,表示绘制整个椭圆// 填充椭圆canvas.fill();// 关闭路径canvas.closePath();}
三、开源地址

NotePad: HarmonyOS ArkTS带笔锋手写板应用

相关文章:

鸿蒙HarmonyOS-带笔锋手写板(三)

笔者用ArkTS 写了一个简单的带笔锋的手写板应用&#xff0c;并且可以将手写内容保存为图片。 一、效果图 手写效果如下&#xff08;在鸿蒙手机模拟器上运行&#xff0c;手写时反应可能会有点慢&#xff09; 二、实现方法 参考文章&#xff1a; 支持笔锋效果的手写签字控件_a…...

React 实现 Step组件

简介 本文将会实现步骤条组件功能。步骤条在以下几个方面改进。 1、将url与Step组件绑定&#xff0c;做到浏览器刷新&#xff0c;不会重定向到Step 1 2、通过LocalStorage 存储之前的Step&#xff0c;做到不丢失数据。 实现 Step.jsx (组件) import {useEffect, useState} fro…...

【OJ】单链表刷题

力扣刷题 1. 反转链表&#xff08;206&#xff09;1.1 题目描述1.2 题目分析1.2.1 头插法1.2.2 箭头反转 1.3 题目代码1.3.1 头插入1.3.2 箭头反转 2.合并两个有序链表&#xff08;21&#xff09;2.1 题目描述2.2 题目分析2.3 题目代码 1. 反转链表&#xff08;206&#xff09;…...

【UML建模】部署图(Deployment Diagram)

1.概述 部署图是一种结构图&#xff0c;用于描述软件系统在不同计算机硬件或设备上的部署和配置情况&#xff0c;以图形化的方式展示系统中组件、节点和连接之间的物理部署关系。 通过部署图&#xff0c;可以清晰地了解系统的物理结构和部署方式&#xff0c;包括系统组件和节…...

三、计算机理论-关系数据库-数据模型与数据视图;关系代数、关系演算及关系模型

数据模型 具体事物-抽象化-->概念模型-数据化-->数据模型 概念模型也称信息模型&#xff0c;在数据库设计阶段&#xff0c;由设计者按照用户的观点对数据和信息建模&#xff0c;实现对现实世界的概念抽象&#xff1b; 数据模型主要包括网状模型、层次模型、关系模型、面向…...

解读 $mash 通证 “Fair Launch” 规则(Staking 玩法解读篇)

Solmash 是 Solana 生态中由社区主导的铭文资产 LaunchPad 平台&#xff0c;该平台旨在为 Solana 原生铭文项目&#xff0c;以及通过其合作伙伴 SoBit 跨链桥桥接到 Solana 的 Bitcoin 生态铭文项目提供更广泛的启动机会。...

【C语言】关于C11的一些新特性

相比于VC 6.0使用的ANSI C标准&#xff0c;VS2022使用的C11标准与上一代有很多不同&#xff0c;相比之前的 C 标准&#xff08;如 C89/C90 和 C99&#xff09;&#xff0c;引入了一些新的功能、特性和改进。以下是 C11 标准相对于之前版本的一些主要变化和新增内容&#xff1a;…...

牛的速记(c++题解)

题目描述 奶牛们误解了速记的含义。他们是这样理解的&#xff1a; 给出一个少于255个字母的小写字母串。 找到一个出现次数最多的字母&#xff0c;将该字母从字母串中统统删去&#xff0c;如果出现次数最多的字母不止一个&#xff0c;就删去在字母表中靠前的一个&#xff0c;即…...

使用ffmpeg+flv.js + websokect播放rtsp格式视频流

对于rtsp的视频流网上有很多种的解决方案&#xff0c;但是大的趋势还是利用ffmpeg的工具进行rtsp的视频解析进行一个推流&#xff0c;我最终选择bilibili开源的flv.js&#xff0c;代码十分的简单全部都在底层封装好了。实现的方式也比较容易理解&#xff0c;ffmpeg进行rtsp的视…...

OAI openair3代码结构整理

openair3代码框架结构 OAI&#xff08;OpenAirInterface&#xff09;是一个开源的5G网络软件平台&#xff0c;用于研究和开发5G网络技术。OpenAir3是OAI项目中的一个子项目&#xff0c;专注于5G核心网络的功能实现。 一、OpenAir3的代码主要包括以下几个部分&#xff1a; NAS…...

Kubernets(K8S)启动和运行 01-01 Kubernetes简介

Kubernets(K8S)启动和运行 01-01 Kubernetes简介 Kubernetes is an open source orchestrator for deploying containerized applications. It was originally developed by Google, inspired by a decade of experience deploying scalable, reliable systems in containers …...

PHP特性知识点扫盲 - 下篇

概述 在实际的生产环境中遇到了实际需要解决的问题&#xff0c;需要把服务部署的方式梳理出来&#xff0c;在同一个服务器中部署多个PHP环境&#xff0c;架构图如下&#xff1a; 架构方案 在工作实践中遇到的很多问题的普遍性都是相通的&#xff0c;公司运行的可新项目都是版…...

HarmonyOS应用开发之DevEco Studio安装与初次使用

1、DevEco Studio介绍 DevEco Studio是基于IntelliJ IDEA Community开源版本打造&#xff0c;面向华为终端全场景多设备的一站式集成开发环境&#xff08;IDE&#xff09;&#xff0c;为开发者提供工程模板创建、开发、编译、调试、发布等E2E的HarmonyOS应用/服务的开发工具。…...

记录第一次在GitHub上面提交Issue

第一次在GitHub上面提交Issue&#xff0c;记录一下。 对着源码调了好久才发现&#xff0c;问题并不在程序而在模型&#xff08;虽然只是一个很小的问题&#xff0c;但是能够解决问题&#xff0c;并且做出了自己的一点小小贡献&#xff0c;还是很开心。嘻嘻&#xff0c;发博客记…...

【数据库设计和SQL基础语法】--用户权限管理--数据备份和恢复策略

一、引言 数据备份和恢复是数据库管理中至关重要的任务&#xff0c;对于确保数据安全性和业务连续性具有重大的意义。以下是一些关键的重要性方面&#xff1a; 防止数据丢失&#xff1a; 数据备份是防止因硬件故障、人为错误、恶意攻击或其他意外事件导致数据丢失的主要手段。…...

java数据结构与算法刷题-----LeetCode70. 爬楼梯

java数据结构与算法刷题目录&#xff08;剑指Offer、LeetCode、ACM&#xff09;-----主目录-----持续更新(进不去说明我没写完)&#xff1a;https://blog.csdn.net/grd_java/article/details/123063846 很多人觉得动态规划很难&#xff0c;但它就是固定套路而已。其实动态规划只…...

【Unity入门】UGUI之Slider(滑动条)

目录 一、什么是Slider&#xff1f;二、Slider属性与功能 一、什么是Slider&#xff1f; Slider控件允许用户可以通过鼠标来在预先确定的范围调节数值 我们可以在Hierarchy视图右键 -> UI ->Slider来创建滑动条 通过上图可以发现Unity内置的Slider主要有3部分&#x…...

MySQL中UNION和UNION ALL的区别有哪些?

在MySQL中如何想要对两个结果集进行合并操作&#xff0c;可以使用UNION和UNION ALL&#xff0c;如果只是想要去除掉重复的记录&#xff0c;属于UNION ALL 即可&#xff0c;但是如何想要除掉没有重复行数据&#xff0c;就要使用Union。本文详细向大家介绍MySQL中UNION和UNION AL…...

Android kotlin build.gradle.kts配置

1. 添加 maven 仓库 1. 1. settings配置 1. 1.1. settings.gradle repositories {maven {url https://maven.aliyun.com/repository/public/}mavenCentral() }1. 1.2. settings.gradle.kts repositories {maven {setUrl("https://maven.aliyun.com/repository/public/…...

css、js、vue常考部分面试题

css css盒子水平垂直居中方法 方法一&#xff1a;定位 .child{height: 100px;position: absolute;//父元素相对定位top:50%;left:50%;transform: translate(-50%,-50%); } 方法二&#xff1a;定位 .child{width: 100px;height: 100px;position: absolute;top:50%;left:50%…...

OpenAI ChatGPT-4开发笔记2024-03:Chat之Function Calling/Function/Tool/Tool_Choice

Updates on Function Calling were a major highlight at OpenAI DevDay. In another world,原来的function call都不再正常工作了&#xff0c;必须全部重写。 function和function call全部由tool和tool_choice取代。2023年11月之前关于function call的代码都准备翘翘。 干嘛…...

二叉搜索树与双向链表

解题思路一&#xff1a; /** public class TreeNode {int val 0;TreeNode left null;TreeNode right null;public TreeNode(int val) {this.val val;} } */ // 一定要用自己的理解真正弄出来才行&#xff0c;否则没有用&#xff01; // 再次提醒&#xff0c;计算机这种工科…...

uniapp中组件库的Checkbox 复选框 的丰富使用方法

目录 #平台差异说明 #基本使用 #自定义形状 #禁用checkbox #自定义形状 #自定义颜色 #横向排列形式 #横向两端排列形式 API #Checkbox Props #CheckboxGroup Props #CheckboxGroup Event 复选框组件一般用于需要多个选择的场景&#xff0c;该组件功能完整&#xff…...

Spring Cloud + Vue前后端分离-第10章 基于阿里云OSS的文件上传

源代码在GitHub - 629y/course: Spring Cloud Vue前后端分离-在线课程 Spring Cloud Vue前后端分离-第10章 基于阿里云OSS的文件上传 前面介绍的文件上传是基于本地文件服务器的文件上传&#xff0c;但是自己搭文件服务器会有很多运维的问题&#xff0c;比如磁盘满了要扩容…...

C++ 中的耗时计算函数

#include <time.h>int clock_gettime (clockid_t clock_id, struct timespec *tp) 获取当前 clock_id 的时钟值并存储在 tp 中。 其中 tp 是一个 timespec 结构体&#xff0c;在 time.h 头文件中定义&#xff1a; #include <time.h>:struct timespec {time_t t…...

【Element】el-form和el-table嵌套实现表格编辑并提交表单校验

一、背景 页面需要用到表格采集用户数据&#xff0c;提交时进行表单校验&#xff1b;即表格中嵌套着表单&#xff0c;保存时进行表单校验 二、功能实现 2.1、el-form和el-table嵌套说明 ① :model"formData" 给表单绑定数据&#xff0c;formData是表单的数据对象 …...

初识Winform

什么是winform&#xff1f; WinForms&#xff08;Windows Forms&#xff09;是Microsoft .NET框架中的一个用户界面&#xff08;UI&#xff09;技术&#xff0c;用于创建Windows应用程序。它提供了一组用于构建图形用户界面的类和控件&#xff0c;以及与用户交互的事件模型。 …...

Redis:原理速成+项目实战——Redis实战5(互斥锁、逻辑过期解决缓存击穿问题)

&#x1f468;‍&#x1f393;作者简介&#xff1a;一位大四、研0学生&#xff0c;正在努力准备大四暑假的实习 &#x1f30c;上期文章&#xff1a;Redis&#xff1a;原理速成项目实战——Redis实战4&#xff08;解决Redis缓存穿透、雪崩、击穿&#xff09; &#x1f4da;订阅专…...

前端优化之一:dns预获取 dns-prefetch 提升页面载入速度

问题&#xff1a;怎么做到dns域解析&#xff1f; 用于优化网站页面的图片 问题&#xff1a;怎么提升网站性能&#xff1f; dns域解析&#xff0c;是提升网站的一个办法。 DNS Prefetch&#xff0c;即DNS预获取&#xff0c;是前端优化的一部分。 一般来说&#xff0c;在前端…...

C语言中一些基本数据类型的典型大小

char&#xff1a;通常是1字节。表示一个字符。int&#xff1a;通常在现代系统中是4字节&#xff08;但这取决于编译器和架构&#xff0c;有时可能是2字节&#xff09;。float&#xff1a;通常是4字节。double&#xff1a;通常是8字节。short 和 short int&#xff1a;通常是2字…...

网站 错误代码/百度推广点击一次多少钱

1.网络管理概念 网络接口和名称 &#xff1a;网卡 ip地址 网关 主机名称 路由 2.管理工具 net-tools: #安装包 ifconfig netstat 准备要废掉了。 ​ iproute: #安装包 ip #提供ip命令 3.临时设置网络 lo网卡 :本地回环网卡&#xff0c;本机上的服务自己访问自己…...

建设网站域名备案查询/安卓优化大师历史版本

当今市场上手机的种类多如牛毛&#xff0c;基本功能都是打电话和发短信&#xff0c;然后&#xff0c;如果是我们生产一款手机&#xff0c;怎样才能让我们的手机拥有自己的卖点&#xff0c;在手机市场上脱颖而出&#xff0c;赢得消费者的青睐呢&#xff1f;我觉得非常重要的一点…...

做损坏文档的网站/seo网站平台

介绍&#xff1a; 项目介绍 酷瓜云课堂&#xff0c;依托腾讯云基础服务架构&#xff0c;采用C扩展框架Phalcon开发&#xff0c;GPL-2.0开源协议&#xff0c;致力开源网课系统&#xff0c;开源网校系统&#xff0c;开源在线教育系统。 系统功能 实现了点播、直播、专栏、面授、…...

优秀购物网站/百度搜索引擎优化详解

Hadoop2.7伪分布式搭建 软件版本&#xff1a; 系统&#xff1a;CentOS 7 64位 jdk&#xff1a;1.8.0_181 hadoop&#xff1a;hadoop 2.7.2 环境准备&#xff1a; 1.安装Java环境&#xff08;省略&#xff09; 2. 创建用户&#xff08;work&#xff09;&#xff1a; root用户…...

网站怎么建设?/怎么推广网站链接

为什么80%的码农都做不了架构师&#xff1f;>>> 如果你的Linux服务器突然负载暴增&#xff0c;告警短信快发爆你的手机&#xff0c;如何在最短时间内找出Linux性能问题所在&#xff1f;来看Netflix性能工程团队的这篇博文&#xff0c;看它们通过十条命令在一分钟内…...

淄博网站建设铭盛信息/男生短期培训就业

实现步骤 使用uTools软件的“内网穿透”插件配置vue项目配置内网穿透插件参数 一、下载uTools软件并安装内网穿透插件&#xff0c;如下图所示&#xff1a; 二、配置vue项目参数 在webpack.dev.conf.js文件下配置相关参数。三、配置内网穿透插件参数&#xff0c;如下图&#x…...