记录小程序端横屏完成手写签字(canvas)

593 阅读1分钟

记录小程序端横屏如何正常完成手写签字(canvas),给这个功能的实现做一个简单记录。

1、先准备好一个画布元素,canvas。

1.png 2、拿到canvas及canvas的上下文,以便后续操作。

2.png 3、重置画布,让其变成类似于手机横屏,相当于交换x,y轴。之所以让画布转换坐标,旋转90°,是因为初始化画布的时候,需要画上初始文字及图标,需要让其看起来是横屏的,就是下面这个样子的。

3.png

1.jpg 4、转换画布后,触摸签字拿到的坐标点,x、y如果按照常规的路劲填充,就会乱,不是自己想要的轨迹,试想一下一张竖着的纸变成横着的,它的横竖坐标是变了的,然而事件获取到的却没变。简单说就是画布是y,x。取到的坐标是x,y,所以路径填充需要换起点与终点。如下图

5.png

6.png