CN110727383B - 基于小程序的触控交互方法、装置、电子设备与存储介质 - Google Patents

基于小程序的触控交互方法、装置、电子设备与存储介质 Download PDF

Info

Publication number
CN110727383B
CN110727383B CN201910882703.4A CN201910882703A CN110727383B CN 110727383 B CN110727383 B CN 110727383B CN 201910882703 A CN201910882703 A CN 201910882703A CN 110727383 B CN110727383 B CN 110727383B
Authority
CN
China
Prior art keywords
graph
touch
user
drawing component
applet
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.)
Active
Application number
CN201910882703.4A
Other languages
English (en)
Other versions
CN110727383A (zh
Inventor
邬一平
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Beijing Baidu Netcom Science and Technology Co Ltd
Original Assignee
Beijing Baidu Netcom Science and Technology Co Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Beijing Baidu Netcom Science and Technology Co Ltd filed Critical Beijing Baidu Netcom Science and Technology Co Ltd
Priority to CN201910882703.4A priority Critical patent/CN110727383B/zh
Publication of CN110727383A publication Critical patent/CN110727383A/zh
Application granted granted Critical
Publication of CN110727383B publication Critical patent/CN110727383B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

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/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • 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/017—Gesture based interaction, e.g. based on a set of recognized hand gestures
    • 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/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G06F3/04817—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance using icons
    • 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/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/04842—Selection of displayed objects or displayed text elements
    • 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
    • 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

本申请公开了基于小程序的触控交互方法、装置、电子设备与存储介质，涉及小程序应用技术领域。具体实现方案为：若检测到用户触控嵌入在其他应用客户端的小程序的显示界面时，获取所述用户在所述小程序的显示界面上执行的触控位置；基于所述触控位置、预先获取到的所述小程序的显示界面中画图组件的位置以及所述画图组件绘制的各图形的顶点，检测所述用户的触控是否落入所述画图组件绘制的至少一个图形内；若是，基于所述至少一个图形中的目标图形、所述用户触控的手势信息和预设的交互配置，进行交互响应。本申请通过采用上述技术方案，能够弥补现有技术的不足，支持小程序的触控交互，丰富小程序的使用功能。

Description

基于小程序的触控交互方法、装置、电子设备与存储介质
技术领域
本申请涉及计算机技术，尤其涉及一种小程序应用技术，具体涉及一种基于小程序的触控交互方法、装置、电子设备与存储介质。
背景技术
小程序是一种运行在移动终端的应用之上的一种轻量级的应用，不需要下载安装，扫码即可使用，使用方式非常方便。例如，现有的即时通讯应用中很多都嵌入有小程序，极大地方便了用户。
现有的小程序中，设置有画图组件，例如通常情况下可以通过Canvas画布来实现。其中Canvas画布提供了一个通过JavaScript和HTML的元素来绘制图形的方式，可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理，如小程序地图相关的渲染就是使用的Canvas画布。但是Canvas本身只有绘制能力，完全没有任何交互，以及动画能力。传统的小程序端所使用的Canvas画布也仅仅是用来展示动画，但是这并没有办法实现用户与小程序的互动，做一些更深层次的交互。因此，亟需提供一种基于小程序的触控交互方案。
发明内容
本申请提供了一种基于小程序的触控交互方法、装置、电子设备与存储介质，用于弥补现有技术的不足，提供基于小程序的触控交互方案。
本申请提供一种基于小程序的触控交互方法，包括：
若检测到用户触控嵌入在其他应用客户端的小程序的显示界面时，获取所述用户在所述小程序的显示界面上执行的触控位置；
基于所述触控位置、预先获取到的所述小程序的显示界面中画图组件的位置以及所述画图组件绘制的各图形的顶点，检测所述用户的触控是否落入所述画图组件绘制的至少一个图形内；
若是，基于所述至少一个图形中的目标图形、所述用户触控的手势信息和预设的交互配置，进行交互响应。
进一步可选地，如上所述的方法中，基于所述触控位置、所述小程序的显示界面中画图组件的位置以及所述画图组件绘制的各图形的顶点，检测所述用户的触控是否落入所述画图组件绘制的至少一个图形内，包括：
基于所述触控位置和所述画图组件的位置，获取所述触控位置相对于所述画图组件的相对位置；
基于所述画图组件绘制的各所述图形的顶点，获取对应的所述图形的边界信息；
根据所述相对位置、各所述图形的顶点以及各所述图形的边界信息，检测所述用户的触控是否落在所述至少一个图形内。
进一步可选地，如上所述的方法中，根据所述相对位置、各所述图形的顶点以及各所述图形的边界信息，检测所述用户的触控是否落在所述至少一个图形内，包括：
对于各所述图形，根据所述相对位置和所述图形的边界信息，分析所述用户的触控是否疑似落在对应的所述图形内；
若是，进一步根据所述相对位置和对应的所述图形的顶点，检测所述用户的触控是否落入对应的所述图形内。
进一步可选地，如上所述的方法中，若检测到所述用户的触控落入所述画图组件绘制的所述至少两个图形内后，基于所述至少一个图形中的目标图形、所述用户触控的手势信息和预设的交互配置，进行交互响应之前，所述方法包括：
根据从所述至少两个图形中各所述图形的层级信息，从所述至少两个图形中获取最上层级的所述图形，作为所述目标图形。
进一步可选地，如上所述的方法中，基于所述至少一个图形中的目标图形、所述用户触控的手势信息和预设的交互配置，进行交互响应之前，所述方法还包括：
基于所述目标图形、触控所述目标图形的手势信息以及所述目标图形基于所述手势信息的响应信息，生成所述预设的交互配置。
本申请还提供了一种基于小程序的触控交互装置，所述装置包括：
获取模块，用于若检测到用户触控嵌入在其他应用客户端的小程序的显示界面时，获取所述用户在所述小程序的显示界面上执行的触控位置；
检测模块，用于基于所述触控位置、预先获取到的所述小程序的显示界面中画图组件的位置以及所述画图组件绘制的各图形的顶点，检测所述用户的触控是否落入所述画图组件绘制的至少一个图形内；
交互模块，用于若检测到所述用户的触控落入所述画图组件绘制的至少一个图形内时，基于所述至少一个图形中的目标图形、所述用户触控的手势信息和预设的交互配置，进行交互响应。
本申请还提供了一种电子设备，包括：
至少一个处理器；以及
与所述至少一个处理器通信连接的存储器；其中，
所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行如上任一项所述的方法。
本申请还提供一种存储有计算机指令的非瞬时计算机可读存储介质，所述计算机指令用于使所述计算机执行如上任一项所述的方法。
上述申请中的一个实施例具有如下优点或有益效果：通过采用上述技术方案，能够弥补现有技术的不足，支持小程序的触控交互，丰富小程序的使用功能。
进一步地，本申请中，通过基于触控位置、小程序的显示界面中画图组件的位置以及画图组件绘制的各图形的顶点，检测用户的触控是否落入画图组件绘制的至少一个图形内，能够非常准确地检测到Canvas组件中的任意图形是否被触控，保证检测的准确性，从而能够保证触控交互的性能。
而且，本申请中，仅需要小程序在一个Canvas组件里渲染所有的图形，而不需要创建大量的外部的View组件或者Canvas组件来辅助，能够极大地利用Canvas组件，而又不耗费过多地小程序的性能，使得小程序中的触控交互实现成本更低，实现性能更好。
再者，本申请所实现的小程序的触控交互，交互能力强，既能做点击交互，也可以用于动画交互，能够大大地提高小程序中的Canvas组件的交互能力。
上述可选方式所具有的其他效果将在下文中结合具体实施例加以说明。
附图说明
附图用于更好地理解本方案，不构成对本申请的限定。其中：
图1是根据本申请第一实施例的示意图；
图2为本申请实施例的一种检测示意图。
图3为本申请实施例提供的一种触控示意图。
图4是根据本申请第二实施例的示意图；
图5是用来实现本申请实施例的基于小程序的触控交互的方法的电子设备的框图。
具体实施方式
以下结合附图对本申请的示范性实施例做出说明，其中包括本申请实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本申请的范围和精神。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。
图1为本申请提供的基于小程序的触控交互方法实施例的流程图。如图1所示，本实施例的基于小程序的触控交互方法，具体可以包括如下步骤：
S101、若用户触控嵌入在其他应用客户端的小程序的显示界面时，获取用户在小程序的显示界面上执行的触控位置；
S102、基于触控位置、预先获取到的小程序的显示界面中画图组件的位置以及画图组件绘制的各图形的顶点，检测用户的触控是否落入画图组件绘制的至少一个图形内；若是，执行步骤S102；否则确定用户的触控未落入画图组件的绘制的任何图形内，小程序不需要与用户进行交互，结束。
S103、基于至少一个图形中的目标图形、用户触控的手势信息和预设的交互配置，进行交互响应。
本实施例的基于小程序的触控交互方法的执行主体可以为本实施例的基于小程序的触控交互装置，该基于小程序的触控交互装置可以设置在小程序中，以实现小程序与用户的触控交互。
本实施例的技术方案应用在小程序中，该小程序具体可以为不用下载，便以直接嵌入在其他应用中的一种快捷的应用，使用方式方便，受到越来越多的用户的青睐，例如，很多的即时通讯应用中都加载有各种各样的小程序，用户直接通过即时通讯应用进入相应的小程序即可，避免下载、安装相应应用的复杂性。
现有的小程序中设置有画图组件Canvas画布，该Canvas画布可以展示一些简单的动画，如根据预先的设置，展示绘制图形的过程或者使得绘制的图形做一些简单的动作等等。但是，当用户在小程序的界面上触控图形时，小程序不能与用户进行任何交互。本实施例中，为了实现小程序与用户基于图形的交互，本实施例中，可以由该基于小程序的触控交互装置实现对用户触控的检测，例如，可以检测到用户触控了小程序的显示界面，而此时是否需要进行交互，还需要进一步检测该用户的触控是否落入画图组件绘制的图形内，若落入，可以认为此时用户在请求交互，需要作出相应的交互响应；而若未落入，可以不做任何响应。
本实施例中，在检测到用户触控了嵌入在其他应用客户端的小程序的显示界面时，首先获取用户在小程序的显示界面上用户执行的触控位置，如可以表示为pageX，pageY。本实施例中，用户的触控可以为单点的触控，如采用一个手指执行的点击，或者一个手指点击后执行的拖拽等动作；用户的触控还可以为多点的触控，如两个手指执行的放大动作，多个手指执行的抓取动作或者打开动作等等。对于多点的触控，需要获取每个点的触控位置。
本实施例中，基于小程序的触控交互装置，还可以预先从小程序记录的画图组件的信息中，获取到小程序的显示界面中画图组件如Canvas画布的位置。实际应用中，小程序中的画图组件可以为矩形，该矩形的长度和宽度为预先设置好的，为了便于标记，本实施例中，可以采用画图组件的左上角的顶点来标识画图组件的位置，由于矩形的长和宽是已知的，根据该画图组件的左上角的顶点，便可以得知该矩形的区域范围。
本实施例中，基于小程序的触控交互装置，还可以预先获取到画图组件绘制的各图形的顶点，无论是规则图形还是不规则图形，画图组件在绘制时，都可以记录绘制的各图形的顶点。因此，可以从预先记录的信息中，获取画图组件绘制的各图形的顶点。
然后，基于触控位置、小程序的显示界面中画图组件的位置以及画图组件绘制的各图形的顶点，检测用户的触控是否落入画图组件绘制的至少一个图形内，例如，实现时，具体可以包括如下步骤：
(a1)基于触控位置和画图组件的位置，获取触控位置相对于画图组件的相对位置；
例如，本实施例中，可以采用触控位置减去画图组件的位置，作为触控位置相对于画图组件的相对位置，实现触控位置和画图组件的位置的关联。
(b1)基于画图组件绘制的各图形的顶点，获取对应的图形的边界信息；
本实施例中，可以为每个图形绘制一个最小的、正好能够包围该图形的矩形，使得该图形的最***的各个顶点正好都落在矩形的边上，此时，可以取该矩形的边界信息作为该图形的边界信息。例如，图形的边界信息可以采用一组参数x1，y1，w和h来表示，其中x1和y1为该矩形左上角的坐标，w为该矩形的宽，h为该矩形的高。
(c1)根据相对位置、各图形的顶点以及各图形的边界信息，检测用户的触控是否落在至少一个图形内。
本实施例的检测用户的触控是否落在至少一个图形内可以包括两步检测：粗检测和细检测。
例如，在粗检测中，对于每一个图形，可以根据相对位置和图形的边界信息，分析用户的触控是否疑似落在对应的图形内；若相对位置落入图形的边界信息所围成的图形内，则认为该用户的触控疑似落入对应的图形内；否则若相对位置未落入图形的边界信息所围成的图形内，则认为该用户的触控未落入对应的图形内。具体检测时，若点击的相对位置表示为x，y，此时可以检测如下关系式是否存在x1<x<x1+w，并且y1<y<y1+h，若存在，则认为相对位置落入图形的边界信息所围成的图形内，否则相对位置未落入图形的边界信息所围成的图形内。
但是，由于图形和图形的边界之间还是存在一定的空隙，对于用户的触控疑似落入对应的图形内时，还需要进一步进行细检测。具体地，可以根据相对位置和对应的图形的顶点，检测用户的触控是否落入对应的图形内。
本实施例中，可以基于如下的数学定律来检测用户的触控是否落入对应的图形中。以相对位置作为判断点，从判断点开始沿着x轴心画一条射线，获取该射线与图形边的交点的数量；若交点个数是奇数，则该判断点在多边形图形的内部，如果交点个数是偶数，则判断点在多边形图形的外面。基于该原理，可以准确检测到判断点是否在图形的内部，进而确定用户的触控是否落入对应的图形内。
例如，可以通过如下代码实现上述数学定律：
图2为本申请实施例的一种检测示意图。如图2所示，以画图组件绘制一个非规则的图形为例，图中O为的判断点，以该判断点为起点，可以分别向左或者向右沿着X轴画射线，图2中以两个方向都画了射线为例，如图2所示，向右的射线与图形有3个交点，向左的射线与图形有5个交点，无论哪个方向的交点数量，都可以确定该触控点落入该图形内。所以，即使对于非规则的图形，无论凸多边形或者凹多边形，仍然可以采用该数学定律实现用户的触控是否落入对应的图形内的检测。
本实施例中，对于画图组件绘制的每一个图形，可以按照上述实施例的方式，检测用户的触控是否落入该图形内。通过基于每一个图形的分析，可以确定用户的触控落入的图形的数量。若用户的触控仅落入一个图形内，此时，该图形为目标图形。而若用户的触控落入至少两个图形内时，此时，由于小程序的显示界面向用户展示的是最上层的图形，可以认为用户在触控最上层的图形，根据从至少两个图形中各图形的层级信息，从至少两个图形中获取最上层级的图形，作为目标图形。
也就是说，实际应用中，画图组件绘制的图形的数量可能是大于1，例如图3为本申请实施例提供的一种触控示意图。如图3所示，在用户的触控场景中，由上到下，最上一层为应用，第二层为小程序，该小程序嵌入在其上一层的应用中。后面的两层可以理解为小程序中的Canvas组件层，在图3所示的示意图中，可以认为该Canvas画布画了两个图形，其中圆形位于上一层，非规则的图形位于下一层。对于该场景，按照上述实施例的方式，由于两个图形不是上下完全重叠的，用户的触控可能仅落入其中一个图形内，也可能同时落入该两个图形内。此时需要根据两个图形的层级，获取最上层的图形作为目标图形。
需要说明的是，在上述实施例的步骤S103基于至少一个图形中的目标图形、用户触控的手势信息和预设的交互配置，进行交互响应之前，还可以包括：基于目标图形、触控目标图形的手势信息以及目标图形基于手势信息的响应信息，生成预设的交互配置。
也就是说，必须先设置交互配置，才能够在有交互需求的时候，基于交互配置做出交互响应。本实施例的交互配置包括目标图形、触控目标图形的手势信息以及目标图形基于手势信息的响应信息；其中目标图形表示基于哪个图形实现交互，触控目标图形的手势信息可以包括点击、放大、拖拽等等各种手势操作，可以预先在交互配置中定义每一种手势信息的操作特性，以在检测到用户的触控时，分析用户的触控属于哪种手势信息。目标图形基于手势信息的响应信息可以基于定义的手势信息做出响应，例如，手势信息为点击时，此时可以突出显示该目标图形；手势信息为放大时，可以放大显示该目标图形；手势信息为缩小时，对应缩小该目标图形；手势信息为拖拽时，对应可以沿着拖拽的方向移动该目标图形；或者本实施例的响应信息还可以为其他动画形式的响应等等。本实施例中，可以基于需求，为各目标图形设置交互配置，在此不再一一举例赘述。
本实施例的基于小程序的触控交互方法，通过采用上述技术方案，能够弥补现有技术的不足，支持小程序的触控交互，丰富小程序的使用功能。
进一步地，本实施例中，通过基于触控位置、小程序的显示界面中画图组件的位置以及画图组件绘制的各图形的顶点，检测用户的触控是否落入画图组件绘制的至少一个图形内，能够非常准确地检测到Canvas组件中的任意图形是否被触控，保证检测的准确性，从而能够保证触控交互的性能。
而且，本实施例中，仅需要小程序在一个Canvas组件里渲染所有的图形，而不需要创建大量的外部的View组件或者Canvas组件来辅助，能够极大地利用Canvas组件，而又不耗费过多地小程序的性能，使得小程序中的触控交互实现成本更低，实现性能更好。
再者，本实施例所实现的小程序的触控交互，交互能力强，既能做点击交互，也可以用于动画交互，能够大大地提高小程序中的Canvas组件的交互能力。
图4为本申请提供的基于小程序的触控交互装置实施例的结构图。如图4所示，本实施例的基于小程序的触控交互装置400，具体可以包括：
获取模块401用于若检测到用户触控嵌入在其他应用客户端的小程序的显示界面时，获取用户在小程序的显示界面上执行的触控位置；
检测模块402用于基于获取模块401获取的触控位置、预先获取到的小程序的显示界面中画图组件的位置以及画图组件绘制的各图形的顶点，检测用户的触控是否落入画图组件绘制的至少一个图形内；
交互模块403用于若检测模块402检测到用户的触控落入画图组件绘制的至少一个图形内时，基于至少一个图形中的目标图形、用户触控的手势信息和预设的交互配置，进行交互响应。
进一步可选地，本实施例的基于小程序的触控交互装置中，检测模块402具体用于：
基于获取模块401获取的触控位置和画图组件的位置，获取触控位置相对于画图组件的相对位置；
基于画图组件绘制的各图形的顶点，获取对应的图形的边界信息；
根据相对位置、各图形的顶点以及各图形的边界信息，检测用户的触控是否落在至少一个图形内。
进一步可选地，本实施例的基于小程序的触控交互装置中，检测模块402
对于各图形，根据相对位置和图形的边界信息，分析用户的触控是否疑似落在对应的图形内；
若是，进一步根据相对位置和对应的图形的顶点，检测用户的触控是否落入对应的图形内。
进一步可选地，本实施例的基于小程序的触控交互装置中，获取模块401还用于：
若检测模块402检测到用户的触控落入画图组件绘制的至少两个图形内时，根据从至少两个图形中各图形的层级信息，从至少两个图形中获取最上层级的图形，作为目标图形。
进一步可选地，本实施例的基于小程序的触控交互装置中，还包括：
生成模块404用于基于目标图形、触控目标图形的手势信息以及目标图形基于手势信息的响应信息，生成预设的交互配置。
对应地，交互模块403用于若检测模块402检测到用户的触控落入画图组件绘制的至少一个图形内时，基于生成模块404生成的目标图形、用户触控的手势信息和预设的交互配置，进行交互响应。
本实施例的基于小程序的触控交互装置，通过采用上述模块实现基于小程序的触控交互的实现原理以及技术效果与上述相关方法实施例相同，详细可以参考上述相关方法实施例的记载，在此不再赘述。
根据本申请的实施例，本申请还提供了一种电子设备和一种可读存储介质。
如图5所示，是根据本申请实施例的基于小程序的触控交互的方法的电子设备的框图。电子设备旨在表示各种形式的数字计算机，诸如，膝上型计算机、台式计算机、工作台、个人数字助理、服务器、刀片式服务器、大型计算机、和其它适合的计算机。电子设备还可以表示各种形式的移动装置，诸如，个人数字处理、蜂窝电话、智能电话、可穿戴设备和其它类似的计算装置。本文所示的部件、它们的连接和关系、以及它们的功能仅仅作为示例，并且不意在限制本文中描述的和/或者要求的本申请的实现。
如图5所示，该电子设备包括：一个或多个处理器501、存储器502，以及用于连接各部件的接口，包括高速接口和低速接口。各个部件利用不同的总线互相连接，并且可以被安装在公共主板上或者根据需要以其它方式安装。处理器可以对在电子设备内执行的指令进行处理，包括存储在存储器中或者存储器上以在外部输入/输出装置(诸如，耦合至接口的显示设备)上显示GUI的图形信息的指令。在其它实施方式中，若需要，可以将多个处理器和/或多条总线与多个存储器和多个存储器一起使用。同样，可以连接多个电子设备，各个设备提供部分必要的操作(例如，作为服务器阵列、一组刀片式服务器、或者多处理器***)。
存储器502即为本申请所提供的非瞬时计算机可读存储介质。其中，所述存储器存储有可由至少一个处理器执行的指令，以使所述至少一个处理器执行本申请所提供的基于小程序的触控交互的方法。本申请的非瞬时计算机可读存储介质存储计算机指令，该计算机指令用于使计算机执行本申请所提供的基于小程序的触控交互的方法。
存储器502作为一种非瞬时计算机可读存储介质，可用于存储非瞬时软件程序、非瞬时计算机可执行程序以及模块，如本申请实施例中的基于小程序的触控交互的方法对应的程序指令/模块(例如，附图4所示的获取模块401、检测模块402、交互模块403和生成模块404)。处理器501通过运行存储在存储器502中的非瞬时软件程序、指令以及模块，从而执行服务器的各种功能应用以及数据处理，即实现上述方法实施例中的基于小程序的触控交互的方法。
存储器502可以包括存储程序区和存储数据区，其中，存储程序区可存储操作***、至少一个功能所需要的应用程序；存储数据区可存储根据基于小程序的触控交互的电子设备的使用所创建的数据等。此外，存储器502可以包括高速随机存取存储器，还可以包括非瞬时存储器，例如至少一个磁盘存储器件、闪存器件、或其他非瞬时固态存储器件。在一些实施例中，存储器502可选包括相对于处理器501远程设置的存储器，这些远程存储器可以通过网络连接至基于小程序的触控交互的电子设备。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。
基于小程序的触控交互的方法的电子设备还可以包括：输入装置503和输出装置504。处理器501、存储器502、输入装置503和输出装置504可以通过总线或者其他方式连接，图5中以通过总线连接为例。
输入装置503可接收输入的数字或字符信息，以及产生与基于小程序的触控交互的电子设备的用户设置以及功能控制有关的键信号输入，例如触摸屏、小键盘、鼠标、轨迹板、触摸板、指示杆、一个或者多个鼠标按钮、轨迹球、操纵杆等输入装置。输出装置504可以包括显示设备、辅助照明装置(例如，LED)和触觉反馈装置(例如，振动电机)等。该显示设备可以包括但不限于，液晶显示器(LCD)、发光二极管(LED)显示器和等离子体显示器。在一些实施方式中，显示设备可以是触摸屏。
此处描述的***和技术的各种实施方式可以在数字电子电路***、集成电路***、专用ASIC(专用集成电路)、计算机硬件、固件、软件、和/或它们的组合中实现。这些各种实施方式可以包括：实施在一个或者多个计算机程序中，该一个或者多个计算机程序可在包括至少一个可编程处理器的可编程***上执行和/或解释，该可编程处理器可以是专用或者通用可编程处理器，可以从存储***、至少一个输入装置、和至少一个输出装置接收数据和指令，并且将数据和指令传输至该存储***、该至少一个输入装置、和该至少一个输出装置。
这些计算程序(也称作程序、软件、软件应用、或者代码)包括可编程处理器的机器指令，并且可以利用高级过程和/或面向对象的编程语言、和/或汇编/机器语言来实施这些计算程序。如本文使用的，术语“机器可读介质”和“计算机可读介质”指的是用于将机器指令和/或数据提供给可编程处理器的任何计算机程序产品、设备、和/或装置(例如，磁盘、光盘、存储器、可编程逻辑装置(PLD))，包括，接收作为机器可读信号的机器指令的机器可读介质。术语“机器可读信号”指的是用于将机器指令和/或数据提供给可编程处理器的任何信号。
为了提供与用户的交互，可以在计算机上实施此处描述的***和技术，该计算机具有：用于向用户显示信息的显示装置(例如，CRT(阴极射线管)或者LCD(液晶显示器)监视器)；以及键盘和指向装置(例如，鼠标或者轨迹球)，用户可以通过该键盘和该指向装置来将输入提供给计算机。其它种类的装置还可以用于提供与用户的交互；例如，提供给用户的反馈可以是任何形式的传感反馈(例如，视觉反馈、听觉反馈、或者触觉反馈)；并且可以用任何形式(包括声输入、语音输入或者、触觉输入)来接收来自用户的输入。
可以将此处描述的***和技术实施在包括后台部件的计算***(例如，作为数据服务器)、或者包括中间件部件的计算***(例如，应用服务器)、或者包括前端部件的计算***(例如，具有图形用户界面或者网络浏览器的用户计算机，用户可以通过该图形用户界面或者该网络浏览器来与此处描述的***和技术的实施方式交互)、或者包括这种后台部件、中间件部件、或者前端部件的任何组合的计算***中。可以通过任何形式或者介质的数字数据通信(例如，通信网络)来将***的部件相互连接。通信网络的示例包括：局域网(LAN)、广域网(WAN)和互联网。
计算机***可以包括客户端和服务器。客户端和服务器一般远离彼此并且通常通过通信网络进行交互。通过在相应的计算机上运行并且彼此具有客户端-服务器关系的计算机程序来产生客户端和服务器的关系。
根据本申请实施例的技术方案，通过采用上述技术方案，能够弥补现有技术的不足，支持小程序的触控交互，丰富小程序的使用功能。
进一步地，本实施例中，通过基于触控位置、小程序的显示界面中画图组件的位置以及画图组件绘制的各图形的顶点，检测用户的触控是否落入画图组件绘制的至少一个图形内，能够非常准确地检测到Canvas组件中的任意图形是否被触控，保证检测的准确性，从而能够保证触控交互的性能。
而且，本实施例中，仅需要小程序在一个Canvas组件里渲染所有的图形，而不需要创建大量的外部的View组件或者Canvas组件来辅助，能够极大地利用Canvas组件，而又不耗费过多地小程序的性能，使得小程序中的触控交互实现成本更低，实现性能更好。
再者，本实施例所实现的小程序的触控交互，交互能力强，既能做点击交互，也可以用于动画交互，能够大大地提高小程序中的Canvas组件的交互能力。
应该理解，可以使用上面所示的各种形式的流程，重新排序、增加或删除步骤。例如，本发申请中记载的各步骤可以并行地执行也可以顺序地执行也可以不同的次序执行，只要能够实现本申请公开的技术方案所期望的结果，本文在此不进行限制。
上述具体实施方式，并不构成对本申请保护范围的限制。本领域技术人员应该明白的是，根据设计要求和其他因素，可以进行各种修改、组合、子组合和替代。任何在本申请的精神和原则之内所作的修改、等同替换和改进等，均应包含在本申请保护范围之内。

Claims (10)

1.一种基于小程序的触控交互方法，其特征在于，所述方法包括：
若检测到用户触控嵌入在其他应用客户端的小程序的显示界面时，获取所述用户在所述小程序的显示界面上执行的触控位置；
基于所述触控位置、预先获取到的所述小程序的显示界面中画图组件的位置以及所述画图组件绘制的各图形的顶点，检测所述用户的触控是否落入所述画图组件绘制的至少一个图形内；
若是，基于所述至少一个图形中的目标图形、所述用户触控的手势信息和预设的交互配置，进行交互响应；
基于所述触控位置、所述小程序的显示界面中画图组件的位置以及所述画图组件绘制的各图形的顶点，检测所述用户的触控是否落入所述画图组件绘制的至少一个图形内，包括：
基于所述触控位置和所述画图组件的位置，获取所述触控位置相对于所述画图组件的相对位置；
基于所述画图组件绘制的各所述图形的顶点，获取对应的所述图形的边界信息，包括：为每个所述图形绘制一个最小的、正好能够包围该图形的矩形，使得该图形的最***的各个顶点正好都落在矩形的边上；取该矩形的边界信息作为所述图形的边界信息；
根据所述相对位置、各所述图形的顶点以及各所述图形的边界信息，检测所述用户的触控是否落在所述至少一个图形内，包括两步检测：粗检测和细检测；
在粗检测中，对于每一个所述图形，根据所述相对位置和所述图形的边界信息，分析所述用户的触控是否疑似落在对应的图形内；
在细检测中，对于每一个所述图形，根据所述相对位置和对应的所述图形的顶点，检测所述用户的触控是否落入对应的图形内。
2.根据权利要求1所述的方法，其特征在于，根据所述相对位置、各所述图形的顶点以及各所述图形的边界信息，检测所述用户的触控是否落在所述至少一个图形内，包括：
对于各所述图形，根据所述相对位置和所述图形的边界信息，分析所述用户的触控是否疑似落在对应的所述图形内；
若是，进一步根据所述相对位置和对应的所述图形的顶点，检测所述用户的触控是否落入对应的所述图形内。
3.根据权利要求1所述的方法，其特征在于，若检测到所述用户的触控落入所述画图组件绘制的所述至少两个图形内后，基于所述至少一个图形中的目标图形、所述用户触控的手势信息和预设的交互配置，进行交互响应之前，所述方法包括：
根据从所述至少两个图形中各所述图形的层级信息，从所述至少两个图形中获取最上层级的所述图形，作为所述目标图形。
4.根据权利要求1-3任一所述的方法，其特征在于，基于所述至少一个图形中的目标图形、所述用户触控的手势信息和预设的交互配置，进行交互响应之前，所述方法还包括：
基于所述目标图形、触控所述目标图形的手势信息以及所述目标图形基于所述手势信息的响应信息，生成所述预设的交互配置。
5.一种基于小程序的触控交互装置，其特征在于，所述装置包括：
获取模块，用于若检测到用户触控嵌入在其他应用客户端的小程序的显示界面时，获取所述用户在所述小程序的显示界面上执行的触控位置；
检测模块，用于基于所述触控位置、预先获取到的所述小程序的显示界面中画图组件的位置以及所述画图组件绘制的各图形的顶点，检测所述用户的触控是否落入所述画图组件绘制的至少一个图形内；
交互模块，用于若检测到所述用户的触控落入所述画图组件绘制的至少一个图形内时，基于所述至少一个图形中的目标图形、所述用户触控的手势信息和预设的交互配置，进行交互响应；
所述检测模块，用于：
基于所述触控位置和所述画图组件的位置，获取所述触控位置相对于所述画图组件的相对位置；
基于所述画图组件绘制的各所述图形的顶点，获取对应的所述图形的边界信息，包括：为每个所述图形绘制一个最小的、正好能够包围该图形的矩形，使得该图形的最***的各个顶点正好都落在矩形的边上；取该矩形的边界信息作为所述图形的边界信息；
根据所述相对位置、各所述图形的顶点以及各所述图形的边界信息，检测所述用户的触控是否落在所述至少一个图形内，包括两步检测：粗检测和细检测；
在粗检测中，对于每一个所述图形，根据所述相对位置和所述图形的边界信息，分析所述用户的触控是否疑似落在对应的图形内；
在细检测中，对于每一个所述图形，根据所述相对位置和对应的所述图形的顶点，检测所述用户的触控是否落入对应的图形内。
6.根据权利要求5所述的装置，其特征在于，所述检测模块，用于：
对于各所述图形，根据所述相对位置和所述图形的边界信息，分析所述用户的触控是否疑似落在对应的所述图形内；
若是，进一步根据所述相对位置和对应的所述图形的顶点，检测所述用户的触控是否落入对应的所述图形内。
7.根据权利要求5所述的装置，其特征在于，所述获取模块，还用于：
检测到所述用户的触控落入所述画图组件绘制的所述至少两个图形内时，根据从所述至少两个图形中各所述图形的层级信息，从所述至少两个图形中获取最上层级的所述图形，作为所述目标图形。
8.根据权利要求5-7任一所述的装置，其特征在于，所述装置还包括：
生成模块，用于基于所述目标图形、触控所述目标图形的手势信息以及所述目标图形基于所述手势信息的响应信息，生成所述预设的交互配置。
9.一种电子设备，其特征在于，包括：
至少一个处理器；以及
与所述至少一个处理器通信连接的存储器；其中，
所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行权利要求1-4中任一项所述的方法。
10.一种存储有计算机指令的非瞬时计算机可读存储介质，其特征在于，所述计算机指令用于使所述计算机执行权利要求1-4中任一项所述的方法。
CN201910882703.4A 2019-09-18 2019-09-18 基于小程序的触控交互方法、装置、电子设备与存储介质 Active CN110727383B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201910882703.4A CN110727383B (zh) 2019-09-18 2019-09-18 基于小程序的触控交互方法、装置、电子设备与存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201910882703.4A CN110727383B (zh) 2019-09-18 2019-09-18 基于小程序的触控交互方法、装置、电子设备与存储介质

Publications (2)

Publication Number Publication Date
CN110727383A CN110727383A (zh) 2020-01-24
CN110727383B true CN110727383B (zh) 2024-05-28

Family

ID=69219164

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201910882703.4A Active CN110727383B (zh) 2019-09-18 2019-09-18 基于小程序的触控交互方法、装置、电子设备与存储介质

Country Status (1)

Country Link
CN (1) CN110727383B (zh)

Families Citing this family (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111524210A (zh) * 2020-04-10 2020-08-11 北京百度网讯科技有限公司 用于生成绘图的方法和装置
CN111857488B (zh) * 2020-06-30 2022-06-28 北京百度网讯科技有限公司 小程序中菜单弹出的方法、装置、电子设备和存储介质
CN115857786B (zh) * 2023-02-27 2023-07-07 蔚来汽车科技(安徽)有限公司 用于实现触控交互的方法和触控交互设备

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US9459794B1 (en) * 2014-03-24 2016-10-04 Amazon Technologies, Inc. Interactions based on multiple stylus inputs
CN106952316A (zh) * 2017-03-22 2017-07-14 福建中金在线信息科技有限公司 一种微信小程序中股票分时图的显示方法及装置
CN109634603A (zh) * 2018-11-28 2019-04-16 广东智合创享营销策划有限公司 一种基于Canvas画布的H5页面制作方法和装置
CN109783102A (zh) * 2019-01-18 2019-05-21 北京城市网邻信息技术有限公司 一种小程序中Canvas画布生成的方法、装置、设备和存储介质
CN110109598A (zh) * 2019-05-06 2019-08-09 北京奇艺世纪科技有限公司 一种动画交互实现方法、装置及电子设备

Family Cites Families (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20170199748A1 (en) * 2016-01-13 2017-07-13 International Business Machines Corporation Preventing accidental interaction when rendering user interface components

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US9459794B1 (en) * 2014-03-24 2016-10-04 Amazon Technologies, Inc. Interactions based on multiple stylus inputs
CN106952316A (zh) * 2017-03-22 2017-07-14 福建中金在线信息科技有限公司 一种微信小程序中股票分时图的显示方法及装置
CN109634603A (zh) * 2018-11-28 2019-04-16 广东智合创享营销策划有限公司 一种基于Canvas画布的H5页面制作方法和装置
CN109783102A (zh) * 2019-01-18 2019-05-21 北京城市网邻信息技术有限公司 一种小程序中Canvas画布生成的方法、装置、设备和存储介质
CN110109598A (zh) * 2019-05-06 2019-08-09 北京奇艺世纪科技有限公司 一种动画交互实现方法、装置及电子设备

Non-Patent Citations (3)

* Cited by examiner, † Cited by third party
Title
Jintae Kim ; Hyunsoo Song ; Dong-Soo Kwon.Behavioral Analysis of a Touch-Based Interaction between Humans and an Egg-shaped Robot According to Protrusions.IEEE.2018,全文. *
***中3D场景的应用;欧楠;陈翔;;中国西部科技;20080515(第14期);全文 *
面向惯用手的笔+触控输入;辛义忠;姜欣慧;李岩;李洋;;计算机辅助设计与图形学学报;20170915(第09期);全文 *

Also Published As

Publication number Publication date
CN110727383A (zh) 2020-01-24

Similar Documents

Publication Publication Date Title
CN111709878B (zh) 人脸超分辨率实现方法、装置、电子设备及存储介质
CN110727383B (zh) 基于小程序的触控交互方法、装置、电子设备与存储介质
JP2017523515A (ja) アイコンサイズ変更
US9870144B2 (en) Graph display apparatus, graph display method and storage medium
KR20160003683A (ko) 시각화된 데이터를 상호작용에 기초하여 자동으로 조작하는 기법
US20160070460A1 (en) In situ assignment of image asset attributes
US20140285507A1 (en) Display control device, display control method, and computer-readable storage medium
KR102205283B1 (ko) 적어도 하나의 어플리케이션을 실행하는 전자 장치 및 그 제어 방법
CN107479818B (zh) 一种信息交互方法及移动终端
US20160239186A1 (en) Systems and methods for automated generation of graphical user interfaces
US20150370447A1 (en) Computerized systems and methods for cascading user interface element animations
CN112926000A (zh) 显示区域渲染方法、装置、设备、可读存储介质及产品
US11169652B2 (en) GUI configuration
RU2768526C2 (ru) Реальное присутствие рукописного ввода для сотрудничества в реальном времени
CN113918260A (zh) 应用程序显示方法、装置及电子设备
JP2016110518A (ja) 情報処理装置、その制御方法、プログラム、及び記憶媒体
CN110471700B (zh) 图形处理方法、装置、存储介质及电子设备
US10193959B2 (en) Graphical interface for editing an interactive dynamic illustration
CN112634401B (zh) 一种平面轨迹绘制方法、装置、设备及存储介质
US10970476B2 (en) Augmenting digital ink strokes
CN112581589A (zh) 一种视图列表布局方法、装置、设备及存储介质
CN107615229B (zh) 用户界面装置和用户界面装置的画面显示方法
CN109766530B (zh) 图表边框的生成方法、装置、存储介质和电子设备
US20140365955A1 (en) Window reshaping by selective edge revisions
CN112035210B (zh) 用于输出颜色信息的方法、装置、设备和介质

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
GR01 Patent grant
GR01 Patent grant