一种电子白板的直尺功能实现方法及系统与流程

1.本发明涉及电子白板直尺技术领域，尤其涉及一种电子白板的直尺功能实现方法及系统。


背景技术：

2.当前电子白板技术在教学方面应用广泛，常常会涉及到需要直尺辅助教学，为满足日常的教学场景，需模拟实物的直尺来绘制直线，实现直尺功能。一般是在画布上直接绘制直尺的ui图片，然后处理同一层画布上的触摸事件，根据触摸点距离直尺两边线的距离，将触摸坐标转换为直尺边线上对应的点坐标，从而绘制处贴合直尺两边的直线。
3.现有的技术方案中，将直尺图片直接绘制在画布上，与笔迹图形在同一层，会增加画布刷新绘制的内容，同时，触摸事件放在同一层处理，计算量相较于分层处理会更大，会增加画布书写逻辑的判断计算量，一定程度上影响画布书写等性能，降低流畅性体验。


技术实现要素：

4.本发明提供了一种电子白板的直尺功能实现方法及系统，实现分层处理触摸事件，减少画布书写逻辑的计算量，提高书写的流畅性。
5.为了解决上述技术问题，本发明实施例提供了一种电子白板的直尺功能实现方法及系统，包括：
6.根据加载的直尺ui图片，得到第一区域，将第一区域的纵向边线位置设置预设像素的透明边距，得到第二区域；
7.将第二区域添加到电子白板画布的父布局上；
8.监听第二区域的触摸事件，并根据触摸事件和坐标数据，进行触摸事件对应的功能操作，实现直尺的功能；其中，触摸事件包括绘制直线、旋转、缩放、平移和删除。
9.实施本发明实施例，根据加载的直尺ui图片，得到第一区域，第一区域是直尺图片控件的直尺主体控件区域，在第一区域的纵向边线位置设置预设像素的透明边距，得到第二区域，第二区域是整体布局区域，其包含第一区域(直尺主体控件区域)和上下透明边距区域，添加透明边距，方便后续直接判断处理透明边距区域内的触摸事件转换为绘制直线的点坐标。将第二区域即直尺整体布局添加显示到电子白板书写画布的父布局上，可保持直尺在画布的父布局层以及显示在画布上方，避免将直尺图片直接绘制在画布上以及笔迹图形在同一层，减少画布刷新绘制的内容。监听第二区域(整体布局区域)的触摸事件，触摸事件包括绘制直线、旋转、缩放、平移和删除，并根据触摸事件和坐标数据，将第二区域(整体布局区域)进行触摸事件对应的功能操作，实现直尺功能，将触摸事件放在画布的父布局层处理，实现分层处理触摸事件，可减少部分的坐标计算处理逻辑，减少画布书写逻辑的计算量，提高书写的流畅性，实现方式更简便，用户体验流畅性更高。
10.作为优选方案，监听第二区域的触摸事件，并根据触摸事件和坐标数据，进行触摸事件对应的功能操作，实现直尺功能，具体为：
11.当触摸事件为绘制直线时，监听第二区域中透明边距区域的当前触摸事件；其中，当前触摸事件包括上边区域触摸事件和下边区域触摸事件；
12.根据当前触摸事件和第二区域的坐标数据，将当前触摸事件的y坐标数据赋值为第二区域的对应边线相对屏幕原点的y坐标；
13.根据当前触摸事件和第二区域的当前坐标轴原点，计算绘制直线坐标数据；
14.根据绘制直线坐标数据，修改当前触摸事件的x坐标和y坐标，获得修改后触摸事件；
15.根据修改后触摸事件，通过预设第一返回方式，将修改后触摸事件向下分发，并传递到电子白板画布上，使电子白板画布根据绘制直线坐标数据，绘制贴合直尺的直线，实现直尺的绘制直线功能。
16.实施本发明实施例，监听直尺上下两边的透明间距区域的触摸事件，并根据触摸事件和坐标数据，计算绘制直线坐标数据，并根据绘制直线坐标数据修改触摸事件，将修改后触摸事件向下分发，传递到画布上，实现分层处理触摸事件，完美对接了画布的触摸书写逻辑，可减少部分的坐标计算处理逻辑，实现书写绘制直线的效果，同时不会影响画布的刷新渲染性能。
17.作为优选方案，根据当前触摸事件和第二区域的当前坐标轴原点，计算绘制直线坐标数据，具体为：
18.根据第二区域的当前坐标轴原点，计算屏幕坐标位置；
19.根据屏幕坐标位置和当前触摸事件，计算对应边线坐标；其中，对应边线坐标包括上边线坐标和下边线坐标；
20.将当前坐标轴原点和对应边线坐标，通过矩阵变换的旋转，获得绘制直线坐标数据。
21.实施本发明实施例，虑直尺整体布局经过平移，缩放、旋转等操作，坐标轴原点也会发生同步变换，根据当前坐标轴原点重新计算转换为相对屏幕的绘制直线坐标数据，方便绘制出视觉上的直线位置。
22.作为优选方案，将第二区域添加显示到电子白板画布的父布局上之前，还包括：将功能按钮，加入第二区域的预设位置，其中，功能按钮包括旋转按钮和删除按钮。
23.实施本发明实施例，可根据用户需求在第二区域(整体布局区域)添加功能按钮，添加相应的功能。
24.作为优选方案，监听第二区域的触摸事件，并根据触摸事件和坐标数据，进行触摸事件对应的功能操作，实现直尺功能，具体为：
25.当触摸事件为旋转时，监听旋转按钮的当前触摸事件；
26.根据第一区域的宽、高和左上角原点坐标位置，计算中心点；
27.通过三角函数计算当前触摸事件的坐标点与中心点的角度,获得旋转角度；
28.根据旋转角度，将第二区域进行旋转，实现直尺的旋转功能。
29.实施本发明实施例，根据坐标数据和当前触摸事件，计算出旋转角度，即手指触摸点与中心点的夹角，将第二区域(整体布局区域)进行旋转，保持直尺始终与触摸点在同一水平线上，实现跟随触摸点的旋转效果。
30.作为优选方案，监听第二区域的触摸事件，并根据触摸事件和坐标数据，进行触摸
事件对应的功能操作，实现直尺功能，具体为：
31.当触摸事件为缩放时，监听第二区域中第一区域的当前触摸事件；
32.通过预设第二返回方式，拦截消费当前触摸事件；
33.根据当前触摸事件的坐标数据，计算第一距离；
34.根据上一次触摸事件的坐标数据，计算第二距离；
35.根据第一距离和第二距离，计算手势移动产生的缩放比；
36.根据缩放比，修改第一区域的宽高参数，将第二区域进行缩放，实现直尺的缩放功能。
37.实施本发明实施例，根据手势移动产生的缩放比，修改第一区域(直尺主体控件区域)的宽高参数的方式，放大或缩小直尺的大小，此方法能保证直尺图片的分辨率不会失真模糊。
38.作为优选方案，监听第二区域的触摸事件，并根据触摸事件和坐标数据，进行触摸事件对应的功能操作，实现直尺功能，具体为：
39.当触摸事件为平移时，监听第二区域中第一区域的当前触摸事件；
40.通过预设第三返回方式，拦截消费当前触摸事件；
41.根据上一次触摸事件的坐标数据和当前触摸事件的坐标数据，计算偏移距离；
42.根据偏移距离，调用安卓原生的移动坐标原点方法，将第二区域进行移动，实现直尺的移动功能。
43.作为优选方案，监听第二区域的触摸事件，并根据触摸事件和坐标数据，进行触摸事件对应的功能操作，实现直尺功能，具体为：
44.当触摸事件为删除时，监听删除按钮的当前触摸事件；
45.根据当前触摸事件，调用安卓原生的删除方法，将第二区域从父布局上移除，实现直尺的删除功能。
46.为了解决相同的技术问题，本发明实施例还提供了一种电子白板的直尺功能实现系统，包括：加载直尺模块、添加布局模块和功能实现模块；
47.其中，加载直尺模块用于根据加载的直尺ui图片，得到第一区域，将第一区域的纵向边线位置设置预设像素的透明边距，得到第二区域；
48.添加布局模块用于将第二区域添加到电子白板画布的父布局上；
49.功能实现模块用于监听第二区域的触摸事件，并根据触摸事件和坐标数据，进行触摸事件对应的功能操作，实现直尺的功能；其中，触摸事件包括绘制直线、旋转、缩放、平移和删除。
50.作为优选方案，还包括按钮模块，按钮模块用于将功能按钮，加入第二区域的预设位置，其中，功能按钮包括旋转按钮和删除按钮。
附图说明
51.图1：为本发明提供的电子白板的直尺功能实现方法的一种实施例的流程示意图；
52.图2：为本发明提供的电子白板的直尺功能实现方法的一种实施例的绘制直线流程图；
53.图3：为本发明提供的电子白板的直尺功能实现方法的一种实施例的上边区域触
摸事件图；
54.图4：为本发明提供的电子白板的直尺功能实现方法的一种实施例的下边区域触摸事件图；
55.图5：为本发明提供的电子白板的直尺功能实现系统的一种实施例的结构示意图。
具体实施方式
56.下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
57.实施例一
58.请参照图1，为本发明实施例提供的一种电子白板的直尺功能实现方法的流程示意图。本实施例的直尺功能实现方法适用于电子白板，本实施例通过将直尺ui图片和电子白板画布分层，并分区域处理触摸事件，实现分层处理触摸事件，减少画布书写逻辑的计算量，提高书写的流畅性。该直尺功能实现方法包括步骤101至步骤103，各步骤具体如下:
59.步骤101：根据加载的直尺ui图片，得到第一区域，将第一区域的纵向边线位置设置预设像素的透明边距，得到第二区域。
60.在本实施例中，可使用原生imageview加载直尺ui图片，同时还可使用svg格式的图片资源，保证直尺图片缩放后，分辨率不会失真模糊。根据加载的直尺ui图片，得到第一区域，即直尺主体控件区域。将第一区域的纵向边线位置设置预设像素的透明边距，可通过在直尺整体布局xml文件中添加android:paddingvertical＝"20px"的设置边距的方法，使得直尺imageview的上下两边有20px的透明间距，得到第二区域，即整体布局区域，其包含第一区域(直尺主体控件区域)和上下透明边距区域，添加上下边线的透明边距，方便后续直接判断处理透明边距区域内的触摸事件转换为绘制直线的点坐标。
61.步骤102：将第二区域添加到电子白板画布的父布局上。
62.在本实施例中，将第二区域(整体布局区域)添加到电子白板画布的父布局上，可通过安卓原生addview的方法，将直尺整体布局添加显示到书写画布的surfaceview的父布局上，从而保持直尺显示在画布上方。
63.可选的，将第二区域添加显示到电子白板画布的父布局上之前，还包括：将功能按钮，加入第二区域的预设位置，其中，功能按钮包括旋转按钮和删除按钮。
64.在本实施例中，在第二区域(整体布局区域)上指定位置加入删除和旋转按钮，在实现直尺删除和旋转功能时，对应按钮作为判断的触发事件，还可根据教学需要扩展直尺的其他功能，如复原、扩大细节和缩小细节等。
65.步骤103：监听第二区域的触摸事件，并根据触摸事件和坐标数据，进行触摸事件对应的功能操作，实现直尺的功能；其中，触摸事件包括绘制直线、旋转、缩放、平移和删除。
66.可选的，绘制直线流程，如图2所示，绘制直线流程包括步骤201至步骤205，各步骤具体如下:
67.步骤201：当触摸事件为绘制直线时，监听第二区域中透明边距区域的当前触摸事件；其中，当前触摸事件包括上边区域触摸事件和下边区域触摸事件。
68.步骤202：根据当前触摸事件和第二区域的坐标数据，将当前触摸事件的y坐标数据赋值为第二区域的对应边线相对屏幕原点的y坐标。
69.在本实施例中，监听直尺上下两边的透明间距区域的触摸事件，当触摸事件在上部分透明区域(上边区域)，如图3所示，即触摸事件的坐标点位于上边部分透明区域，当触摸事件在下部分透明区域(下边区域)，如图4所示，即触摸事件的坐标点位于下边部分透明区域，可通过motionevent.setlocation(x,y)坐标重新赋值的方法将触摸事件的y坐标数据改为直尺imageview上边线相对屏幕原点的坐标。
70.步骤203：根据当前触摸事件和第二区域的当前坐标轴原点，计算绘制直线坐标数据。
71.在本实施例中，考虑直尺的第二区域(整体布局区域)经过平移，缩放、旋转等操作，坐标轴原点也会发生同步变换，故需要根据当前坐标轴原点重新计算转换为相对屏幕左上角的原点坐标轴的坐标，方便绘制出视觉上的直线位置。
72.可选的，步骤203具体为：根据第二区域的当前坐标轴原点，计算屏幕坐标位置；根据屏幕坐标位置和当前触摸事件，计算对应边线坐标；其中，对应边线坐标包括上边线坐标和下边线坐标；将当前坐标轴原点和对应边线坐标，通过矩阵变换的旋转，获得绘制直线坐标数据。
73.在本实施例中，可通过getlocationinwindow方法，计算第二区域(整体布局区域)的坐标原点在屏幕上的坐标位置，获得屏幕坐标位置，getlocationinwindow方法为：
74.int[] location＝new int[2]；
[0075]
getlocationinwindow(location)。
[0076]
当触摸事件为上边区域触摸事件，根据直尺布局坐标原点在屏幕的位置(屏幕坐标位置)，可通过get方法，计算转换上部分绘制直线的坐标(上边线坐标)，即直尺imageview图片的上边线，get方法为：
[0077]
float drawx＝location[0]+event.getx()；
[0078]
float drawy＝location[1]+ivruler.gety()。
[0079]
当触摸事件为下边区域触摸事件，根据直尺布局坐标原点在屏幕的位置(屏幕坐标位置)，可通过getheight方法，计算转换下部分绘制直线的坐标(下边线坐标)，即直尺imageview图片的下边线，getheight方法为：
[0080]
float drawx＝location[0]+event.getx()；
[0081]
float drawy＝location[1]+ivruler.gety()+ivruler.getheight()。
[0082]
相对直尺布局的坐标原点和边线坐标，通过矩阵变换旋转xy轴坐标，得到水平角度为0的坐标数据(绘制直线坐标数据)，矩阵变换为：
[0083]
matrix matrix＝new matrix()；
[0084]
matrix.postrotate(currrotation,location[0],location[1])；
[0085]
float[]drawpoint＝new float[]{drawx,drawy}；
[0086]
matrix.mappoints(drawpoint)。
[0087]
步骤204：根据绘制直线坐标数据，修改当前触摸事件的x坐标和y坐标，获得修改后触摸事件。
[0088]
在本实施例中，x坐标和y坐标即为步骤203方法中得到的绘制直线的坐标(绘制直
线坐标数据)，将手指触摸透明区域接收到的歪曲的坐标点修改为绘制直线的坐标，即水平状态下，y轴坐标相同，x轴不变的坐标。当直尺旋转后，y坐标也需要跟随旋转，在旋转后也需要修改y坐标，得到旋转后的直线。
[0089]
步骤205：根据修改后触摸事件，通过预设第一返回方式，将修改后触摸事件向下分发，并传递到电子白板画布上，使电子白板画布根据绘制直线坐标数据，绘制贴合直尺的直线，实现直尺的绘制直线功能。
[0090]
在本实施例中，修改后触摸事件中已经将绘制直线坐标数据进行修改，得到的绘制直线坐标数据可以通过安卓原生的方法把坐标数据传递到下一层的画布上，画布则根据这些坐标数据来绘制path，从而渲染显示出贴合直尺的直线，并通过在触摸事件监听方法ontouch中返回false的方式(预设第一返回方式)，通过setlocation方法将修改后触摸事件向下分发，传递到画布上，完美对接画布的触摸书写逻辑，实现书写绘制直线的效果。setlocation方法为：
[0091]
motionevent.setlocation(drawpoint[0],drawpoint[1])。
[0092]
可选的，当触摸事件为旋转时，监听旋转按钮的当前触摸事件；根据第一区域的宽、高和左上角原点坐标位置，计算中心点；通过三角函数计算当前触摸事件的坐标点与中心点的角度,获得旋转角度；根据旋转角度，将第二区域进行旋转，实现直尺的旋转功能。
[0093]
在本实施例中，监听旋转按钮的触摸事件，当接收到action_down的按下事件时开始触发旋转功能，通过三角函数计算当前触摸事件与中心点的角度，使用安卓原生旋转控件的方法将直尺整体布局旋转同样的角度。当前触摸事件指的是按下旋转按钮后，计算触摸移动的坐标点与中心点的角度，即直尺所要旋转到的角度，达到直尺跟随手指旋转的效果。中心点即为直尺中心点位置，可通过getwidth和getheight方法，根据直尺布局的左上角原点坐标位置和宽高的一半计算中心点，getwidth和getheight方法为：
[0094]
float centerx＝getx()+getwidth()/2；
[0095]
float centery＝gety()+getheight()/2。
[0096]
可通过三角函数方法，计算前触摸事件的当前坐标点与中心点角度的方法，三角函数方法为：
[0097]
public float rotationtocenterpoint(motionevent event){
[0098]
double arc＝math.atan2(event.getrawy()-centery,event.getrawx()-centerx)；
[0099]
return(float)math.todegrees(arc)；
[0100]
}。
[0101]
通过setrotation方法，根据旋转角度，将第二区域(整体布局区域)进行旋转，实现直尺的旋转功能，即手指触摸点与中心点的夹角，保持直尺始终与触摸点在同一水平线上。currrotation为旋转角度，setrotation方法为：setrotation(currrotation)。
[0102]
需要说明的是，三角函数计算当前触摸事件与中心点的角度，指已知坐标系上两点坐标位置，同时坐标位置垂直于x轴，两点之间的直线与x轴即可获得一个直角三角形，两点y轴相减得到竖向的直角边，两点x轴相减得到横向的直角边，根据三角函数“反正切”方法即可求得两点直接的直线与x轴形成的夹角。
[0103]
可选的，当触摸事件为缩放时，监听第二区域中第一区域的当前触摸事件；通过预
设第二返回方式，拦截消费当前触摸事件；根据当前触摸事件的坐标数据，计算第一距离；根据上一次触摸事件的坐标数据，计算第二距离；根据第一距离和第二距离，计算手势移动产生的缩放比；根据缩放比，修改第一区域的宽高参数，将第二区域进行缩放，实现直尺的缩放功能。
[0104]
在本实施例中，可通过两指手势移动实现缩放效果，与平移类似，监听直尺的imageview图片控件区域，即第一区域(直尺主体控件区域)，并在触摸事件监听ontouch方法中返回true的方式(预设第二返回方式)，拦截消费此次事件，通过计算每一次action_move事件的两指距离，并除以上一次事件的两指距离，得到此次手势移动产生的缩放比，最后使用修改imageview布局宽高参数的方式，放大或缩小直尺的大小，能保证直尺图片的分辨率不会失真模糊。
[0105]
根据坐标数据，计算两点距离，具体方法为：
[0106][0107][0108]
根据缩放比，可通过getlayoutparams方法，修改布局宽高，ivruler为直尺imageview图片控件，originwidth为原始宽度，originheight为原始高度，currscale为缩放比，getlayoutparams方法为：
[0109][0110]
可选的，当触摸事件为平移时，监听第二区域中第一区域的当前触摸事件；通过预设第三返回方式，拦截消费当前触摸事件；根据上一次触摸事件的坐标数据和当前触摸事件的坐标数据，计算偏移距离；根据偏移距离，调用安卓原生的移动坐标原点方法，将第二区域进行移动，实现直尺的移动功能。
[0111]
在本实施例中，直尺整体布局中的imageview图片控件是直尺的主体区域，即第一区域(直尺主体控件区域)，监听此区域的触摸事件，并在触摸事件监听ontouch方法中返回true的方式(预设第三返回方式)，拦截消费此次事件，通过比较每一次action_move事件与上一次事件的坐标数据，得到x轴与y轴的两个方向上的偏移距离分别为dx与dy，最后使用安卓控件原生的移动坐标原点的方法，计算偏移相对距离方法为：
[0112]
setx(getx()+dx)；
[0113]
sety(gety()+dy)。
[0114]
可选的，当触摸事件为删除时，监听删除按钮的当前触摸事件；根据当前触摸事件，调用安卓原生的删除方法，将第二区域从父布局上移除，实现直尺的删除功能。
[0115]
在本实施例中，当触摸事件为删除时，即用户点击删除按钮，监听删除按钮的当前触摸事件，调用安卓原生的删除方法，如removeview方法，将第二区域(整体布局区域)从父布局上移除，即直尺整体布局从电子白板画布上删除。
[0116]
实施本发明实施例，根据加载的直尺ui图片，得到第一区域，第一区域是直尺图片控件的直尺主体控件区域，在第一区域的纵向边线位置设置预设像素的透明边距，得到第二区域，第二区域是整体布局区域，其包含第一区域(直尺主体控件区域)和上下透明边距区域，添加透明边距，方便后续直接判断处理透明边距区域内的触摸事件转换为绘制直线的点坐标。将第二区域即直尺整体布局添加显示到电子白板书写画布的父布局上，可保持直尺在画布的父布局层以及显示在画布上方，避免将直尺图片直接绘制在画布上以及笔迹图形在同一层，减少画布刷新绘制的内容。监听第二区域(整体布局区域)的触摸事件，触摸事件包括绘制直线、旋转、缩放、平移和删除，并根据触摸事件和坐标数据，将第二区域(整体布局区域)进行触摸事件对应的功能操作，实现直尺功能，将触摸事件放在画布的父布局
层处理，实现分层处理触摸事件，可减少部分的坐标计算处理逻辑，减少画布书写逻辑的计算量，提高书写的流畅性，实现方式更简便，用户体验流畅性更高。
[0117]
实施例二
[0118]
相应地，参见图5，图5是本发明提供的电子白板的直尺功能实现系统的实施例二的结构示意图。如图5所示，电子白板的直尺功能实现系统包括加载直尺模块501、按钮模块502、添加布局模块503和功能实现模块504；
[0119]
其中，加载直尺模块501用于根据加载的直尺ui图片，得到第一区域，将第一区域的纵向边线位置设置预设像素的透明边距，得到第二区域。
[0120]
按钮模块502用于将功能按钮，加入第二区域的预设位置，其中，功能按钮包括旋转按钮和删除按钮。
[0121]
添加布局模块503用于将第二区域添加到电子白板画布的父布局上；
[0122]
功能实现模块504用于监听第二区域的触摸事件，并根据触摸事件和坐标数据，进行触摸事件对应的功能操作，实现直尺的功能；其中，触摸事件包括绘制直线、旋转、缩放、平移和删除。
[0123]
实施本发明实施例，直尺功能实现系统可通过使用安卓原生view控件的方式，不会影响画布的刷新渲染性能，同时分层处理触摸事件，可减少部分的坐标计算处理逻辑，实现方式更简便，用户体验流畅性更高。
[0124]
以上所述的具体实施例，对本发明的目的、技术方案和有益效果进行了进一步的详细说明，应当理解，以上所述仅为本发明的具体实施例而已，并不用于限定本发明的保护范围。特别指出，对于本领域技术人员来说，凡在本发明的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。