基于移动端绘图程序的实现

刘建东

摘要： 微软操作系统自带的绘图软件能实现文字的书写以及简单图形绘制等功能，但绘制过程中，鼠标容易发生位置的偏移，从而模糊了用户表达的意图。移动端绘图程序利用JavaScript和Canvas技术模拟了用户在现实生活中的绘图过程以及绘图效果，特别是，为模拟用户笔画的粗细，该程序建立和实现了数学模型，从实现效果来看，符合用户实际情况。

关键词： JavaScript；Canvas；移动端；绘图

中图分类号：TP311 文献标识码：A 文章编号：1009-3044（2017）05-0160-02

微软的操作系统在程序附件功能中，自带了绘图程序。该绘图程序的目的是，用户在演示时，可以通过该程序绘制简单的图形，配上说明文字，来表达用户的意图。但是在绘制过程中，用户依赖鼠标作为输入設备。而鼠标的移动具有直线性、易偏移性，因此通过鼠标绘制的图形线段不流畅，导致绘制的图形、文字均与用户表达的意图有明显的区别，影响表达效果。不仅如此，用户操作过程通过鼠标来操作也不方便，尽管现在已经发明了更符合人体工学的鼠标，但是，从用户体验感来说，使用鼠标与直接用手绘制相比，依然存在不少差距。本文充分利用了移动端的触屏技术，通过使用JavaScript和Canvas技术来模拟用户实际生活中绘制图形的过程，解决了鼠标操作带来的不便。此外，图形的线条粗细与用户绘图的用力有较大的关系，用力越大，线条越粗，为模拟此效果，本文还建立了线条粗细与运笔速度的数学模型，并编程实现，通过测试发现，程序结果符合实际情况。

接下来，笔者介绍一下其他章节的主要内容：第二节，总体介绍了绘图程序的功能以及实现步骤；第三节，分别针对每个步骤描述实现的关键技术；第四节，展示程序的运行效果；最后总结。

1 移动端绘图程序的功能以及实现步骤

用户通过微信“扫一扫”进入移动端绘图程序页面，用户在红色方框内的绘图区，通过手指绘制图形和文字，手指移开绘图区或者手机屏幕，即停止绘制。如果想清除之前绘制的图形，可以点击屏幕左下角的“清除”按钮即可。

实现上述功能的步骤如下：

利用JavaScript与Canvas绘制绘图区；

响应以下事件：“触屏”，“移动”，“离开屏幕”；

在“移动”事件中，捕获触屏位置，不断绘制线段构成图形。

④建立线段粗细与运笔速度的模型，模拟用户绘制的力度；

2 实现绘图程序的关键技术

接下来，笔者将按上述步骤来分别解释绘图程序的关键技术。

2.1 绘制绘图区

绘图区通过在HTML中使用元素表示，canvas的基本属性，如宽度以及高度等属性的设置在此不赘述。如何绘制绘图区是本小节的重点。绘制图由线段组成，每个线段有不同的起点和终点，因此如何绘制线段是关键点。在此，我将介绍在canvas种绘制线段的函数，函数的具体名字以及功能描述如表1所示：

上述方法是属于canvas对象的，而每个元素对应一个canvas对象，获取canvas对象的绘图环境，需要使用getContext（String contextID）方法，contextID表示canvas元素对应的ID名。

2.2 响应与触屏相关的事件

在绘制过程中，需要监听用户手指“接触屏幕”、“在屏幕上移动”，“离开屏幕”等事件。 具体来说，三个事件对应的函数如表2所示：

2.3 获取触屏位置，绘制图形

一旦监听到触屏事件以后，就开始记录触屏位置，与鼠标点击的位置不同的是，在移动端的触屏事件中，用户手指接触屏幕的可能不止一个点。为简单处理，本文中，只选择众多接触点的其中一个点代表手指的位置。在本文中，笔者用e.touches[0].pageX、e.touches[0].pageY分别表示接触点的横坐标和纵坐标。其中e如前面所述，表示监听的事件，e.touches以数组的形式返回接触的所有点的坐标，因此e.touches[0]表示所有接触点的第一个接触点的坐标。当刚开始触屏的时候，记录下位置作为起始点，紧接着，一旦移动，会形成新的接触点，笔者把后续点作为终点。有了起始点和终点后，便可以利用前面绘制线段的函数进行绘制。如果再移动，又将得到一个新的点，此处将新的点当做终点，将之前线段的终点命名为起点，如此重复，直到监听到“离开屏幕”事件为止。

2.4 建立线段宽度与运笔速度的模型

据常识可知，在同样的笔的情况下，在绘制图形过程中，用笔的力度决定了线段的粗细。用笔力度越大，线段越粗，力度越小，线段越细。模拟上述过程的困难之处在于，程序无法获取力度的数据。因此，笔者改变思路，假设运笔的力度也与运笔的速度有关，运笔力度越大，运笔的速度越慢。由此可以得出如下结论：运笔的速度来决定线段的粗细了。运笔速度越慢，运笔力度越大，线段越粗；反之也成立。根据初中的物理知识所知，速度是路程与时间的比值。因此为了得到运笔速度，不仅需要计算线段起点和终点之间的距离，而且需要得到记录两点的时间差。距离比较容易解决，关键是时间差的计算。不妨在记录起点和终点的时候，记录当时的时间；而两者的差值即为时间差。当然，不管运笔力度如何强，线段不会趋向无穷宽；也不管运笔力度如何弱，线段不会趋向无穷细。因此，虽然根据前面的推导，运笔速度与线段的粗细成反比例关系，但是还存在一个最大值与最小值。

3 绘图程序的实现效果

本节笔者将在绘图区写一个“好”字，具体的绘图效果如图1所示：

5 结论

本文针对PC端自带的绘图程序的不足之处，讨论了移动端绘图程序的优点以及实现过程。特别是考虑了运笔的力度与线段的粗细之间的关系，通过建立数学模型表示了上述关系。当然本文的绘图程序还存在可以改进的地方，如无法选择笔的粗细；无法选择画笔的颜色，当运笔速度非常快的时候，会形成不连贯的线段，这些缺点都有待以后进行改进。

参考文献：

[1] 李刚.疯狂HTML5/CSS3/JavaScript讲义[M].北京：电子工业出版社，2012：80-120.

[2]夏帮贵.基于Android平台的移动学习系统[J].西华大学学报：自然科学版，2011，30（5）：81-84.