一、屏幕旋转

● 实现签名板的第一个功能就是旋转屏幕。旋转屏幕在各种框架中都有不一样的方式,比如:在H5端,我们一般是使用CSS中的transform属性中的rotate()方法来强制将网页横屏,然后实现一系列功能

● 在嵌套第三方APP中,我们一般是调用对应的SDK提供的方法,即可实现旋转屏幕

● .....

实现方式还有很多,各有千秋,相信HarmonyOS也会提供对应API方法来设置旋转屏幕。

而我自己则是在页面内通过 Window 对象的 setPreferredOrientation() 方法实现横竖屏切换。以下是我实现的完整代码:

// 在EntryAbility.ts中获取窗口实例并赋值给全局变量,如此所有页面都可以通过全局// 变量去修改窗口信息,不需要重新获取
import UIAbility from '@ohos.app.ability.UIAbility';
import window from '@ohos.window';
export default class EntryAbility extends UIAbility {
onWindowStageCreate(windowStage: window.WindowStage) {
windowStage.getMainWindow((err, data) => {
if (err.code) {
console.error('获取失败' + JSON.stringify(err));
return;
}
console.info('获取主窗口的实例:' + JSON.stringify(data));
globalThis.windowClass = data // 赋值给全局变量windowClass
});
}
} // 在具体页面中的使用
import window from '@ohos.window';
@Entry
@Componentstruct SignatureBoard { onPageShow() {
// 获取旋转的方向,具体可以查看对应文档
let orientation = window.Orientation.LANDSCAPE_INVERTED;
try {
// 设置屏幕旋转
globalThis.windowClass.setPreferredOrientation(orientation, (err) => {});
} catch (exception) {
console.error('设置失败: ' + JSON.stringify(exception));
}
}
}

  

二、canvas画布

解决了屏幕旋转问题,接下来实现签名功能。因为在之前就已经开发过,只要将对应的语法转成ArkTS的语法就好。以下是代码解析:2.1 按照官方文档使用canvas组件

@Entry@Component
struct SignatureBoard {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() {
Column() {
Canvas(this.context)
.width('100%')
.height('100%')
.backgroundColor('#fff')
.onReady(() => {
})
}
.width('100%')
.height('100%')
}
}

  

2.2 设置画笔的属性以及绑定手势功能。在js中我们基本都是使用鼠标事件来实现的,而在ArkTS中是通过手势方法来监听手指在屏幕上的操作,有很多种,大家需要用到的可以去查看对应的文档。

build() {
Column() {
Canvas(this.context)
.width('100%')
.height('100%')
.backgroundColor('#fff')
.onReady(() => {
this.context.lineWidth = 3; // 设置画笔的粗细
this.context.strokeStyle = "#000"; // 设置画笔的颜色
// 还可以设置很多,根据自己业务需要
})
.gesture(
PanGesture(this.panOption)
.onActionStart((event: any) => {
// 手指按下的时候
})
.onActionUpdate((event: any) => {
// 手指移动的时候
})
.onActionEnd(() => {
// 手指离开的时候
})
)
}

  

2.3 我们实现的手势的绑定,那么就可以实现手指在屏幕上滑动之后画布就绘画出对应的轨迹路线了,这里将会使用到一些画布的功能。

@Entry
@Componentstruct SignatureBoard {
private lastX: number = 0;
private lastY: number = 0;
private isDown: Boolean = false;
private panOption: PanGestureOptions = new PanGestureOptions({ direction: PanDirection.All, distance: 1 })
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) draw(startX, startY, endX, endY) {
// 起点
this.context.moveTo(startX, startY);
// 终点
this.context.lineTo(endX, endY);
// 调用 stroke,即可看到绘制的线条
this.context.stroke();
}
build() {
Column() {
Canvas(this.context)
.width('100%')
.height('100%')
.backgroundColor('#fff')
.onReady(() => {
this.context.lineWidth = 3;
this.context.strokeStyle = "#000";
})
.gesture(
PanGesture(this.panOption)
.onActionStart((event: any) => {
this.isDown = true;
// 按下时的点作为起点
this.lastX = event.localX;
this.lastY = event.localY;
// 创建一个新的路径
this.context.beginPath();
})
.onActionUpdate((event: any) => {
// 没有按下就不管
if (!this.isDown) return;
const offsetX = event.localX
const offsetY = event.localY
// 调用绘制方法
this.draw(this.lastX, this.lastY, offsetX, offsetY);
// 把当前移动时的坐标作为下一次的绘制路径的起点
this.lastX = offsetX;
this.lastY = offsetY;
})
.onActionEnd(() => {
this.isDown = false;
// 关闭路径
this.context.closePath();
})
)
}
.width('100%')
.height('100%')
}
}

  

以上就是我们实现签名板的完整思路以及代码了,有几个需要注意的点是:

1. new PanGestureOptions实例的时候需要把distance设置小一点,值越小灵敏度就越高

2. PanGesture的回调方法中event参数,官方默认给的属性类型为GestureEvent。但是我在编辑器源码中查看该属性没有我们定义我们想要的localX、localY,但是实际是有返回的,如果直接用编辑器会报错。所以需要将event定为any类型,这样就可以获取且不报错了。

这次的画布签名板的功能就分享这些,希望能够帮助各位开发者,后续会继续分享出更多在项目中经常用到的工具。

