基于浏览器内核的触控绘制曲线的方法与流程

[0001]
本发明涉及软件开发技术领域，尤其涉及基于浏览器内核的触控绘制曲线的方法。


背景技术：

[0002]
智能交互大屏是指具有android或windows操作系统及触控交互系统的液晶显示设备，通过触控系统实现人机交互。交互大屏可以内置插拔式ops电脑(标准x86架构)或者采用云端化的虚拟桌面，使交互大屏具有android和windows双操作系统特征。操作系统之间可以切换，每一个系统上运行相应的软件，以满足教育教学、商用会议等场合的应用需求。
[0003]
具备触控交互系统的大屏最基本的功能就是能够支持用手指或其他物体直接在屏幕上进行文字书写和显示。随着智能交互大屏设备越来越普遍，书写作为智能交互大屏的核心功能，其书写体验被用户日益重视，这包括书写的响应速度、笔迹的流畅程度等。
[0004]
基于现代浏览器h5标准的开发方式，利用网页技术能非常便捷地开发出android、ios、windows端的应用程序，并且天生具有跨平台、快速开发、社区资源丰富的优点。具体而言，android可以使用webview和开源的浏览器，windows可以利用electron对chrome浏览器的封装实现本地应用。
[0005]
现有的基于h5 canvas实时绘制曲线系统的绘图工作机制为：系统收到输入事件后触发重绘，重绘需要调用canvas api清空绘制区域并绘制基于以往触摸事件的全部曲线，然后等待刷新信号触发显示到屏幕上，对于硬件较差的触控交互系统来说刷新周期信号的频率通常为30hz，甚至更低，即大约每33ms产生一次刷新周期信号，由于绘制区域和绘制曲线动作分别为完整区域和完整的路径，原生h5 canvas图形系统刷新是基于绘制动作的刷新，绘制路径刷新的区域大小和曲线复杂度会随着书写事件地增长而增大，导致路径的绘制复杂度提高，计算量增大，图层的混合和渲染也将花费很长的事件，需要几个刷新周期，绘制图形才能到达显卡缓冲区，绘制的延迟达到200ms以上。再者由于智能交互大屏触控输入频率较高一般为100hz～150hz，每秒会产生100到150个触控事件，这会加重canvas上绘制的曲线的负担。降低触控交互系统的实时性体验。


技术实现要素：

