济南正规网站制作品牌,网站建设头像,北京网站建设服务中心,保险网站定制笔者用ArkTS 写了一个简单的带笔锋的手写板应用#xff0c;并且可以将手写内容保存为图片。
一、效果图 手写效果如下#xff08;在鸿蒙手机模拟器上运行#xff0c;手写时反应可能会有点慢#xff09; 二、实现方法
参考文章#xff1a;
支持笔锋效果的手写签字控件_a… 笔者用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带笔锋手写板应用