手把手教你使用ArkTS中的canvas实现签名板功能的更多相关文章

  1. 手把手教你写Sublime中的Snippet

    手把手教你写Sublime中的Snippet Sublime Text号称最性感的编辑器, 并且越来越多人使用, 美观, 高效 关于如何使用Sublime text可以参考我的另一篇文章, 相信你会喜 ...

  2. 手把手教你使用 js 实现一个 Canvas 编辑器

    手把手教你使用 js 实现一个 Canvas 编辑器 拖拽 缩放,等比缩放 导出 image 模版 撤销,重做 OOP,封装,继承,多态 发布库 CI/CD (gitlab/github) ... h ...

  3. 手把手教你在VirtualBox中与主机共享文件夹

    安装VirtualBox为了共享文件夹,折腾了一晚上!网上的很多资料都不是很全面,这里就全面的总结一下,如果有其他的疑问,可以留言多多交流. VirtualBox下载地址,版本为5.1.2 设置共享文 ...

  4. 小姐姐手把手教你JS数组中的对象去重

    有时候数据库中的数据重复的,我们另一个需求需要数据的唯一性 那么这时候就用到这个方法了  我还是以截图的方式发粗来  不然太丑了 见谅 console.log(map)打印出来的结果已经帮我们把需要的 ...

  5. 手把手教你在Mac中搭建iOS的 React Native环境

    准备工作 1.你需要一台Mac电脑..(这不是废话?我所用的是Air~~穷..) 2.我所操作的电脑系统环境是 3.xcode版本:8.0正式版 必需的软件 1.Homebrew Homebrew, ...

  6. 手把手教你在Eclipse中使用CVS Branch功能

    Brach 的作用: 开发新版本的人员就基于 main trunk 工作,而 fix bug 的人员就基于 branch 工作. 一旦在 branch上将 Release_1_0的 bug修复了,我们 ...

  7. 手把手教你打造一款轻量级canvas渲染引擎

    背景 当我们开发一个canvas应用的时候,出于效率的考量,免不了要选择一个渲染引擎(比如PixiJS)或者更强大一点的游戏引擎(比如Cocos Creator.Layabox). 渲染引擎通常会有S ...

  8. 手把手教你进行Scrapy中item类的实例化操作

    接下来我们将在爬虫主体文件中对Item的值进行填充. 1.首先在爬虫主体文件中将Item模块导入进来,如下图所示. 2.第一步的意思是说将items.py中的ArticleItem类导入到爬虫主体文件 ...

  9. 手把手教你在netty中使用TCP协议请求DNS服务器

    目录 简介 DNS传输协议简介 DNS的IP地址 Do53/TCP在netty中的使用 搭建DNS netty client 发送DNS查询消息 DNS查询的消息处理 总结 简介 DNS的全称doma ...

  10. 手把手教你在.NET中创建Web服务

    最近发现在.NET平台下使用Web服务还是很简单的.下面举个在.NET平台下创建Web服务的简单例子.首先用Visul Studio .Net创建一个C# 项目Asp.Net Web服务程序,源代码如 ...

随机推荐

  1. [C++] does not name a type

    从网上找到了以下几点 https://blog.csdn.net/fly20180712/article/details/88306008 1.没有加调用函数的头文件 2.不存在xxx命名空间 3.包 ...

  2. 今天接到一个根据excel来更新数据库的需求,用php写个小脚本

    需求大概内容是,excel中有些条目需要删除.有些需要新增,就需要基于这份excel生成删.增的SQL. 要求是这样的:蓝色要删除的,黄色是要新增的,白色和灰色的不用管. 我第一时间就在想:还得识别单 ...

  3. Netty笔记(2) - 基本实现与异步模型

    示例内容: 服务端监听6668端口 , 客户端连接 并发送信息给服务端 ,服务端收到信息打印 并返回信息给客户端 服务端代码: public class NettyServer { public st ...

  4. ArrayList继承了AbstractList为何还要实现List接口

    ArrayList继承了AbstractList为何还要实现List接口? 相关的问题: Vector既然继承了AbstractList为啥还要实现List接口 HashMap继承了AbstractM ...

  5. yarn install --offline 离线安装 回头试试 npm install ./package.tgz

    yarn install --offline npm pack npm install ./package.tgz 尝试了 npm-pack-all --dev-deps 也不行,太慢,等了20分钟 ...

  6. 全面解析Android之ANR日志

    不论从事安卓应用开发,还是安卓系统研发,应该都遇到应用无响应(简称ANR)问题,当应用程序一段时间无法及时响应,则会弹出ANR对话框,让用户选择继续等待,还是强制关闭.本文将带你全面解析Android ...

  7. Shell 编写摘要 (一)

    PS:要转载请注明出处,本人版权所有. PS: 这个只是基于<我自己>的理解, 如果和你的原则及想法相冲突,请谅解,勿喷. 前置说明   本文作为本人csdn blog的主站的备份.(Bl ...

  8. 记录--用js如何实现将手机号中间的几位数字变成****

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 今天,我们要实现一个很常见并且简单的功能:将手机号中间的几位数变成**** 这个功能其实很常见,比如我们微信的账号安全里面显示的手机号.掘 ...

  9. 《.NET内存管理宝典 》(Pro .NET Memory Management) 阅读指南 - 第7章

    本章勘误: 暂无,等待细心的你告诉我哦. 本章注解: 暂无 本章释疑: 暂无,等待你的提问 致谢: MVP 林德熙 MVP 吕毅 sPhinX 相关链接 试读记录

  10. 使用vott对车牌位置进行标注

    1.软件安装 vott 下载地址 https://github.com/microsoft/VoTT/releases 双击vott-2.2.0-win32.exe安装标注软件,安装成功后桌面会生成应 ...