[0006]
本发明的目的就在于为了解决上述现有的触控绘制曲线方法带来的绘制延迟的问题而提供基于浏览器内核的触控绘制曲线的方法，本发明针对基于htm1的canvas实现实时触控绘制曲线，从触控点到绘制到屏幕上在较差的大屏硬件设备上延时很高，能在成本较低的大屏触屏设备上取的较好的绘制曲线实时性，其本质是通过算法降低从获取到触控数据到最终绘制到屏幕上的时间。通过两层画布，一层画布上用算法实现绘制增量的曲线，兼顾曲线的平滑度和绘制的实时性，另外一层画布通过预测绘制增量曲线的末端，并不停的更新预测的曲线末端，以进一步提升用户体验，降低延时。
[0007]
本发明通过以下技术方案来实现上述目的：
[0008]
基于浏览器内核的触控绘制曲线的方法，包括以下步骤：
[0009]
步骤s1，创建两层canvas作为实时绘制曲线的画布，一层作为动态画布，一层作为临时画布；
[0010]
步骤s2，当捕获到输入事件时，实时收集并存储输入事件的触控点对应的触控数据，所述输入事件包括触控按下事件、触控移动事件和触控抬起事件；
[0011]
步骤s3，当捕获到触控抬起事件时，把临时画布上的曲线绘制到动态画布上，并清空临时画布。
[0012]
进一步方案为，所述的上一次绘制的对应的触控数据，指上一次绘制曲线的起点及计算曲线所有的控制点。
[0013]
进一步方案为，所述的曲线的末端，是根据指最新触控数据和之前的触控数据预测的曲线，可能预测不准确。
[0014]
进一步方案为，所述将当前绘制区域的当前绘制路径绘制到动态画布上为采用canvas 2d上下文引擎来实现图形的绘制。
[0015]
进一步方案为，所述实时收集并存储输入事件的触控点，因浏览器已经做到和系统刷新帧率同步，所以可能会丢失很多触控数据点，为了更加细腻的曲线效果，可采用getcoalescedevents接口获取更加详细的触控事件点。
[0016]
进一步方案为，所述步骤s2具体包括如下步骤：
[0017]
s201、实时收集并存储输入事件的触控点对应的触控数据，获取上一次触控数据的曲线的终点，根据当前触控数据和上述触控点对应的触控数据得到当前绘制区域并采用二阶贝赛尔曲线算法计算当前增量绘制曲线；
[0018]
s202、临时画布根据上一次触控数据计算得到上一次的绘制区域，清空上一次画布上的绘制区域，并且根据预测的未来触控走势，绘制末端的曲线；
[0019]
s203、htm1的canvas会在屏幕需要刷新的时候，自动把图层混合并且显示到对应的屏幕区域。
[0020]
进一步方案为，所述步骤s2中，若所述输入事件为触控按下事件，则根据当前笔触信息，初始化动态画布和临时画布，清空画布、设置颜色、线条宽度；
[0021]
若所述输入事件为触控移动事件，则根据当前触控点对应的触控数据及与上一次绘制的对应的触控数据计算增量曲线，计算临时画布上一次的绘制区域，清空临时画布上对应的区域，增量地根据新的触控数据绘制新的线条到动态画布，并且根据当前触控数据的最后一点，绘制曲线的末端到临时画布上；
[0022]
若所述输入事件为触控抬起事件，则把临时画布上的数据转成图像绘制到动态画布上，并清空临时画布。
[0023]
本发明的有益效果在于：
[0024]
本发明的基于浏览器内核的触控绘制曲线的方法，采用动态画布和临时画布相结合，并且每次绘制避免清空动态画布，以做绘制在绘制流程上，在动态画布上只进行当前最新的几个点对应的曲线的绘制，无需清空原来的动态画布，使得绘制动作不会随着书写事件的增长而增长，极大的提高了绘制效率；在绘制时间点上，将原来的一帧绘制一次完整的曲线，改成只要得到触控数据就立即绘制一次对应的小段曲线，绘制延迟得到了较大的改
善；在曲线末端的绘制上，因为曲线末端没有足够的信息来预测未来的曲线走势，和未来的曲线无法平滑的过渡，采用临时画布的方式，在大多数情况下能兼顾实时性和曲线的平滑性，将本方案应用到智能交互大屏终端时，绘制延迟可由原先的200ms以上降低到100ms左右，用户体验更“跟手”。
附图说明
[0025]
为了更清楚地说明本发明实施例中的技术方案，下面将对实施例或现有技术描述中所需要实用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
[0026]
图1为本发明流程图。
具体实施方式
[0027]
为使本发明的目的、技术方案和优点更加清楚，下面将对本发明的技术方案进行详细的描述。显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动的前提下所得到的所有其它实施方式，都属于本发明所保护的范围。
[0028]
在任一实施例中，如图1所示，本发明的基于浏览器内核的触控绘制曲线的方法，包括以下步骤：
[0029]
创建两层canvas作为实时绘制曲线的画布，一层作为动态画布，一层作为临时画布；
[0030]
当捕获到输入事件时，实时收集并存储输入事件的触控点对应的触控数据，所述输入事件包括触控按下事件、触控移动事件和触控抬起事件；
[0031]
若所述输入事件为触控按下事件，则根据当前笔触信息，初始化动态画布和临时画布，清空画布、设置颜色、线条宽度等；
[0032]
若所述输入事件为触控移动事件，则根据当前触控点对应的触控数据及与上一次绘制的对应的触控数据计算增量曲线，计算临时画布上一次的绘制区域，清空临时画布上对应的区域增量地根据新的触控数据绘制新的线条到动态画布并且根据当前触控数据的最后一点绘制曲线的末端到临时画布上；
[0033]
若所述输入事件为触控抬起事件，则把临时画布上的数据转成图像绘制到动态画布上，并清空临时画布。
[0034]
为了保证当前绘制路径的连贯性，所述上一次触控事件对应的触控数据包括：上一次触控事件和上一次绘制的曲线的起点。
[0035]
具体可采用二阶贝赛尔曲线算法，把所有的触控点依次作为曲线的控制点，触控点之间的中点作为依次绘制的短曲线的终点。
[0036]
需要说明的是，本触控绘图方法可应用在智能交互大屏终端、智能手机、平板电脑以及带有windows操作系统的智能设备上。
[0037]
在一个具体实施例中，如图1所示，本发明的基于浏览器内核的触控绘制曲线的方法，包括如下步骤：
[0038]
s1、创建动态画布和临时画布；
[0039]
s2、当捕获到触控按下事件或触控移动事件时，采用动态画布的绘制方法绘制当前增量曲线，采用临时画布的绘制方法绘制当前增量曲线的末端预测曲线；
[0040]
上述步骤s2具体包括如下步骤：
[0041]
s201、实时收集并存储输入事件的触控点对应的触控数据，获取上一次触控数据的曲线的终点，根据当前触控数据和上述触控点对应的触控数据得到当前绘制区域并采用二阶贝赛尔曲线算法计算当前增量绘制曲线；
[0042]
s202、临时画布根据上一次触控数据计算得到上一次的绘制区域，清空上一次画布上的绘制区域，并且根据预测的未来触控走势，绘制末端的曲线；
[0043]
s203、htm1的canvas会在屏幕需要刷新的时候，自动把图层混合并且显示到对应的屏幕区域；
[0044]
s3、当捕获到触控抬起事件时，把临时画布上的曲线绘制到动态画布上，并清空临时画布。
[0045]
动态画布和临时画布上绘制曲线的不同部分。动态画布，采用二阶贝塞尔曲线的绘制方式，采用触控点的中点作为曲线的途经点，采用触控点作为曲线的控制点，能在用户不停的输入新的触控操作的时候，时间稳定的及时绘制出曲线，并且不会因为历史触控数据变多而变慢。临时画布上预测的曲线末端会被不断的擦除当时由于临时画布绘制的区域较小，用户不会感受到临时画布的更改，反倒由于临时画布在大多数情况下能能提前抢先画出用户的绘制曲线，反倒让用户感觉绘制曲线的实时性非常高，体验更佳。
[0046]
以上所述，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应以所述权利要求的保护范围为准。另外需要说明的是，在上述具体实施方式中所描述的各个具体技术特征，在不矛盾的情况下，可以通过任何合适的方式进行组合，为了避免不必要的重复，本发明对各种可能的组合方式不再另行说明。此外，本发明的各种不同的实施方式之间也可以进行任意组合，只要其不违背本发明的思想，其同样应当视为本发明所公开的内容。