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

Opencv中的addweighted函数

一.addweighted函数作用 addweighted&#xff08;&#xff09;是OpenCV库中用于图像处理的函数&#xff0c;主要功能是将两个输入图像&#xff08;尺寸和类型相同&#xff09;按照指定的权重进行加权叠加&#xff08;图像融合&#xff09;&#xff0c;并添加一个标量值&#x…...

MMaDA: Multimodal Large Diffusion Language Models

CODE &#xff1a; https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA&#xff0c;它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构&#xf…...

Frozen-Flask :将 Flask 应用“冻结”为静态文件

Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是&#xff1a;将一个 Flask Web 应用生成成纯静态 HTML 文件&#xff0c;从而可以部署到静态网站托管服务上&#xff0c;如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...

pikachu靶场通关笔记22-1 SQL注入05-1-insert注入(报错法)

目录 一、SQL注入 二、insert注入 三、报错型注入 四、updatexml函数 五、源码审计 六、insert渗透实战 1、渗透准备 2、获取数据库名database 3、获取表名table 4、获取列名column 5、获取字段 本系列为通过《pikachu靶场通关笔记》的SQL注入关卡(共10关&#xff0…...

AI,如何重构理解、匹配与决策?

AI 时代&#xff0c;我们如何理解消费&#xff1f; 作者&#xff5c;王彬 封面&#xff5c;Unplash 人们通过信息理解世界。 曾几何时&#xff0c;PC 与移动互联网重塑了人们的购物路径&#xff1a;信息变得唾手可得&#xff0c;商品决策变得高度依赖内容。 但 AI 时代的来…...

Angular微前端架构:Module Federation + ngx-build-plus (Webpack)

以下是一个完整的 Angular 微前端示例&#xff0c;其中使用的是 Module Federation 和 npx-build-plus 实现了主应用&#xff08;Shell&#xff09;与子应用&#xff08;Remote&#xff09;的集成。 &#x1f6e0;️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...

jmeter聚合报告中参数详解

sample、average、min、max、90%line、95%line,99%line、Error错误率、吞吐量Thoughput、KB/sec每秒传输的数据量 sample&#xff08;样本数&#xff09; 表示测试中发送的请求数量&#xff0c;即测试执行了多少次请求。 单位&#xff0c;以个或者次数表示。 示例&#xff1a;…...

R 语言科研绘图第 55 期 --- 网络图-聚类

在发表科研论文的过程中&#xff0c;科研绘图是必不可少的&#xff0c;一张好看的图形会是文章很大的加分项。 为了便于使用&#xff0c;本系列文章介绍的所有绘图都已收录到了 sciRplot 项目中&#xff0c;获取方式&#xff1a; R 语言科研绘图模板 --- sciRplothttps://mp.…...

【从零开始学习JVM | 第四篇】类加载器和双亲委派机制(高频面试题)

前言&#xff1a; 双亲委派机制对于面试这块来说非常重要&#xff0c;在实际开发中也是经常遇见需要打破双亲委派的需求&#xff0c;今天我们一起来探索一下什么是双亲委派机制&#xff0c;在此之前我们先介绍一下类的加载器。 目录 ​编辑 前言&#xff1a; 类加载器 1. …...

云原生周刊:k0s 成为 CNCF 沙箱项目

开源项目推荐 HAMi HAMi&#xff08;原名 k8s‑vGPU‑scheduler&#xff09;是一款 CNCF Sandbox 级别的开源 K8s 中间件&#xff0c;通过虚拟化 GPU/NPU 等异构设备并支持内存、计算核心时间片隔离及共享调度&#xff0c;为容器提供统一接口&#xff0c;实现细粒度资源配额…...