CN110297568A - 电子白板实现方法、装置、设备以及存储介质 - Google Patents
电子白板实现方法、装置、设备以及存储介质 Download PDFInfo
- Publication number
- CN110297568A CN110297568A CN201810240020.4A CN201810240020A CN110297568A CN 110297568 A CN110297568 A CN 110297568A CN 201810240020 A CN201810240020 A CN 201810240020A CN 110297568 A CN110297568 A CN 110297568A
- Authority
- CN
- China
- Prior art keywords
- electronic whiteboard
- vertex
- drafting
- gesture operation
- canvas
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 81
- 239000011159 matrix material Substances 0.000 claims abstract description 56
- 230000007704 transition Effects 0.000 claims abstract description 53
- 230000008569 process Effects 0.000 claims abstract description 38
- 230000009466 transformation Effects 0.000 claims abstract description 24
- 230000004044 response Effects 0.000 claims abstract description 20
- 238000004422 calculation algorithm Methods 0.000 claims description 9
- 230000005611 electricity Effects 0.000 claims description 4
- 238000012545 processing Methods 0.000 claims description 4
- 238000006243 chemical reaction Methods 0.000 abstract description 9
- 238000004064 recycling Methods 0.000 abstract description 3
- 238000010586 diagram Methods 0.000 description 11
- 238000013519 translation Methods 0.000 description 11
- 230000014616 translation Effects 0.000 description 11
- 230000006870 function Effects 0.000 description 9
- 230000004048 modification Effects 0.000 description 8
- 238000012986 modification Methods 0.000 description 8
- 238000004590 computer program Methods 0.000 description 5
- 238000010422 painting Methods 0.000 description 5
- 238000004364 calculation method Methods 0.000 description 4
- 230000008859 change Effects 0.000 description 3
- 230000000694 effects Effects 0.000 description 3
- 230000008901 benefit Effects 0.000 description 2
- 238000009877 rendering Methods 0.000 description 2
- 238000004088 simulation Methods 0.000 description 2
- 241001062009 Indigofera Species 0.000 description 1
- 238000003491 array Methods 0.000 description 1
- 230000007812 deficiency Effects 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 230000006872 improvement Effects 0.000 description 1
- 238000013507 mapping Methods 0.000 description 1
- 230000007246 mechanism Effects 0.000 description 1
- 238000004321 preservation Methods 0.000 description 1
- 230000009467 reduction Effects 0.000 description 1
- 239000004065 semiconductor Substances 0.000 description 1
- 230000003068 static effect Effects 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/03—Arrangements for converting the position or the displacement of a member into a coded form
- G06F3/041—Digitisers, e.g. for touch screens or touch pads, characterised by the transducing means
- G06F3/042—Digitisers, e.g. for touch screens or touch pads, characterised by the transducing means by opto-electronic means
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
- G06F3/0488—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures
- G06F3/04883—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures for inputting data by handwriting, e.g. gesture or text
Landscapes
- Engineering & Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本公开提出了一种电子白板实现方法、装置、设备以及存储介质。响应于用户针对电子白板执行的手势操作，修改Canvas转换矩阵的变换因子，手势操作用于变换电子白板上呈现的内容的呈现方式；以及基于修改后的Canvas转换矩阵，利用OpenGL完成电子白板上所呈现的内容的更新。由此，对于基于Canvas的电子白板，可以使用不同于Canvas的图形处理工具OpenGL实现手势操作对应的操作结果在电子白板上的呈现。而OpenGL的实现过程中的计算和/或绘制等操作都可以由GPU执行，与在JavaScript中执行数学运算的方案相比，在提高运算速率、降低延迟的同时，不会出现在JavaScript中产生临时对象导致的对象回收耗时问题。
Description
技术领域
本公开涉及显示领域，特别是涉及一种电子白板实现方法、装置、设备以及存储介质。
背景技术
行业内一般将在PC、TV等电子设备上实现的模拟白板书写操作的应用程序称为电子白板，电子白板可以为用户提供书写服务，以更好地表达用户的观点。目前，电子白板广泛应用于教育、会议、设计等多种领域。
在使用电子白板过程中经常会结合缩放和移动操作，来将之前书写过的内容放大或者移动到屏幕中间用以突出内容。从用户开始做出缩放、移动等手势操作到屏幕显示出对应的操作结果这段时间的操作延迟是电子白板的关键指标之一。
在用户做出缩放、移动等手势操作时，如何降低电子白板的操作延迟是目前亟需解决的一个问题。
发明内容
本公开的一个目的在于提供一种能够在用户做出缩放、移动等手势操作时降低电子白板的操作结果显示延迟的电子白板实现方法、装置、设备以及存储介质。
根据本公开的第一个方面提出了一种基于Canvas的电子白板实现方法，包括：响应于用户针对电子白板执行的手势操作，修改Canvas转换矩阵的变换因子，手势操作用于变换电子白板上呈现的内容的呈现方式；以及基于修改后的Canvas转换矩阵，利用OpenGL完成电子白板上所呈现的内容的更新。
可选地，手势操作包括缩放手势操作和/或平移手势操作，并且变换因子包括缩放因子和/或者平移因子。
可选地，利用OpenGL完成电子白板上所显示的图形的更新的步骤包括：确定OpenGL的绘制顶点；以及基于绘制顶点和修改后的Canvas转换矩阵，利用OpenGL在电子白板上进行绘制。
可选地，确定OpenGL的绘制顶点的步骤包括：基于绘制路径中的线宽以及点坐标，按照画线算法确定OpenGL的绘制顶点。
可选地，利用OpenGL在电子白板上进行绘制的步骤包括：基于修改后的Canvas转换矩阵，对绘制顶点进行更新；以及使用更新后的绘制顶点在电子白板上进行绘制。
可选地，由GPU执行对绘制顶点进行更新的操作，并且/或者，由GPU使用更新后的绘制顶点在电子白板上进行绘制。
可选地，电子白板实现方法还包括：在绘制路径中保存更新后的绘制顶点。
可选地，电子白板实现方法还包括：响应于手势操作结束，对绘制路径中的线宽以及点坐标进行更新。
根据本公开的第二个方面，还提供了一种电子白板实现方法，包括：使用第一图形处理工具呈现电子白板的显示内容；响应于用户针对电子白板执行的手势操作，修改第一图形处理工具的转换矩阵的变换因子，手势操作用于变换电子白板上呈现的内容的呈现方式；以及基于修改后的转换矩阵，利用第二图形处理工具完成电子白板上要呈现的内容的更新。
根据本公开的第三个方面，还提供了一种基于Canvas的电子白板实现装置，包括：修改模块，用于响应于用户针对电子白板执行的手势操作，修改Canvas转换矩阵的变换因子，手势操作用于变换电子白板上呈现的内容的呈现方式；以及第一更新模块，用于基于修改后的Canvas转换矩阵，利用OpenGL完成电子白板上所呈现的内容的更新。
可选地，手势操作包括缩放手势操作和/或平移手势操作，并且变换因子包括缩放因子和/或者平移因子。
可选地，第一更新模块包括：顶点确定模块，用于确定OpenGL的绘制顶点；以及第一绘制模块，用于基于绘制顶点和修改后的Canvas转换矩阵，利用OpenGL在电子白板上进行绘制。
可选地，顶点确定模块基于绘制路径中的线宽以及点坐标，按照画线算法确定OpenGL的绘制顶点。
可选地，第一绘制模块包括：第二更新模块，用于基于修改后的Canvas转换矩阵，对绘制顶点进行更新；以及第二绘制模块，用于使用更新后的绘制顶点在电子白板上进行绘制。
可选地，第二更新模块通过GPU对绘制顶点进行更新，并且/或者第二绘制模块通过GPU基于更新后的绘制顶点在电子白板上进行绘制。
可选地，电子白板实现装置还包括：保存模块，用于在绘制路径中保存更新后的绘制顶点。
可选地，电子白板实现装置还包括：第三更新模块，用于响应于手势操作结束，对绘制路径中的线宽以及点坐标进行更新。
根据本公开的第四个方面，还提出了一种电子白板实现装置，包括：呈现模块，用于使用第一图形处理工具呈现电子白板的显示内容；修改模块，用于响应于用户针对电子白板执行的手势操作，修改第一图形处理工具的转换矩阵的变换因子，手势操作用于变换电子白板上呈现的内容的呈现方式；以及更新模块，用于基于修改后的转换矩阵，利用第二图形处理工具完成电子白板上要呈现的内容的更新。
根据本公开的第五个方面，还提出了一种计算设备，包括：处理器；以及存储器，其上存储有可执行代码，当可执行代码被处理器执行时，使处理器执行如本公开第一个方面或第二个方面述及的方法。
根据本公开的第五个方面，还提出了一种非暂时性机器可读存储介质，其上存储有可执行代码，当可执行代码被电子设备的处理器执行时，使处理器执行如本公开第一个方面或第二个方面述及的方法。
对于基于Canvas的电子白板，本公开可以使用不同于Canvas的图形处理工具OpenGL实现手势操作对应的操作结果在电子白板上的呈现。而OpenGL的实现过程中的计算和/或绘制等操作都可以由GPU执行，与现有的在JavaScript中执行数学运算的方案相比，在提高运算速率、降低延迟的同时，不会出现在JavaScript中产生临时对象导致的对象回收耗时问题。
附图说明
通过结合附图对本公开示例性实施方式进行更详细的描述，本公开的上述以及其它目的、特征和优势将变得更加明显，其中，在本公开示例性实施方式中，相同的参考标号通常代表相同部件。
图1是示出了根据本公开一实施例的电子白板实现方法的示意性流程图。
图2是示出了本公开另一体实施例的电子白板实现方法的示意性流程图。
图3示出了执行前后的效果示意图。
图4是示出了根据本公开一实施例的电子白板实现装置的结构的示意性方框图。
图5是示出了根据本公开另一实施例的电子白板实现装置的结构的示意性方框图。
图6是示出了根据本公开一实施例的计算设备的结构的示意性方框图。
具体实施方式
下面将参照附图更详细地描述本公开的优选实施方式。虽然附图中显示了本公开的优选实施方式，然而应该理解，可以以各种形式实现本公开而不应被这里阐述的实施方式所限制。相反，提供这些实施方式是为了使本公开更加透彻和完整，并且能够将本公开的范围完整地传达给本领域的技术人员。
【术语解析】
(1)Canvas
浏览器提供的用户自定义绘制接口。HTML5中新引入的Canvas元素使得Web开发人员在无须借助任何第三方插件(如Flash，Silverlight)的情况下，可以直接使用JavaScript脚本在Web页面进行绘图。它首次由苹果公司的Webkit框架引入实现，并成功运用在Safari浏览器中。目前，Canvas已成为HTML5规范中的事实性标准，并且已经被Firefox3.0+、Safari3.0+、Chrome3.0+、Opera10.0+等浏览器所支持。基于Canvas的绘图填补了SVG绘图的在复杂绘图操作，特别是性能方面的不足，可广泛应用于Dashboard，2D/3DGame等Web应用中。
(2)Path2D
浏览器提供的用以保存绘制路径方便Canvas使用的接口。Path2D可以存储绘制路径，简化了Canvas绘制代码，并提升了运行速度。
在每个Canvas实例对象中都拥有一个Path2D对象，创建自定义图形的过程就是不断对Path2D对象操作的过程。每当开始一次新的图形绘制任务，都需要先使用beginPath()方法来重置Path2D对象至初始状态，进而通过一系列对moveTo/lineTo等画线方法的调用，绘制期望的路径，其中moveTo(x,y)方法设置绘图起始坐标，而lineTo(x,y)等画线方法可以从当前起点绘制直线，圆弧以及曲线到目标位置。最后一步，也是可选的步骤，是调用closePath()方法将自定义图形进行闭合，该方法将自动创建一条从当前坐标到起始坐标的直线。
(3)OpenGL
OpenGL，全称Open Graphics Library，是指定义了一个跨编程语言、跨平台的编程接口规格的专业的图形程序接口。它用于三维图像(二维的亦可)，是一个功能强大，调用方便的底层图形库。目前是行业领域中最广泛接纳的2D/3D的硬件加速绘制API。
(4)电子白板
在PC、TV等电子设备上实现的模拟白板书写操作的应用程序。本公开述及的电子白板可以是指基于Canvas实现的电子白板。
【方案概述】
目前，电子白板通常是基于单一图形处理工具实现的。在用户针对电子白板上呈现的内容执行缩放、移动等手势操作时，现有的方案也是使用同样的图形处理工具实现电子白板上呈现的内容的缩放或移动，但是效果并不理想。
以基于Canvas的电子白板为例，通常是使用浏览器Path2D对象实现绘制。在绘制过程中需要添加自定义属性points保存所有从touch事件中获得的点坐标，并且同时需要自定义属性LineWidth到Path2D对象。
在用户执行缩放、平移手势操作时，需要使用原Path2D对象的points属性乘以缩放系数或平移因子来得到新的点坐标，以创建新Path2D对象。并使用原Path2D对象的LineWidth属性乘以缩放系数或平移系数作为新Path2D对象的自定义LineWidth属性。然后由Canvas使用新Path2D对象以及新的LineWidth，将缩放或平移结果绘制在电子白板上。
可见，为了实现在电子白板上呈现与缩放或平移等手势操作对应的显示内容，现有方案需要每帧创建新的Path2D对象，在创建过程中需要对每个point进行数学运算，计算过程较为耗时。并且，临时对象的增加还会增加GC(对象回收)耗时。因此，使用现有方案的延迟较高，用户体验较差。
有鉴于此，本公开提出，对于使用第一图形处理工具实现的电子白板，正常情况下，可以使用第一图形处理工具呈现电子白板的显示内容。例如，响应于用户的书画操作，可以使用第一图形处理工具在电子白板上呈现与书画操作对应的书画结果。其中，此处述及的书画操作主要是指用户针对电子白板做出的用于在电子白板上呈现预定内容的操作。例如，可以是书写操作、绘画操作等等。
响应于用户针对电子白板执行用于变换电子白板上呈现的内容的呈现方式的手势操作，可以修改第一图形处理工具的转换矩阵的变换因子，然后基于修改后的转换矩阵，利用第二图形处理工具完成电子白板上要呈现的内容的更新。
需要说明的是，在用户未针对电子白板执行手势操作的情况下，电子白板上的内容的呈现可以由第一图形处理工具实现，也可以由第一图形处理工具和第二图形处理工具协同实现。对此，本公开不做限定。
本公开主要是对于用户针对电子白板执行手势操作的情况下，如何实现手势操作对应的操作结果在电子白板上的快速呈现，提出的一种解决方案。
在本公开中，第二图形处理工具优选地是指对电子白板上呈现的内容进行缩放、移动等操作时，处理性能优于第一图形处理工具的其它工具。例如，以第一图形处理工具为Canvas为例，第二图形处理工具可以是OpenGL。
具体来说，对于基于Canvas的电子白板，在用户针对该电子白板执行用于变换所述电子白板上呈现的内容的呈现方式的手势操作，例如缩放手势操作、平移手势操作时，可以基于修改Canvas转换矩阵的变换因子，然后利用OpenGL完成电子白板上所呈现的内容的更新。
在利用OpenGL完成电子白板上所呈现的内容的更新的过程中，计算过程和绘制过程都可以在GPU中执行。与现有的在JavaScript中执行数学运算的方案相比，在提高运算速率、降低延迟的同时，不会出现在JavaScript中产生临时对象导致的GC耗时问题。
下面以第一图形处理工具为Canvas，第二图形处理工具为OpenGL为例，就本公开涉及的各方面做进一步说明。应该知道，本公开述及的第一图形处理工具、第二图形处理工具也可以是基于其它类型的图形处理工具，此处不再赘述。
【实现方法】
图1是示出了根据本公开一实施例的电子白板实现方法的示意性流程图。
参见图1，在步骤S110，响应于用户针对电子白板执行的手势操作，修改Canvas转换矩阵的变换因子。
此处述及的手势操作是指用于变换电子白板上呈现的内容的呈现方式的操作，例如可以是缩放手势操作和/或平移手势操作。需要说明的是，虽然本公开是以手势操作指代用于变换电子白板上呈现的内容的呈现方式的操作。但是这类操作可以是用户手动实现，也可以是用户通过触控设备，如触控笔实现，对此本公开不做限定。
在Canvas中对一个图形进行变换的时候，只需要对Canvas转换矩阵中相应的参数(也即变换因子)进行修改，图形中的各个定点的坐标分别乘以这个修改后的转换矩阵，就能得到变换后的新的定点的坐标。在Canvas绘图中，可以通过CanvasRenderingContext2D中的相应方法对转换矩阵的变换因子进行修改。其中，此处述及的变换因子可以包括缩放因子、平移因子、旋转因子等等。
在步骤S120，基于修改后的Canvas转换矩阵，利用OpenGL完成电子白板上所呈现的内容的更新。
在利用OpenGL完成电子白板上所呈现的内容的更新时，计算工作主要是在GPU中执行的。与现有的单纯利用Canvas的实现方案相比，可以避免在JavaScript中执行数学运算，在提高运算速率的同时，还可以避免临时对象的产生，而导致的对象回收耗时问题。
利用OpenGL完成电子白板上所呈现的内容的更新的实现过程如下。
首先可以确定OpenGL的绘制顶点。此处可以基于绘制路径(Path2D)中的线宽(Linewidth)以及点坐标(points)，按照画线算法确定OpenGL的绘制顶点(vertex)。此处获取的绘制顶点是基于手势操作执行前Path2D中的对象确定的。其中，所确定的绘制顶点可以包括顶点位置、顶点间的连线关系、线宽等信息。
在得到绘制顶点后，还需要基于修改后的Canvas转换矩阵，对绘制顶点进行更新。然后可以使用更新后的绘制顶点在电子白板上进行绘制，以在电子白板上呈现与手势操作对应的内容。其中，可以由GPU执行对绘制顶点进行更新的操作。并且，还可以由GPU使用更新后的绘制顶点在电子白板上进行绘制，以完成电子白板上所呈现的内容的更新。
作为本公开的一个示例，还可以在绘制路径(Path2D)中保存更新后的绘制顶点，在电子白板上实现下一帧的内容的更新时，可以使用上一帧所保存的绘制顶点进行计算。由此，不需要每次都按照画线算法生成OpenGL绘制顶点，可以减少计算量。作为示例，可以每次将绘制顶点使用OpenGL缓存机制缓存，减少每次绘制上传到GPU的数据量。
另外，响应于用户针对电子白板执行的手势操作结束，还可以对绘制路径(Path2D)中的线宽以及点坐标进行更新。由此，在手势操作结束后，可以基于绘制路径(Path2D)中的线宽以及点坐标实现电子白板上要呈现的内容的绘制。
图2是示出了本公开一具体实施例的实现方法的示意性流程图。
参见图2，响应于收到手势操作事件(步骤S210)，可以执行步骤S220，判断手势类型。
(1)缩放手势
在判定结果为缩放手势的情况下(步骤S231)，可以执行步骤S232，修改Canvas转换矩阵的缩放因子。然后可以执行步骤S260，使用当前Canvas转换矩阵绘制顶点。此处主要是基于当前Canvas转换矩阵(即修改缩放因子后的转换矩阵)对之前确定的绘制顶点进行更新，以便基于更新后的绘制顶点进行绘制，从而实现对电子白板上所呈现的内容的更新。其中，之前确定的绘制顶点可以是基于Path2D中的点坐标和线宽确定的绘制顶点，也可以是Path2D中所保存的更新后的绘制顶点。
例如，在步骤S210中的手势事件为用户首次做出的情况下，在执行步骤S260时，可以首先基于Path2D中的点坐标和线宽，确定绘制顶点。然后基于当前Canvas转换矩阵，对所确定的绘制顶点进行更新。基于更新后的绘制顶点，可以绘制缩放手势对应的操作结果。
再例如，在步骤S210中的手势事件不是用户首次做出的情况下，在执行步骤S260，可以使用当前Canvas转换矩阵，对基于Path2D中保存的绘制顶点进行更新。然后，可以基于更新后的绘制顶点，绘制缩放手势对应的操作结果。
(2)移动手势
在判定结果为移动(例如平移)手势的情况下(步骤S241)，可以执行步骤S242，修改Canvas转换矩阵的平移因子。然后可以执行步骤S260，使用当前Canvas转换矩阵绘制顶点。此处主要是基于当前Canvas转换矩阵(即修改缩放因子后的转换矩阵)对之前确定的绘制顶点进行更新，以便基于更新的绘制顶点绘制图像，以对电子白板上所呈现的内容进行更新。其中，之前确定的绘制顶点可以是基于Path2D中的点坐标和线宽确定的绘制顶点，也可以是Path2D中所保存的更新后的绘制顶点。此处不再赘述。
(3)手势结束
在判定结果为手势结束的情况下(步骤S251)，可以执行步骤S252，更新Path2D对象。此处，可以对Path2D对象中的点坐标和线宽进行更新。并且，还可以按照画线算法更新绘制顶点。
然后可以执行步骤S253，重置Canvas转换矩阵的变换因子。
在步骤S260，可以将重置后的Canvas转换矩阵作为当前Canvas转换矩阵。可以使用当前Canvas转换矩阵绘制Path2D内保存的绘制顶点。
综上，本公开使用浏览器Path2D对象结合CanvasRenderingContext2D对象进行绘制。其中，本公开将touch的point(点)坐标属性、lineWidth(线宽)属性加入Path2D对象的原生支持属性，以便生成绘制顶点。并且，将Path2D对象的API调用所产生的OpenGL绘制顶点(即更新后的绘制顶点)保存在Path2D对象中，以减少计算量。由此，对于缩放、平移等手势操作，本公开通过修改当前的转换矩阵，将修改后的转换矩阵传给OpenGL，结合生成的绘制顶点或保存的绘制顶点，即可进行绘制。并且，计算过程和绘制过程都可以由GPU实现，从而可以降低操作延时。
图3示出了执行前后的效果示意图。
参见图3，作为示例，本公开的电子白板在逻辑上可以分为三层。分别是前景层(可以称为“Foreground Html”)、画布层(即Canvas)以及背景层(可以称为“BackgroundHtml”)。前景层主要为用户提供可供用户操作的工具栏，例如可以显示可供用户操作的工具栏。背景层主要为用户提供背景设置服务，在Background Html层，用户可以通过html添加电子白板的背景。画布层主要用于实现内容的绘制，并将绘制结果呈现在电子白板的屏幕上。
如图3所示，画布层中的Path2D对象可以包括点坐标(points)属性、线宽(LineWidth)属性以及绘制顶点(vertex)。在画布上实现缩放和/或移动等手势操作对应的内容的更新后，Path2D对象中的点坐标(points)属性、线宽(LineWidth)属性以及绘制顶点(vertex)也得到了更新。
【实现装置】
图4是示出了根据本公开一实施例的电子白板实现装置的结构的示意性方框图。其中，电子白板实现装置的功能模块可以由实现本发明原理的硬件、软件或硬件和软件的结合来实现。本领域技术人员可以理解的是，图4所描述的功能模块可以组合起来或者划分成子模块，从而实现上述发明的原理。因此，本文的描述可以支持对本文描述的功能模块的任何可能的组合、或者划分、或者更进一步的限定。
下面就电子白板实现装置可以具有的功能模块以及各功能模块可以执行的操作做简要说明，对于其中涉及的细节部分可以参见上文描述，这里不再赘述。
参见图4，实现装置300可以包括修改模块310和第一更新模块320。
修改模块310用于响应于用户针对电子白板执行的手势操作，修改Canvas转换矩阵的变换因子，手势操作用于变换电子白板上呈现的内容的呈现方式。其中，手势操作包括缩放手势操作和/或平移手势操作，并且变换因子包括缩放因子和/或者平移因子。
第一更新模块320用于基于修改后的Canvas转换矩阵，利用OpenGL完成电子白板上所呈现的内容的更新。
如图4所示，第一更新模块320可以可选地包括图中虚线框所示的顶点确定模块321和第一绘制模块322。
顶点确定模块321用于确定OpenGL的绘制顶点。其中，顶点确定模块321可以基于绘制路径中的线宽以及点坐标，按照画线算法确定OpenGL的绘制顶点。第一绘制模块322用于基于绘制顶点和修改后的Canvas转换矩阵，利用OpenGL在电子白板上进行绘制。
如图4所示，第一绘制模块322可以可选地包括图中虚线框所示的第二更新模块3221和第二绘制模块3222。
第二更新模块3221用于基于修改后的Canvas转换矩阵，对绘制顶点进行更新。第二绘制模块3222用于使用更新后的绘制顶点在电子白板上进行绘制。第二更新模块通过GPU对绘制顶点进行更新，并且，第二绘制模块通过GPU基于更新后的绘制顶点在电子白板上进行绘制。
如图4所示，实现装置300可以可选地包括图中虚线框所示的保存模块330。保存模块330用于在绘制路径中保存更新后的绘制顶点。
如图4所示，实现装置300可以可选地包括图中虚线框所示的第三更新模块340。第三更新模块340用于响应于手势操作结束，对绘制路径中的线宽以及点坐标进行更新。
图5是示出了根据本公开另一实施例的实现装置的结构的示意性方框图。其中，实现装置的功能模块可以由实现本发明原理的硬件、软件或硬件和软件的结合来实现。本领域技术人员可以理解的是，图5所描述的功能模块可以组合起来或者划分成子模块，从而实现上述发明的原理。因此，本文的描述可以支持对本文描述的功能模块的任何可能的组合、或者划分、或者更进一步的限定。
下面就实现装置可以具有的功能模块以及各功能模块可以执行的操作做简要说明，对于其中涉及的细节部分可以参见上文描述，这里不再赘述。
参见图5，实现装置400包括呈现模块410、修改模块420以及更新模块430。呈现模块410用于使用第一图形处理工具呈现电子白板的显示内容。修改模块420用于响应于用户针对电子白板执行的手势操作，修改第一图形处理工具的转换矩阵的变换因子，手势操作用于变换电子白板上呈现的内容的呈现方式。更新模块430用于基于修改后的转换矩阵，利用第二图形处理工具完成电子白板上要呈现的内容的更新。
需要说明的是，在用户未针对电子白板执行手势操作的情况下，电子白板上的内容的呈现可以由第一图形处理工具实现，也可以由第一图形处理工具和第二图形处理工具协同实现。对此，本公开不做限定。
本公开主要是对于用户针对电子白板执行手势操作的情况下，如何实现手势操作对应的操作结果在电子白板上的快速呈现，提出的一种解决方案。其中，关于第一图形处理工具和第二图形处理工具的描述可以参见上文相关说明，此处不再赘述。
【计算设备】
图6示出了根据本发明一实施例可用于实现上述电子白板实现方法的数据处理的计算设备的结构示意图。
参见图6，计算设备1000包括存储器1010和处理器1020。
处理器1020可以是一个多核的处理器，也可以包含多个处理器。在一些实施例中，处理器1020可以包含一个通用的主处理器以及一个或多个特殊的协处理器，例如图形处理器(GPU)、数字信号处理器(DSP)等等。在一些实施例中，处理器1020可以使用定制的电路实现，例如特定用途集成电路(ASIC，Application Specific Integrated Circuit)或者现场可编程逻辑门阵列(FPGA，Field Programmable Gate Arrays)。
存储器1010可以包括各种类型的存储单元，例如***内存、只读存储器(ROM)，和永久存储装置。其中，ROM可以存储处理器1020或者计算机的其他模块需要的静态数据或者指令。永久存储装置可以是可读写的存储装置。永久存储装置可以是即使计算机断电后也不会失去存储的指令和数据的非易失性存储设备。在一些实施方式中，永久性存储装置采用大容量存储装置(例如磁或光盘、闪存)作为永久存储装置。另外一些实施方式中，永久性存储装置可以是可移除的存储设备(例如软盘、光驱)。***内存可以是可读写存储设备或者易失性可读写存储设备，例如动态随机访问内存。***内存可以存储一些或者所有处理器在运行时需要的指令和数据。此外，存储器1010可以包括任意计算机可读存储媒介的组合，包括各种类型的半导体存储芯片(DRAM，SRAM，SDRAM，闪存，可编程只读存储器)，磁盘和/或光盘也可以采用。在一些实施方式中，存储器1010可以包括可读和/或写的可移除的存储设备，例如激光唱片(CD)、只读数字多功能光盘(例如DVD-ROM，双层DVD-ROM)、只读蓝光光盘、超密度光盘、闪存卡(例如SD卡、min SD卡、Micro-SD卡等等)、磁性软盘等等。计算机可读存储媒介不包含载波和通过无线或有线传输的瞬间电子信号。
存储器1010上存储有可处理代码，当可处理代码被处理器1020处理时，可以使处理器1020执行上文述及的电子白板实现方法。
上文中已经参考附图详细描述了根据本发明的电子白板实现方法、装置以及设备。
此外，根据本发明的方法还可以实现为一种计算机程序或计算机程序产品，该计算机程序或计算机程序产品包括用于执行本发明的上述方法中限定的上述各步骤的计算机程序代码指令。
或者，本发明还可以实施为一种非暂时性机器可读存储介质(或计算机可读存储介质、或机器可读存储介质)，其上存储有可执行代码(或计算机程序、或计算机指令代码)，当所述可执行代码(或计算机程序、或计算机指令代码)被电子设备(或计算设备、服务器等)的处理器执行时，使所述处理器执行根据本发明的上述方法的各个步骤。
本领域技术人员还将明白的是，结合这里的公开所描述的各种示例性逻辑块、模块、电路和算法步骤可以被实现为电子硬件、计算机软件或两者的组合。
附图中的流程图和框图显示了根据本发明的多个实施例的***和方法的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分，所述模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标记的功能也可以以不同于附图中所标记的顺序发生。例如，两个连续的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的***来实现，或者可以用专用硬件与计算机指令的组合来实现。
以上已经描述了本发明的各实施例，上述说明是示例性的，并非穷尽性的，并且也不限于所披露的各实施例。在不偏离所说明的各实施例的范围和精神的情况下，对于本技术领域的普通技术人员来说许多修改和变更都是显而易见的。本文中所用术语的选择，旨在最好地解释各实施例的原理、实际应用或对市场中的技术的改进，或者使本技术领域的其它普通技术人员能理解本文披露的各实施例。
Claims (20)
1.一种基于Canvas的电子白板实现方法，其特征在于，包括：
响应于用户针对所述电子白板执行的手势操作，修改Canvas转换矩阵的变换因子，所述手势操作用于变换所述电子白板上呈现的内容的呈现方式；以及
基于修改后的Canvas转换矩阵，利用OpenGL完成所述电子白板上所呈现的内容的更新。
2.根据权利要求1所述的电子白板实现方法，其特征在于，
所述手势操作包括缩放手势操作和/或平移手势操作，并且
所述变换因子包括缩放因子和/或者平移因子。
3.根据权利要求1所述的电子白板实现方法，其特征在于，所述利用OpenGL完成所述电子白板上所显示的图形的更新的步骤包括：
确定OpenGL的绘制顶点；以及
基于所述绘制顶点和所述修改后的Canvas转换矩阵，利用OpenGL在所述电子白板上进行绘制。
4.根据权利要求3所述的电子白板实现方法，其特征在于，所述确定OpenGL的绘制顶点的步骤包括：
基于绘制路径中的线宽以及点坐标，按照画线算法确定OpenGL的绘制顶点。
5.根据权利要求3所述的电子白板实现方法，其特征在于，所述利用OpenGL在所述电子白板上进行绘制的步骤包括：
基于所述修改后的Canvas转换矩阵，对所述绘制顶点进行更新；以及
使用更新后的绘制顶点在所述电子白板上进行绘制。
6.根据权利要求5所述的电子白板实现方法，其特征在于，
由GPU执行对所述绘制顶点进行更新的操作，并且/或者，
由GPU使用更新后的绘制顶点在所述电子白板上进行绘制。
7.根据权利要求5所述的电子白板实现方法，其特征在于，还包括：
在所述绘制路径中保存所述更新后的绘制顶点。
8.根据权利要求4所述的电子白板实现方法，其特征在于，还包括：
响应于所述手势操作结束，对所述绘制路径中的线宽以及点坐标进行更新。
9.一种电子白板实现方法，其特征在于，包括：
使用第一图形处理工具呈现所述电子白板的显示内容；
响应于用户针对所述电子白板执行的手势操作，修改第一图形处理工具的转换矩阵的变换因子，所述手势操作用于变换所述电子白板上呈现的内容的呈现方式；以及
基于修改后的转换矩阵，利用第二图形处理工具完成所述电子白板上要呈现的内容的更新。
10.一种基于Canvas的电子白板实现装置，其特征在于，包括：
修改模块，用于响应于用户针对所述电子白板执行的手势操作，修改Canvas转换矩阵的变换因子，所述手势操作用于变换所述电子白板上呈现的内容的呈现方式；以及
第一更新模块，用于基于修改后的Canvas转换矩阵，利用OpenGL完成所述电子白板上所呈现的内容的更新。
11.根据权利要求10所述的电子白板实现装置，其特征在于，
所述手势操作包括缩放手势操作和/或平移手势操作，并且
所述变换因子包括缩放因子和/或者平移因子。
12.根据权利要求10所述的电子白板实现装置，其特征在于，所述第一更新模块包括：
顶点确定模块，用于确定OpenGL的绘制顶点；以及
第一绘制模块，用于基于所述绘制顶点和所述修改后的Canvas转换矩阵，利用OpenGL在所述电子白板上进行绘制。
13.根据权利要求12所述的电子白板实现装置，其特征在于，
所述顶点确定模块基于绘制路径中的线宽以及点坐标，按照画线算法确定OpenGL的绘制顶点。
14.根据权利要求12所述的电子白板实现装置，其特征在于，所述第一绘制模块包括：
第二更新模块，用于基于所述修改后的Canvas转换矩阵，对所述绘制顶点进行更新；以及
第二绘制模块，用于使用更新后的绘制顶点在所述电子白板上进行绘制。
15.根据权利要求14所述的电子白板实现装置，其特征在于，
所述第二更新模块通过GPU对所述绘制顶点进行更新，并且/或者
所述第二绘制模块通过GPU基于更新后的绘制顶点在所述电子白板上进行绘制。
16.根据权利要求13所述的电子白板实现装置，其特征在于，还包括：
保存模块，用于在所述绘制路径中保存所述更新后的绘制顶点。
17.根据权利要求13所述的电子白板实现装置，其特征在于，还包括：
第三更新模块，用于响应于手势操作结束，对所述绘制路径中的线宽以及点坐标进行更新。
18.一种电子白板实现装置，其特征在于，包括：
呈现模块，用于使用第一图形处理工具呈现所述电子白板的显示内容；
修改模块，用于响应于用户针对所述电子白板执行的手势操作，修改第一图形处理工具的转换矩阵的变换因子，所述手势操作用于变换所述电子白板上呈现的内容的呈现方式；以及
更新模块，用于基于修改后的转换矩阵，利用第二图形处理工具完成所述电子白板上要呈现的内容的更新。
19.一种计算设备，包括：
处理器；以及
存储器，其上存储有可执行代码，当所述可执行代码被所述处理器执行时，使所述处理器执行如权利要求1-9中任何一项所述的方法。
20.一种非暂时性机器可读存储介质，其上存储有可执行代码，当所述可执行代码被电子设备的处理器执行时，使所述处理器执行如权利要求1至9中任一项所述的方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810240020.4A CN110297568A (zh) | 2018-03-22 | 2018-03-22 | 电子白板实现方法、装置、设备以及存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810240020.4A CN110297568A (zh) | 2018-03-22 | 2018-03-22 | 电子白板实现方法、装置、设备以及存储介质 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN110297568A true CN110297568A (zh) | 2019-10-01 |
Family
ID=68025528
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201810240020.4A Pending CN110297568A (zh) | 2018-03-22 | 2018-03-22 | 电子白板实现方法、装置、设备以及存储介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN110297568A (zh) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111798379A (zh) * | 2020-07-20 | 2020-10-20 | 广州炫视智能科技有限公司 | 实现图形高速预览的方法及*** |
Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102681853A (zh) * | 2012-05-17 | 2012-09-19 | 中科方德软件有限公司 | 一种利用OpenGL ES实现安卓操作***桌面3D转屏的方法及装置 |
| CN103336816A (zh) * | 2013-06-28 | 2013-10-02 | 广州市动景计算机科技有限公司 | 安卓***上基于GPU实现的Canvas元素渲染方法及装置 |
| US20140300643A1 (en) * | 2011-11-30 | 2014-10-09 | Adobe Systems Incorporated | Resolution independent client side rendering |
| CN105068727A (zh) * | 2015-08-18 | 2015-11-18 | 百度在线网络技术（北京）有限公司 | 一种绘图工具的实现方法和装置 |
| CN105745608A (zh) * | 2013-11-19 | 2016-07-06 | 株式会社和冠 | 用于墨水数据生成、墨水数据呈现、墨水数据操纵以及墨水数据通信的方法和*** |
| CN105787871A (zh) * | 2016-03-24 | 2016-07-20 | 广州酷狗计算机科技有限公司 | 图片合成方法及装置 |
| WO2016176206A1 (en) * | 2015-04-26 | 2016-11-03 | Intel Corporation | Integrated android and windows device |
-
2018
- 2018-03-22 CN CN201810240020.4A patent/CN110297568A/zh active Pending
Patent Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20140300643A1 (en) * | 2011-11-30 | 2014-10-09 | Adobe Systems Incorporated | Resolution independent client side rendering |
| CN102681853A (zh) * | 2012-05-17 | 2012-09-19 | 中科方德软件有限公司 | 一种利用OpenGL ES实现安卓操作***桌面3D转屏的方法及装置 |
| CN103336816A (zh) * | 2013-06-28 | 2013-10-02 | 广州市动景计算机科技有限公司 | 安卓***上基于GPU实现的Canvas元素渲染方法及装置 |
| CN105745608A (zh) * | 2013-11-19 | 2016-07-06 | 株式会社和冠 | 用于墨水数据生成、墨水数据呈现、墨水数据操纵以及墨水数据通信的方法和*** |
| WO2016176206A1 (en) * | 2015-04-26 | 2016-11-03 | Intel Corporation | Integrated android and windows device |
| CN105068727A (zh) * | 2015-08-18 | 2015-11-18 | 百度在线网络技术（北京）有限公司 | 一种绘图工具的实现方法和装置 |
| CN105787871A (zh) * | 2016-03-24 | 2016-07-20 | 广州酷狗计算机科技有限公司 | 图片合成方法及装置 |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111798379A (zh) * | 2020-07-20 | 2020-10-20 | 广州炫视智能科技有限公司 | 实现图形高速预览的方法及*** |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US10733691B2 (en) | Fragment shaders perform vertex shader computations | |
| KR102046616B1 (ko) | 오브젝트 및/또는 프리미티브 식별자들을 추적하는 것에 의한 그래픽스 프로세싱 강화 | |
| US20220392144A1 (en) | Image rendering method and apparatus, electronic device, and storage medium | |
| CN110084875B (zh) | 使用计算着色器作为顶点着色器的前端 | |
| CN104183005B (zh) | 图形处理单元和基于图块的渲染方法 | |
| CN109448137B (zh) | 交互方法、交互装置、电子设备及存储介质 | |
| CN110544290A (zh) | 数据渲染方法及装置 | |
| US9275493B2 (en) | Rendering vector maps in a geographic information system | |
| US20140362100A1 (en) | Scheme for compressing vertex shader output parameters | |
| RU2427918C2 (ru) | Метафора двумерного редактирования для трехмерной графики | |
| KR102381945B1 (ko) | 그래픽 프로세싱 장치 및 그래픽 프로세싱 장치에서 그래픽스 파이프라인을 수행하는 방법 | |
| US8917281B2 (en) | Image rendering method and system | |
| US20140071124A1 (en) | Image processing apparatus | |
| RU2422902C2 (ru) | Двумерная/трехмерная комбинированная визуализация | |
| US9858708B2 (en) | Convex polygon clipping during rendering | |
| KR102128028B1 (ko) | 비순차적 픽셀 셰이더 익스포트 | |
| RU2680355C1 (ru) | Способ и система удаления невидимых поверхностей трёхмерной сцены | |
| US9898842B2 (en) | Method and system for generating data-efficient 2D plots | |
| CN111091620B (zh) | 基于图形学的地图动态路网处理方法及***、计算机设备 | |
| GB2524047A (en) | Improvements in and relating to rendering of graphics on a display device | |
| CN109598672B (zh) | 一种地图道路渲染方法及装置 | |
| CN110297568A (zh) | 电子白板实现方法、装置、设备以及存储介质 | |
| EP2728551B1 (en) | Image rendering method and system | |
| CN112907436A (zh) | 基于OpenGL的线型绘制方法、***及介质 | |
| JP2014219739A (ja) | 空間を分割してグラフィックスを処理する画像処理装置及び画像処理方法 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| TA01 | Transfer of patent application right |
Effective date of registration: 20201123 Address after: Room 603, 6 / F, Roche Plaza, 788 Cheung Sha Wan Road, Kowloon, China Applicant after: Zebra smart travel network (Hong Kong) Ltd. Address before: A four-storey 847 mailbox in Grand Cayman Capital Building, British Cayman Islands Applicant before: Alibaba Group Holding Ltd. |
|
| TA01 | Transfer of patent application right | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20191001 |