手把手教你使用ArkTS中的canvas实现签名板功能

James学长论文咨询服务

已于 2024-05-08 17:40:48 修改

阅读量1k

点赞数 22

文章标签： android flutter 面试鸿蒙

于 2024-01-10 07:30:00 首次发布

本文链接：https://blog.csdn.net/hdbdhdbh/article/details/135481644

版权

一、屏幕旋转
● 实现签名板的第一个功能就是旋转屏幕。旋转屏幕在各种框架中都有不一样的方式，比如：在 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%')
  }
}

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

new PanGestureOptions 实例的时候需要把 distance 设置小一点，值越小灵敏度就越高
PanGesture 的回调方法中 event 参数，官方默认给的属性类型为 GestureEvent。但是我在编辑器源码中查看该属性没有我们定义我们想要的 localX、localY，但是实际是有返回的，如果直接用编辑器会报错。所以需要将 event 定为 any 类型，这样就可以获取且不报错了。

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

最后分享一份《鸿蒙（HarmonyOS）开发学习指南》，需要的朋友可以扫码免费领取！！！

## 《鸿蒙（HarmonyOS）开发学习指南》

第一章快速入门

1、开发准备

2、构建第一个ArkTS应用（Stage模型）

3、构建第一个ArkTS应用（FA模型）

4、构建第一个JS应用（FA模型）

5、…

第二章开发基础知识

1、应用程序包基础知识

2、应用配置文件（Stage模型）

3、应用配置文件概述（FA模型）

4、…

第三章 资源分类与访问

1、资源分类与访问

2、创建资源目录和资源文件

3、资源访问

4、…

第四章学习ArkTs语言

1、初识ArkTS语言

2、基本语法

3、状态管理

4、其他状态管理

5、渲染控制

6、…

第五章 UI开发

1.方舟开发框架（ArkUI）概述

2.基于ArkTS声明式开发范式

3.兼容JS的类Web开发范式

4…

第六章 Web开发

1.Web组件概述

2.使用Web组件加载页面

3.设置基本属性和事件

4.在应用中使用前端页面JavaScript

5.ArkTS语言基础类库概述

6.并发

7…

11.网络与连接

12.电话服务

13.数据管理

14.文件管理

15.后台任务管理

16.设备管理

17…

第七章应用模型

1.应用模型概述

2.Stage模型开发指导

3.FA模型开发指导

4…

扫描下方二维码免费领取，《鸿蒙（HarmonyOS）开发学习指南》

James学长论文咨询服务

关注

22
点赞
踩
19

收藏

觉得还不错? 一键收藏
0
评论
手把手教你使用ArkTS中的canvas实现签名板功能

● 实现签名板的第一个功能就是旋转屏幕。旋转屏幕在各种框架中都有不一样的方式，比如：在 H5 端，我们一般是使用 CSS 中的 transform 属性中的 rotate()方法来强制将网页横屏，然后实现一系列功能● 在嵌套第三方 APP 中，我们一般是调用对应的 SDK 提供的方法，即可实现旋转屏幕● …实现方式还有很多，各有千秋，相信 HarmonyOS 也会提供对应 API 方法来设置旋转屏幕。
复制链接

扫一扫