当前位置: 首页 > 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%…...

Chapter03-Authentication vulnerabilities

文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...

conda相比python好处

Conda 作为 Python 的环境和包管理工具&#xff0c;相比原生 Python 生态&#xff08;如 pip 虚拟环境&#xff09;有许多独特优势&#xff0c;尤其在多项目管理、依赖处理和跨平台兼容性等方面表现更优。以下是 Conda 的核心好处&#xff1a; 一、一站式环境管理&#xff1a…...

Xshell远程连接Kali(默认 | 私钥)Note版

前言:xshell远程连接&#xff0c;私钥连接和常规默认连接 任务一 开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务 任务二 修改配置文件 vi /etc/ssh/ssh_config //第一…...

23-Oracle 23 ai 区块链表(Blockchain Table)

小伙伴有没有在金融强合规的领域中遇见&#xff0c;必须要保持数据不可变&#xff0c;管理员都无法修改和留痕的要求。比如医疗的电子病历中&#xff0c;影像检查检验结果不可篡改行的&#xff0c;药品追溯过程中数据只可插入无法删除的特性需求&#xff1b;登录日志、修改日志…...

ssc377d修改flash分区大小

1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...

Python爬虫实战:研究feedparser库相关技术

1. 引言 1.1 研究背景与意义 在当今信息爆炸的时代,互联网上存在着海量的信息资源。RSS(Really Simple Syndication)作为一种标准化的信息聚合技术,被广泛用于网站内容的发布和订阅。通过 RSS,用户可以方便地获取网站更新的内容,而无需频繁访问各个网站。 然而,互联网…...

pam_env.so模块配置解析

在PAM&#xff08;Pluggable Authentication Modules&#xff09;配置中&#xff0c; /etc/pam.d/su 文件相关配置含义如下&#xff1a; 配置解析 auth required pam_env.so1. 字段分解 字段值说明模块类型auth认证类模块&#xff0c;负责验证用户身份&am…...

Java多线程实现之Callable接口深度解析

Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...

自然语言处理——Transformer

自然语言处理——Transformer 自注意力机制多头注意力机制Transformer 虽然循环神经网络可以对具有序列特性的数据非常有效&#xff0c;它能挖掘数据中的时序信息以及语义信息&#xff0c;但是它有一个很大的缺陷——很难并行化。 我们可以考虑用CNN来替代RNN&#xff0c;但是…...

Android Bitmap治理全解析:从加载优化到泄漏防控的全生命周期管理

引言 Bitmap&#xff08;位图&#xff09;是Android应用内存占用的“头号杀手”。一张1080P&#xff08;1920x1080&#xff09;的图片以ARGB_8888格式加载时&#xff0c;内存占用高达8MB&#xff08;192010804字节&#xff09;。据统计&#xff0c;超过60%的应用OOM崩溃与Bitm…...