WO2021218017A1 - 鼠标跟随特效的实现方法、装置、计算机设备及存储介质 - Google Patents

鼠标跟随特效的实现方法、装置、计算机设备及存储介质 Download PDF

Info

Publication number
WO2021218017A1
WO2021218017A1 PCT/CN2020/118002 CN2020118002W WO2021218017A1 WO 2021218017 A1 WO2021218017 A1 WO 2021218017A1 CN 2020118002 W CN2020118002 W CN 2020118002W WO 2021218017 A1 WO2021218017 A1 WO 2021218017A1
Authority
WO
WIPO (PCT)
Prior art keywords
mouse
array
coordinate points
canvas
movement track
Prior art date
Application number
PCT/CN2020/118002
Other languages
English (en)
French (fr)
Inventor
李清鹏
Original Assignee
平安科技（深圳）有限公司
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 平安科技（深圳）有限公司 filed Critical 平安科技（深圳）有限公司
Publication of WO2021218017A1 publication Critical patent/WO2021218017A1/zh

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
    • G06F3/04812—Interaction techniques based on cursor appearance or behaviour, e.g. being affected by the presence of displayed objects
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces

Definitions

  • This application relates to the field of computer technology, belonging to computer vision in artificial intelligence, and in particular to methods, devices, computer equipment, and storage media for implementing mouse-following special effects.
  • the mouse or finger follow special effect is the more important game feedback in H5 games now.
  • the mouse follow special effect means that when the mouse or finger slides over the page, it will produce a follow track that follows the trace of the mouse. We can only see this following effect on certain game apps in the past.
  • the web-based program development environment is different from that of the terminal.
  • the mouse-following game special effects need to be implemented on the Web side. The examples of special effects are still very limited.
  • the movement coordinates of the mouse can be obtained, and adjacent points in the movement coordinates can be connected to form the movement trajectory of the mouse, and the following special effects can be realized on the movement trajectory of the mouse.
  • the method provided is to clear all the content in the rectangle at a certain position in the entire canvas, for example, the method canvas.clearRect(x,y,w,h), which can only be cleared from the point (x,y), and the width is w, the content in a rectangle with height h cannot achieve the effect of erasing line segments. Therefore, the existing special effects of mouse following implemented on the Web are limited to blocks along the mouse's movement track (including circles and rectangles). , Square, etc.) special effects such as divergence, disappear
  • the embodiments of the present application provide a method, a device, a computer device, and a storage medium for implementing a mouse following special effect, so as to solve the technical problem that the prior art cannot realize the linear special effect of the mouse on the web page side.
  • a method for realizing mouse following special effects includes:
  • the two adjacent coordinate points stored in the array are sequentially connected into a line segment to form the movement trajectory of the mouse, and the movement trajectory is displayed in the pre-created canvas;
  • a device for realizing mouse following special effects includes:
  • the mouse monitoring module is used to obtain the coordinate point of the mouse operation in the browser page when the mouse operation event is monitored;
  • the coordinate storage module is used to store the acquired coordinate points in the array in the order of the time when the event occurred;
  • the update module is used to obtain the coordinate points passed by the mouse on the browser page in real time, and update and store the coordinate points obtained in real time in the array;
  • the display module is used to sequentially connect two adjacent coordinate points stored in the array into a line segment to form the movement track of the mouse, and display the movement track in a pre-created canvas;
  • the loop module is used to erase the movement track displayed in the canvas every time the browser renders a page frame, obtain the last updated coordinate point of the mouse in the array, and cyclically form the movement track of the mouse to the original step.
  • a computer device includes a memory, a processor, and computer-readable instructions that are stored in the memory and can run on the processor, and the processor implements the following steps when the processor executes the computer-readable instructions:
  • One or more readable storage media storing computer readable instructions, when the computer readable instructions are executed by one or more processors, the one or more processors execute the following steps:
  • the method, device, computer equipment, and storage medium for realizing the mouse following special effect proposed in this application can be applied to the web page side, and the linear special effect of mouse following can be realized on the web page side.
  • FIG. 1 is a schematic diagram of an application environment of a method for implementing a mouse following special effect in an embodiment of the present application
  • FIG. 2 is a flowchart of a method for implementing a mouse following special effect in an embodiment of the present application
  • FIG. 3 is a flowchart of a method for implementing a mouse following special effect in another embodiment of the present application
  • FIG. 4 is a flowchart of a method for implementing a mouse following special effect in another embodiment of the present application.
  • FIG. 5 is a schematic structural diagram of a device for implementing a mouse following special effect in an embodiment of the present application
  • Fig. 6 is a schematic diagram of a computer device in an embodiment of the present application.
  • the implementation method of mouse following special effects provided by this application can be applied in the application environment as shown in Fig. 1, where the computer equipment includes, but is not limited to, various personal computers, notebook computers, smart phones, tablet computers, and portable wearable devices.
  • FIG. 2 is a flowchart of a method for implementing a mouse following special effect in an embodiment of the present application.
  • a method for implementing a mouse following special effect is provided, and the method is applied to the server in FIG. 1 as an example for illustration As shown in FIG. 2, the method for implementing the mouse following special effect includes the following steps S101 to S105:
  • the coordinate points of the mouse operation in the browser page can be obtained through browser printing.
  • this step S101 further includes:
  • the mouse click event when it is detected that the mouse click event is triggered, it can be a mouse click but not dragging. At this time, a number of overlapping coordinate points are acquired, or it can be a mouse click and dragging. When moving, a number of consecutive and different coordinate points are acquired at this time.
  • the method for implementing the mouse following special effect further includes:
  • the array including a preset number of storage bits is created according to the received instruction.
  • the function of the instruction is to create an array in the database, and the number of storage bits of the data is fixed to a preset one. For example, an array including 50 storage bits can be created through the received instruction, and the instruction can be read Get the programming code entered by the programmer.
  • the number of storage bits of the array is the maximum number of coordinate points that can be stored.
  • an array including 50 storage bits can be created, which means that the array can store up to 50 coordinate points.
  • the way to update the array is, for example, when the storage location of the array is not full, add the coordinate point of the mouse that is newly acquired, and delete the coordinate point of the mouse when the storage location of the array is full.
  • the head of the array stores the coordinate points acquired at the earliest time, and the latest coordinate point is added to the end of the array, so that all the coordinate points are stored in each storage location of the array.
  • the method for implementing the mouse following special effect further includes:
  • a canvas for displaying the motion track is created in the browser page, and the motion track is displayed on the canvas.
  • a canvas can be created in the browser page to display the movement track of the mouse.
  • this step can be understood as a canvas that is created in advance according to the coordinate points of the mouse stored in the array and used to display the movement track of the mouse.
  • a usage scenario of this embodiment for example: rendering page frames for a simulated browser, most browsers nowadays render frames at 60 frames, that is, rendering 60 frames per second, so that the animations that users see are smooth , There will be no lag. 60 frames per second, we can use the browser setInterval (function (), 16) method to achieve, the first parameter of this method is the method to be executed, the second parameter is executed every 16 milliseconds, and this timing method Execute in a loop to get the latest movement track of the mouse.
  • the browser when the browser renders each frame, first clear the entire canvas, erase all content, get a blank canvas, and then store the coordinate points in the array (may be 50 or less than 50 ) Starting from the first point, use canvas to connect every two points with a line segment to get a roughly line segment connected by several coordinate points.
  • the implementation method of the mouse following special effect proposed in this application obtains the coordinate points of the mouse operation in the browser page in real time, stores the coordinate points of the mouse in an array and updates the coordinate points of the mouse in real time, and then stores the coordinate points in the array Two adjacent coordinate points are connected in sequence to form a line segment to form the movement trajectory of the mouse, and the movement trajectory is displayed in a pre-created canvas. Each time the browser renders a page frame, the display in the canvas is erased. Movement track, obtain the coordinate point of the mouse last updated in the array, and loop the above steps to obtain the linear movement track of the mouse being operated in real time.
  • the implementation method, device, computer equipment and storage medium of the mouse following special effect proposed in this application It can be applied to the web page side, and can realize the linear special effect of the mouse following on the web page side.
  • FIG. 3 is a flowchart of a method for implementing a mouse following special effect in another embodiment of the present application. As shown in FIG. 3, the method for implementing the mouse following special effect includes the above steps S101, S104, and S105. It further includes:
  • the coordinate point of the mouse operation in the browser page is obtained for the first time, the coordinate point of the mouse obtained first is stored in the first storage position of the array;
  • the coordinate points are sequentially stored in the storage location sequentially according to the time sequence of obtaining the coordinate points.
  • the first acquired coordinate point is stored in the front storage position of the array, and the later acquired coordinate point is stored in the rear storage position adjacent to the first storage position, so that the storage of the array is
  • the coordinate points stored sequentially are the coordinate points through which the movement track of the mouse passes.
  • step S103 further includes:
  • the data of each point is pressed into the array, from 1 to 50, there may be 10 coordinate points in the current array at the beginning , But every frame is being rendered. In this frame, we connect these 10 points. In the next frame, it may become a connection of 20 points. After a few frames, the array reaches 50 points, so keep This point, so the setting of 50 only affects the maximum length of the mouse track, we can set it artificially according to our preferences or needs.
  • the coordinate point information of the mouse is continuously obtained during the dragging process of the mouse, and the coordinate point is stored in an array for storage. If the number of points in the array has reached the maximum value of the storage location of the array , Before pressing the newly acquired coordinate point into the array, remove the first pressed point in the array, and then press the new point into the array, so that the number of coordinate points saved in this array can be kept forever It is the latest several position points that the mouse has passed.
  • a canvas for displaying the movement track of the mouse is created in the browser page, and two adjacent coordinate points stored in the array are sequentially connected into a line segment to form the mouse
  • the movement track, and the movement track is displayed in the canvas, and every time the browser renders a page frame, the movement track of the mouse displayed in the canvas is erased, and the latest update in the array is obtained
  • the coordinate points of the mouse are executed in a loop to display the latest line-segment motion trajectory of the mouse on the canvas, and special effects are added to the motion trajectory itself to realize the requirement of following special effects on the motion trajectory of the mouse on the web side.
  • FIG. 4 is a flowchart of a method for implementing a mouse following special effect in another embodiment of the present application. As shown in FIG. 4, the method for implementing the mouse following special effect includes the above steps S101 to S105. The realization method further includes:
  • the step of adding a preset special effect to the movement track of the mouse includes:
  • each line segment formed by the connection is thickened in sequence.
  • the implementation method of the mouse following special effect proposed in this embodiment is to obtain the coordinate points of the mouse operation in the browser page in real time, store the coordinate points of the mouse in an array and update the coordinate points of the mouse in real time, and then store the coordinate points of the mouse in the array.
  • the stored two adjacent coordinate points are sequentially connected to form a line segment to form the movement track of the mouse, and the movement track is displayed in the pre-created canvas. Every time the browser renders a page frame, the display in the canvas is erased
  • the movement trajectory of the mouse, the coordinate point of the mouse that was last updated in the array is obtained, and the linear movement trajectory of the mouse being operated in real time can be obtained by looping the above steps.
  • the implementation method, device, computer equipment and The storage medium can be applied to the web page side, and can realize the linear special effect of the mouse following on the web page side.
  • a device for implementing a mouse following special effect is provided, and the device for implementing a mouse following special effect corresponds to the method for implementing the mouse following special effect in the above-mentioned embodiment.
  • the device 100 for implementing the mouse following special effect includes a mouse monitoring module 11, a coordinate storage module 12, an update module 13, a display module 14 and a circulation module 15.
  • the detailed description of each functional module is as follows:
  • the mouse monitoring module 11 is used to obtain the coordinate point of the mouse operation in the browser page when the mouse operation event is monitored.
  • the mouse monitoring module 11 can obtain the coordinate points of the mouse operation in the browser page through browser printing.
  • the mouse monitoring module 11 further includes:
  • the trigger detection unit is used to determine that the mouse operation event is monitored when the mouse click event is triggered.
  • the mouse click event when it is detected that the mouse click event is triggered, it can be a mouse click but not dragging. At this time, a number of overlapping coordinate points are acquired, or it can be a mouse click and dragging. When moving, a number of consecutive and different coordinate points are acquired at this time.
  • the coordinate storage module 12 is configured to sequentially store the acquired coordinate points in an array in the order of the time of occurrence of the event.
  • the update module 13 is configured to obtain the coordinate points passed by the mouse on the browser page in real time, and update and store the coordinate points obtained in real time in the array.
  • the update module 13 updates the array, for example, when the storage location of the array is not full, adding the coordinate point of the mouse newly acquired, and when the storage location of the array is full , Delete the coordinate points obtained at the earliest moment stored at the head of the array, and add the latest coordinate points at the end of the array, so that all the coordinate points are stored in each storage location of the array.
  • the display module 14 is configured to sequentially connect two adjacent coordinate points stored in the array into a line segment to form a movement track of the mouse, and display the movement track in a pre-created canvas.
  • the loop module 15 is used for erasing the movement track displayed in the canvas every time the browser renders a page frame, obtaining the coordinate point of the mouse last updated in the array, and looping the movement track of the mouse to This step.
  • a usage scenario of this embodiment for example: rendering page frames for a simulated browser, most browsers nowadays render frames at 60 frames, that is, rendering 60 frames per second, so that the animations that users see are smooth , There will be no lag. 60 frames per second, we can use the browser setInterval (function (), 16) method to achieve, the first parameter of this method is the method to be executed, the second parameter is executed every 16 milliseconds, and this timing method Execute in a loop to get the latest movement track of the mouse.
  • the device 100 for implementing the mouse following special effect further includes:
  • the array creation module is used to create the array including a preset number of storage bits according to the received instruction.
  • the function of the instruction is to create an array in the database, and the number of storage bits of the data is fixed to a preset one. For example, an array including 50 storage bits can be created through the received instruction, and the instruction can be read Get the programming code entered by the programmer.
  • the number of storage bits of the array is the maximum number of coordinate points that can be stored.
  • an array including 50 storage bits can be created, which means that the array can store up to 50 coordinate points.
  • the canvas creation module is used to create a canvas for displaying the motion trajectory in the browser page, and display the motion trajectory in the canvas.
  • the canvas creation module can be used to create a canvas in the browser page for displaying the movement track of the mouse.
  • the coordinate storage module 12 further includes:
  • the first storage unit is used to store the coordinate point of the mouse acquired first in the first storage position of the array when acquiring the coordinate point of the mouse operation in the browser page for the first time;
  • the second storage unit is used to sequentially store the coordinate points in the storage location sequentially according to the time sequence of obtaining the coordinate points.
  • the update module 13 further includes:
  • the judging unit is used to judge whether the storage bits of the array are full, if not, the coordinate points obtained in real time are sequentially stored at the end of the array, and if yes, the coordinate points stored in the first storage position of the array are deleted and the The new coordinate point is pressed into the end of the array.
  • the data of each point is pressed into the array, from 1 to 50, there may be 10 coordinate points in the current array at the beginning. , But every frame is being rendered. In this frame, we connect these 10 points. In the next frame, it may become a connection of 20 points. After a few frames, the array reaches 50 points, so keep This point, so the setting of 50 only affects the maximum length of the mouse track, we can set it artificially according to our preferences or needs.
  • the coordinate point information of the mouse is continuously obtained during the dragging process of the mouse, and the coordinate point is stored in an array for storage. If the number of points in the array has reached the maximum value of the storage location of the array , Before pressing the newly acquired coordinate point into the array, remove the first pressed point in the array, and then press the new point into the array, so that the number of coordinate points saved in this array can be kept forever It is the latest several position points that the mouse has passed.
  • the device 100 for implementing the mouse following special effect further includes:
  • the special effect adding module is used to add preset special effects to the movement track of the mouse and display the special effects in the canvas.
  • the special effect adding module is specifically configured to sequentially connect two adjacent coordinate points stored in the array into a line segment to form the movement track of the mouse, and then thicken each line segment formed by the connection in turn.
  • a canvas for displaying the movement track of the mouse is created in the browser page, and two adjacent coordinate points stored in the array are sequentially connected into a line segment to form the mouse
  • the movement track, and the movement track is displayed in the canvas, and every time the browser renders a page frame, the movement track of the mouse displayed in the canvas is erased, and the latest update in the array is obtained
  • the coordinate points of the mouse are executed in a loop to display the latest line-segment motion trajectory of the mouse on the canvas, and special effects are added to the motion trajectory itself to realize the requirement of following special effects on the motion trajectory of the mouse on the web side.
  • first and “second” in the above-mentioned modules/units is only to distinguish different modules/units, and is not used to limit which module/unit has a higher priority or other limiting meanings.
  • the terms “including” and “having” and any variations of them are intended to cover non-exclusive inclusions.
  • a process, method, system, product, or device that includes a series of steps or modules is not necessarily limited to those clearly listed.
  • Those steps or modules may include other steps or modules that are not clearly listed or are inherent to these processes, methods, products, or equipment.
  • the division of modules in this application is only a logical division , There can be other division methods when realizing in practical applications.
  • Each module in the device for realizing the mouse following special effect can be implemented in whole or in part by software, hardware, and a combination thereof.
  • the above-mentioned modules may be embedded in the form of hardware or independent of the processor in the computer equipment, or may be stored in the memory of the computer equipment in the form of software, so that the processor can call and execute the operations corresponding to the above-mentioned modules.
  • a computer device is provided.
  • the computer device may be a terminal computer device, and its internal structure diagram may be as shown in FIG. 6.
  • the computer equipment includes a processor, a memory, a network interface, a display screen and an input device connected through a system bus.
  • the processor of the computer device is used to provide calculation and control capabilities.
  • the memory of the computer device includes a non-volatile storage medium and an internal memory.
  • the non-volatile storage medium stores an operating system and computer readable instructions.
  • the internal memory provides an environment for the operation of the operating system and computer-readable instructions in the non-volatile storage medium.
  • the network interface of the computer device is used to communicate with an external server through a network connection. When the computer readable instruction is executed by the processor, a method for implementing the mouse following special effect is realized.
  • a computer device including a memory, a processor, and computer-readable instructions stored in the memory and running on the processor.
  • the processor executes the computer-readable instructions
  • the mouse in the above-mentioned embodiment is implemented.
  • the functions of the various modules/units of the device for implementing the mouse following special effect in the foregoing embodiments are implemented, such as the functions of the modules 11 to 15 shown in FIG. 5.
  • the processor implements the following steps when executing computer-readable instructions:
  • the two adjacent coordinate points stored in the array are sequentially connected into a line segment to form the movement trajectory of the mouse, and the movement trajectory is displayed in the pre-created canvas;
  • processor further implements the following steps when executing the computer-readable instruction:
  • a canvas for displaying the motion track is created in the browser page, and the motion track is displayed on the canvas.
  • processor further implements the following steps when executing the computer-readable instruction:
  • the coordinate points of the mouse operated in the browser page are acquired for the first time, the coordinate points of the mouse acquired first are stored in the first storage position of the array;
  • the coordinate points are sequentially stored in the storage location sequentially according to the time sequence of obtaining the coordinate points.
  • processor further implements the following steps when executing the computer-readable instruction:
  • processor further implements the following steps when executing the computer-readable instruction:
  • a preset special effect is added to the movement track of the mouse, and the special effect is displayed in the canvas.
  • processor further implements the following steps when executing the computer-readable instruction:
  • each of the line segments formed by the connection are sequentially thickened.
  • the processor may be a central processing unit (Central Processing Unit, CPU), or other general-purpose processors, digital signal processors (Digital Signal Processors) Processor, DSP), application specific integrated circuit (Application Specific Integrated Circuit, ASIC), off-the-shelf programmable gate array (Field-Programmable Gate Array, FPGA) or other programmable logic devices, discrete gates or transistor logic devices, discrete hardware components, etc.
  • the general-purpose processor may be a microprocessor or the processor may also be any conventional processor, etc.
  • the processor is the control center of the computer device, and various interfaces and lines are used to connect various parts of the entire computer device.
  • the memory may be used to store the computer-readable instructions and/or modules, and the processor may execute or execute the computer-readable instructions and/or modules stored in the memory, and call data stored in the memory, Realize various functions of the computer device.
  • the memory may mainly include a storage program area and a storage data area, where the storage program area may store an operating system, an application program required by at least one function (such as a sound playback function, an image playback function, etc.), etc.; the storage data area may store Data created based on the use of mobile phones (such as audio data, video data, etc.), etc.
  • the memory may be integrated in the processor, or may be provided separately from the processor.
  • one or more readable storage media storing computer readable instructions are provided.
  • the computer readable storage media may be non-volatile or volatile.
  • the computer readable instructions When executed by one or more processors, the one or more processors are caused to execute, for example, step 101 to step 105 shown in FIG. 2 and other extensions of the method and extensions of related steps.
  • the functions of the modules/units of the device for implementing the mouse following special effect in the foregoing embodiment are realized, for example, the functions of the modules 11 to 15 shown in FIG. 5.
  • the computer-readable instruction is executed by one or more processors, the one or more processors execute the following steps:
  • the one or more processors further execute the following steps:
  • a canvas for displaying the motion track is created in the browser page, and the motion track is displayed on the canvas.
  • the one or more processors further execute the following steps:
  • the coordinate points of the mouse operated in the browser page are acquired for the first time, the coordinate points of the mouse acquired first are stored in the first storage position of the array;
  • the coordinate points are sequentially stored in the storage location sequentially according to the time sequence of obtaining the coordinate points.
  • the one or more processors further execute the following steps:
  • the one or more processors further execute the following steps:
  • a preset special effect is added to the movement track of the mouse, and the special effect is displayed in the canvas.
  • the one or more processors further execute the following steps:
  • each of the line segments formed by the connection are sequentially thickened.
  • Non-volatile memory may include read-only memory (ROM), programmable ROM (PROM), electrically programmable ROM (EPROM), electrically erasable programmable ROM (EEPROM), or flash memory.
  • Volatile memory may include random access memory (RAM) or external cache memory.
  • RAM is available in many forms, such as static RAM (SRAM), dynamic RAM (DRAM), synchronous DRAM (SDRAM), double data rate SDRAM (DDRSDRAM), enhanced SDRAM (ESDRAM), synchronous chain Channel (Synchlink) DRAM (SLDRAM), memory bus (Rambus) direct RAM (RDRAM), direct memory bus dynamic RAM (DRDRAM), and memory bus dynamic RAM (RDRAM), etc.

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本申请公开了一种鼠标跟随特效的实现方法、装置、计算机设备及存储介质，应用于计算机技术领域，用于在web网页端实现鼠标的线性特效。本申请提供的方法包括：监听到鼠标操作事件时，获取鼠标在浏览器页面中操作的坐标点；将获取的该坐标点按照事件发生的时间先后顺序依次存储在数组中；实时获取鼠标在该浏览器页面经过的坐标点，将该坐标点更新存储在数组中；将该数组中存储的两相邻坐标点依次连接成线段，以形成该鼠标的运动轨迹，并将该运动轨迹在预先创建的画布中显示；在该浏览器每渲染一次页面帧时，擦除该画布中显示的该运动轨迹，获取该数组中最近一次更新的该鼠标的坐标点，循环形成该鼠标的运动轨迹至本步骤直至所述鼠标操作事件停止。

Description

鼠标跟随特效的实现方法、装置、计算机设备及存储介质
本申请要求于2020年04月28日提交中国专利局、申请号为202010350315.4，发明名称为“鼠标跟随特效的实现方法、装置、计算机设备及存储介质”的中国专利申请的优先权，其全部内容通过引用结合在本申请中。
技术领域
本申请涉及计算机技术领域，属于人工智能中的计算机视觉，尤其涉及鼠标跟随特效的实现方法、装置、计算机设备及存储介质。
 
背景技术
鼠标或手指的跟随特效是现在H5游戏中比较重要的游戏反馈，鼠标跟随特效的意思是当鼠标或手指在页面中滑过时，会产生一道跟随鼠标滑动痕迹的跟随轨迹。我们以往能看到这种跟随效果只能在某些游戏APP上，基于Web端与终端的程序开发环境不同，现今世面上在Web端要实现鼠标跟随的游戏特效，特效的示例还十分有限。
发明人意识到由于无法直接将某些游戏APP上的鼠标跟随特效直接应用在Web端，因此需要对网页端实现鼠标跟随特效重新进行开发，以实现网页端对鼠标跟随特效的需求。
现有的在Web端实现鼠标跟随特效的实现方法中，可以通过获取鼠标的运动坐标，将运动坐标中相邻的点连起来构成鼠标的运动轨迹，在该鼠标的运动轨迹上实现跟随特效，但是还需要实现擦除两个点之间线段的方法，使得显示出的鼠标的运动轨迹不会像“贪吃蛇”一样越来越长，由于canvas没有提供擦除两个点之间线段的方法，提供的是清除整个画布中的某个位置的矩形内的所有内容，例如方法canvas.clearRect(x,y,w,h)，只能实现清除从点（x,y）开始，宽为w，高为h的矩形内的内容，达不到擦除线段的效果，因此现有的在Web端实现的鼠标跟随的特效只限于沿着鼠标的运动轨迹上块状（包括圆形、矩形、正方形等）特效的发散、消失等特效，无法实现在鼠标运动轨迹的线性特效。
 
发明内容
本申请实施例提供一种鼠标跟随特效的实现方法、装置、计算机设备及存储介质，以解决现有技术无法在web网页端实现鼠标的线性特效的技术问题。
一种鼠标跟随特效的实现方法，该方法包括：
监听到鼠标操作事件时，获取鼠标在浏览器页面中操作的坐标点；
将获取的该坐标点按照事件发生的时间先后顺序依次存储在数组中；
实时获取该鼠标在该浏览器页面经过的坐标点，将实时获取的该坐标点更新存储在该数组中；
将该数组中存储的两相邻坐标点依次连接成线段，以形成该鼠标的运动轨迹，并将该运动轨迹在预先创建的画布中显示；
在该浏览器每渲染一次页面帧时，擦除该画布中显示的该运动轨迹，获取该数组中最近一次更新的该鼠标的坐标点，循环形成该鼠标的运动轨迹至本步骤直至所述鼠标操作事件停止。
一种鼠标跟随特效的实现装置，该装置包括：
鼠标监听模块，用于监听到鼠标操作事件时，获取鼠标在浏览器页面中操作的坐标点；
坐标存储模块，用于将获取的该坐标点按照事件发生的时间先后顺序依次存储在数组中；
更新模块，用于实时获取该鼠标在该浏览器页面经过的坐标点，将实时获取的该坐标点更新存储在该数组中；
显示模块，用于将该数组中存储的两相邻坐标点依次连接成线段，以形成该鼠标的运动轨迹，并将该运动轨迹在预先创建的画布中显示；
循环模块，用于在该浏览器每渲染一次页面帧时，擦除该画布中显示的该运动轨迹，获取该数组中最近一次更新的该鼠标的坐标点，循环形成该鼠标的运动轨迹至本步骤。
一种计算机设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机可读指令，所述处理器执行所述计算机可读指令时实现以下的步骤：
监听到鼠标操作事件时，获取鼠标在浏览器页面中操作的坐标点；
将获取的所述坐标点按照事件发生的时间先后顺序依次存储在数组中；
实时获取所述鼠标在所述浏览器页面经过的坐标点，将实时获取的所述坐标点更新存储在所述数组中；
将所述数组中存储的两相邻坐标点依次连接成线段，以形成所述鼠标的运动轨迹，并将所述运动轨迹在预先创建的画布中显示；
在所述浏览器每渲染一次页面帧时，擦除所述画布中显示的所述运动轨迹，获取所述数组中最近一次更新的所述鼠标的坐标点，循环形成所述鼠标的运动轨迹至本步骤直至所述鼠标操作事件停止。
一个或多个存储有计算机可读指令的可读存储介质，所述计算机可读指令被一个或多个处理器执行时，使得所述一个或多个处理器执行如下步骤：
监听到鼠标操作事件时，获取鼠标在浏览器页面中操作的坐标点；
将获取的所述坐标点按照事件发生的时间先后顺序依次存储在数组中；
实时获取所述鼠标在所述浏览器页面经过的坐标点，将实时获取的所述坐标点更新存储在所述数组中；
将所述数组中存储的两相邻坐标点依次连接成线段，以形成所述鼠标的运动轨迹，并将所述运动轨迹在预先创建的画布中显示；
在所述浏览器每渲染一次页面帧时，擦除所述画布中显示的所述运动轨迹，获取所述数组中最近一次更新的所述鼠标的坐标点，循环形成所述鼠标的运动轨迹至本步骤直至所述鼠标操作事件停止。
本申请提出的鼠标跟随特效的实现方法、装置、计算机设备及存储介质可适用在web网页端，能够在网页端实现鼠标跟随的线性特效。
 
附图说明
为了更清楚地说明本申请实施例的技术方案，下面将对本申请实施例的描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。
图1是本申请一实施例中鼠标跟随特效的实现方法的一应用环境示意图；
图2是本申请一实施例中鼠标跟随特效的实现方法的一流程图；
图3是本申请另一实施例中鼠标跟随特效的实现方法的一流程图；
图4是本申请又一实施例中鼠标跟随特效的实现方法的一流程图；
图5是本申请一实施例中鼠标跟随特效的实现装置的结构示意图；
图6是本申请一实施例中计算机设备的一示意图。
 
具体实施方式
下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。
本申请提供的鼠标跟随特效的实现方法，可应用在如图1的应用环境中，其中，该计算机设备包括但不限于各种个人计算机、笔记本电脑、智能手机、平板电脑和便携式可穿戴设备。
图2是本申请一实施例中鼠标跟随特效的实现方法的一流程图，在一实施例中，提供一种鼠标跟随特效的实现方法，以该方法应用在图1中的服务器为例进行说明，如图2所示，该鼠标跟随特效的实现方法包括如下步骤S101至S105：
S101 、监听到鼠标操作事件时，获取鼠标在浏览器页面中操作的坐标点。
在该实施例中，可以通过浏览器打印获取鼠标在浏览器页面中操作的坐标点。
作为可选地，该步骤S101进一步包括：
检测到鼠标单击事件被触发时，判断监听到鼠标操作事件。
在该实施例中，所述检测到鼠标单击事件被触发时可以是鼠标单击但不进行拖动，此时获取到的是若干个重叠的坐标点，也可以是鼠标单击且进行拖动，此时获取到的是若干个连续且不同的坐标点。
S102 、将获取的该坐标点按照事件发生的时间先后顺序依次存储在数组中。
在其中一个实施例中，该鼠标跟随特效的实现方法还包括：
根据接收的指令创建包括有预设个存储位的该数组。
其中，所述指令的作用在于在数据库中创建数组，该数据的存储位的个数固定为预设个，例如，可以通过接收的指令创建包括有50个存储位的数组，该指令可以通过读取程序员输入的编程代码得到。
在其中一个实施例中，该数组的存储位的位数为最多能够存储的坐标点的个数。
作为可选地，可以创建包括有50个存储位的数组，表示该数组最多能够存储50个坐标点。
S103 、实时获取该鼠标在该浏览器页面经过的坐标点，将实时获取的该坐标点更新存储在该数组中。
在该实施例中，更新所述数组的方式例如当所述数组的存储位未存满时，增加最新获取的所述鼠标的坐标点，当所述数组的存储位存储满时，删除在所述数组的头部存储的最早时刻获取的坐标点，并在所述数组的尾部增加最新的坐标点，使得所述数组的每个存储位均存储有所有坐标点。
S104 、将该数组中存储的两相邻坐标点依次连接成线段，以形成该鼠标的运动轨迹，并将该运动轨迹在预先创建的画布中显示。
在其中一个实施例中，该鼠标跟随特效的实现方法还包括：
在浏览器页面中创建用于显示该运动轨迹的画布，将该运动轨迹在该画布中显示。
在其中一个实施例中，可以在所述浏览器页面中创建canvas画布，用于显示鼠标的运动轨迹。
其中，本步骤可以理解为根据数组中存储的鼠标的坐标点预先创建的用于显示鼠标运动轨迹的画布。
S105 、在该浏览器每渲染一次页面帧时，擦除该画布中显示的该运动轨迹，获取该数组中最近一次更新的该鼠标的坐标点，循环形成该鼠标的运动轨迹至本步骤直至所述鼠标操作事件停止。
根据本实施例的一个使用场景例如：为模拟浏览器渲染页面帧，如今的浏览器渲染帧数大都保持在60帧，即每秒渲染60个画面帧，这样用户看到的动画都是流畅的，不会出现卡顿。1秒60帧，我们可以通过浏览器setInterval(function(), 16)方法来实现，这个方法的第一个参数为将要执行的方法，第二个参数为每16毫秒执行一次，且这个定时方法循环执行以获取鼠标最新的运动轨迹。
因为1秒等于1000毫秒，1000毫秒渲染60帧，所以两个页面帧之间的间隔时间为1000 / 60 = 16（毫秒）。
可以理解的，在浏览器渲染每一帧时，先清除整个canvas画布，将所有内容抹去，得到一个空白的画布，再将数组中存储的坐标点（可能为50个，也可能小于50个）从第一个点开始，每两个点利用canvas进行线段相连，得到一个大致的由若干个坐标点连接起来的线段。
本申请提出的鼠标跟随特效的实现方法通过实时获取鼠标在浏览器页面中操作的坐标点，并将该鼠标的坐标点存储在数组中并实时更新鼠标的坐标点，然后将该数组中存储的两相邻坐标点依次连接成线段，以形成该鼠标的运动轨迹，并将该运动轨迹在预先创建的画布中显示，在该浏览器每渲染一次页面帧时，擦除该画布中显示的该运动轨迹，获取该数组中最近一次更新的该鼠标的坐标点，循环上述步骤即可以得到鼠标被实时操作的线性运动轨迹，本申请提出的鼠标跟随特效的实现方法、装置、计算机设备及存储介质可适用在web网页端，能够在网页端实现鼠标跟随的线性特效。
图3是本申请另一实施例中鼠标跟随特效的实现方法的一流程图，如图3所示，该鼠标跟随特效的实现方法在包括上述步骤S101、S104及S105的基础上，上述步骤S102进一步包括：
首次获取该鼠标在该浏览器页面中操作的坐标点时，将最先获取的该鼠标的坐标点存储在该数组的最前存储位；
按照获取该坐标点的时间先后顺序在该存储位中依次往后存储该坐标点。
根据本实施例的一个使用场景例如将最先获取的坐标点存储在该数组的最前存储位，将后获取的坐标点存储在与该最前存储位相邻的后存储位，使得该数组的存储位依次存储的坐标点即鼠标的运动轨迹经过的坐标点。
上述步骤S103进一步包括：
判断该数组的存储位是否存储满，若否，则将实时获取的该坐标点依次存储在该数组的尾部，若是，则删除存储在该数组最前存储位的坐标点且在该数组的尾部压入新的坐标点。
根据本实施例的一个使用场景例如：在浏览器开始打印鼠标经过点时，将一个个点的数据压入数组，从1到50，刚开始就可能存在当前数组中坐标点的个数为10，但是每一帧都在渲染，这一帧我们将这10个点连接起来，在下一帧里可能就变成了20个点的相连，在若干帧后，数组中达到50个点，就保持这个点数，所以50这个设定只是影响鼠标轨迹的最大长度，我们可以根据喜好或需求来人为设定。
本实施例通过鼠标在拖动过程中不断获取鼠标的坐标点信息，并将该坐标点存入一个数组中保存，如果数组中的点的个数已经达到了该数组的存储位存储的最大值，最新获取的坐标点在压入数组之前，将数组中第一个压入的点给剔除，再将新的点压入数组中，这样就可以保持这个数组中保存的坐标点的个数永远是鼠标经过最新的若干个位置点。
本实施例通过在得到鼠标最新的运动轨迹时，在浏览器页面中创建用于显示鼠标运动轨迹的画布，将所述数组中存储的两相邻坐标点依次连接成线段，以形成的鼠标的运动轨迹，并将所述运动轨迹在所述画布中显示，并在浏览器每渲染一次页面帧时，擦除所述画布中显示的所述鼠标的运动轨迹，获取所述数组中最近一次更新的鼠标的坐标点，并循环执行使得画布中显示鼠标最新的线段型的运动轨迹，通过对该运动轨迹本身添加特效以实现网页端在鼠标自身的运动轨迹上实现跟随特效的需求。
图4是本申请又一实施例中鼠标跟随特效的实现方法的一流程图，如图4所示，该鼠标跟随特效的实现方法在包括上述步骤S101至S105的基础上，该鼠标跟随特效的实现方法进一步包括：
对该鼠标的运动轨迹添加预设的特效，并在该画布中显示该特效。
在其中一个实施例中，该对该鼠标的运动轨迹添加预设的特效的步骤包括：
将该数组中存储的两相邻坐标点依次连接成线段，以形成该鼠标的运动轨迹时，依次加粗连接形成的各个该线段。
本实施例通过将每两个点之间的连线不断的增加线段的粗度，便可以得到类似的尾端细、跟随端粗的鼠标跟随效果。
本实施例提出的鼠标跟随特效的实现方法，通过实时获取鼠标在浏览器页面中操作的坐标点，并将该鼠标的坐标点存储在数组中并实时更新鼠标的坐标点，然后将该数组中存储的两相邻坐标点依次连接成线段，以形成该鼠标的运动轨迹，并将该运动轨迹在预先创建的画布中显示，在该浏览器每渲染一次页面帧时，擦除该画布中显示的该运动轨迹，获取该数组中最近一次更新的该鼠标的坐标点，循环上述步骤即可以得到鼠标被实时操作的线性运动轨迹，本申请提出的鼠标跟随特效的实现方法、装置、计算机设备及存储介质可适用在web网页端，能够在网页端实现鼠标跟随的线性特效。
应理解，上述实施例中各步骤的序号的大小并不意味着执行顺序的先后，各过程的执行顺序应以其功能和内在逻辑确定，而不应对本申请实施例的实施过程构成任何限定。
在一实施例中，提供一种鼠标跟随特效的实现装置，该鼠标跟随特效的实现装置与上述实施例中鼠标跟随特效的实现方法一一对应。如图5所示，该鼠标跟随特效的实现装置100包括鼠标监听模块11、坐标存储模块12、更新模块13、显示模块14和循环模块15。各功能模块详细说明如下：
鼠标监听模块11，用于监听到鼠标操作事件时，获取鼠标在浏览器页面中操作的坐标点。
在该实施例中，该鼠标监听模块11可以通过浏览器打印获取鼠标在浏览器页面中操作的坐标点。
作为可选地，该鼠标监听模块11进一步包括：
触发检测单元，用于检测到鼠标单击事件被触发时，判断监听到鼠标操作事件。
在该实施例中，所述检测到鼠标单击事件被触发时可以是鼠标单击但不进行拖动，此时获取到的是若干个重叠的坐标点，也可以是鼠标单击且进行拖动，此时获取到的是若干个连续且不同的坐标点。
坐标存储模块12，用于将获取的该坐标点按照事件发生的时间先后顺序依次存储在数组中。
更新模块13，用于实时获取该鼠标在该浏览器页面经过的坐标点，将实时获取的该坐标点更新存储在该数组中。
在该实施例中，该更新模块13更新所述数组的方式例如当所述数组的存储位未存满时，增加最新获取的所述鼠标的坐标点，当所述数组的存储位存储满时，删除在所述数组的头部存储的最早时刻获取的坐标点，并在所述数组的尾部增加最新的坐标点，使得所述数组的每个存储位均存储有所有坐标点。
显示模块14，用于将该数组中存储的两相邻坐标点依次连接成线段，以形成该鼠标的运动轨迹，并将该运动轨迹在预先创建的画布中显示。
循环模块15，用于在该浏览器每渲染一次页面帧时，擦除该画布中显示的该运动轨迹，获取该数组中最近一次更新的该鼠标的坐标点，循环形成该鼠标的运动轨迹至本步骤。
根据本实施例的一个使用场景例如：为模拟浏览器渲染页面帧，如今的浏览器渲染帧数大都保持在60帧，即每秒渲染60个画面帧，这样用户看到的动画都是流畅的，不会出现卡顿。1秒60帧，我们可以通过浏览器setInterval(function(), 16)方法来实现，这个方法的第一个参数为将要执行的方法，第二个参数为每16毫秒执行一次，且这个定时方法循环执行以获取鼠标最新的运动轨迹。
因为1秒等于1000毫秒，1000毫秒渲染60帧，所以两个页面帧之间的间隔时间为1000 / 60 = 16（毫秒）。
可以理解的，在浏览器渲染每一帧时，先清除整个canvas画布，将所有内容抹去，得到一个空白的画布，再将数组中存储的坐标点（可能为50个，也可能小于50个）从第一个点开始，每两个点利用canvas进行线段相连，得到一个大致的由若干个坐标点连接起来的线段。
在其中一个实施例中，该鼠标跟随特效的实现装置100还包括：
数组创建模块，用于根据接收的指令创建包括有预设个存储位的该数组。
其中，所述指令的作用在于在数据库中创建数组，该数据的存储位的个数固定为预设个，例如，可以通过接收的指令创建包括有50个存储位的数组，该指令可以通过读取程序员输入的编程代码得到。
在其中一个实施例中，该数组的存储位的位数为最多能够存储的坐标点的个数。
作为可选地，可以创建包括有50个存储位的数组，表示该数组最多能够存储50个坐标点。
画布创建模块，用于在浏览器页面中创建用于显示该运动轨迹的画布，将该运动轨迹在该画布中显示。
在其中一个实施例中，通过该画布创建模块可以在所述浏览器页面中创建canvas画布，用于显示鼠标的运动轨迹。
在其中一个实施例中，该坐标存储模块12进一步包括：
第一存储单元，用于首次获取该鼠标在该浏览器页面中操作的坐标点时，将最先获取的该鼠标的坐标点存储在该数组的最前存储位；
第二存储单元，用于按照获取该坐标点的时间先后顺序在该存储位中依次往后存储该坐标点。
在其中一个实施例中，该更新模块13进一步包括：
判断单元，用于判断该数组的存储位是否存储满，若否，则将实时获取的该坐标点依次存储在该数组的尾部，若是，则删除存储在该数组最前存储位的坐标点且在该数组的尾部压入新的坐标点。
根据本实施例的一个使用场景例如：在浏览器开始打印鼠标经过点时，将一个个点的数据压入数组，从1到50，刚开始就可能存在当前数组中坐标点的个数为10，但是每一帧都在渲染，这一帧我们将这10个点连接起来，在下一帧里可能就变成了20个点的相连，在若干帧后，数组中达到50个点，就保持这个点数，所以50这个设定只是影响鼠标轨迹的最大长度，我们可以根据喜好或需求来人为设定。
本实施例通过鼠标在拖动过程中不断获取鼠标的坐标点信息，并将该坐标点存入一个数组中保存，如果数组中的点的个数已经达到了该数组的存储位存储的最大值，最新获取的坐标点在压入数组之前，将数组中第一个压入的点给剔除，再将新的点压入数组中，这样就可以保持这个数组中保存的坐标点的个数永远是鼠标经过最新的若干个位置点。
在其中一个实施例中，该鼠标跟随特效的实现装置100还包括：
特效添加模块，用于对该鼠标的运动轨迹添加预设的特效，并在该画布中显示该特效。
作为可选地，该特效添加模块具体用于将该数组中存储的两相邻坐标点依次连接成线段，以形成该鼠标的运动轨迹时，依次加粗连接形成的各个该线段。
本实施例通过将每两个点之间的连线不断的增加线段的粗度，便可以得到类似的尾端细、跟随端粗的鼠标跟随效果。
本实施例通过在得到鼠标最新的运动轨迹时，在浏览器页面中创建用于显示鼠标运动轨迹的画布，将所述数组中存储的两相邻坐标点依次连接成线段，以形成的鼠标的运动轨迹，并将所述运动轨迹在所述画布中显示，并在浏览器每渲染一次页面帧时，擦除所述画布中显示的所述鼠标的运动轨迹，获取所述数组中最近一次更新的鼠标的坐标点，并循环执行使得画布中显示鼠标最新的线段型的运动轨迹，通过对该运动轨迹本身添加特效以实现网页端在鼠标自身的运动轨迹上实现跟随特效的需求。
其中上述模块/单元中的“第一”和“第二”的意义仅在于将不同的模块/单元加以区分，并不用于限定哪个模块/单元的优先级更高或者其它的限定意义。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或模块的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或模块，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或模块，本申请中所出现的模块的划分，仅仅是一种逻辑上的划分，实际应用中实现时可以有另外的划分方式。
关于鼠标跟随特效的实现装置的具体限定可以参见上文中对于鼠标跟随特效的实现方法的限定，在此不再赘述。上述鼠标跟随特效的实现装置中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中，也可以以软件形式存储于计算机设备中的存储器中，以便于处理器调用执行以上各个模块对应的操作。
在一个实施例中，提供了一种计算机设备，该计算机设备可以是终端计算机设备，其内部结构图可以如图6所示。该计算机设备包括通过系统总线连接的处理器、存储器、网络接口、显示屏和输入装置。其中，该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质、内存储器。该非易失性存储介质存储有操作系统和计算机可读指令。该内存储器为非易失性存储介质中的操作系统和计算机可读指令的运行提供环境。该计算机设备的网络接口用于与外部服务器通过网络连接通信。该计算机可读指令被处理器执行时以实现一种鼠标跟随特效的实现方法。
在一个实施例中，提供了一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机可读指令，处理器执行计算机可读指令时实现上述实施例中鼠标跟随特效的实现方法的步骤，例如图2所示的步骤101至步骤105及该方法的其它扩展和相关步骤的延伸。或者，处理器执行计算机可读指令时实现上述实施例中鼠标跟随特效的实现装置的各模块/单元的功能，例如图5所示模块11至模块15的功能。具体地，该处理器执行计算机可读指令时实现以下步骤：
监听到鼠标操作事件时，获取鼠标在浏览器页面中操作的坐标点；
将获取的该坐标点按照事件发生的时间先后顺序依次存储在数组中；
实时获取该鼠标在该浏览器页面经过的坐标点，将实时获取的该坐标点更新存储在该数组中；
将该数组中存储的两相邻坐标点依次连接成线段，以形成该鼠标的运动轨迹，并将该运动轨迹在预先创建的画布中显示；
在该浏览器每渲染一次页面帧时，擦除该画布中显示的该运动轨迹，获取该数组中最近一次更新的该鼠标的坐标点，循环形成该鼠标的运动轨迹至本步骤直至所述鼠标操作事件停止。
进一步地，该处理器执行所述计算机可读指令时还实现如下步骤：
根据接收的指令创建包括有预设个存储位的所述数组；
在浏览器页面中创建用于显示所述运动轨迹的画布，将所述运动轨迹在所述画布中显示。
进一步地，该处理器执行所述计算机可读指令时还实现如下步骤：
首次获取所述鼠标在所述浏览器页面中操作的坐标点时，将最先获取的所述鼠标的坐标点存储在所述数组的最前存储位；
按照获取所述坐标点的时间先后顺序在所述存储位中依次往后存储所述坐标点。
进一步地，该处理器执行所述计算机可读指令时还实现如下步骤：
判断所述数组的存储位是否存储满，若否，则将实时获取的所述坐标点依次存储在所述数组的尾部，若是，则删除存储在所述数组最前存储位的坐标点且在所述数组的尾部压入新的坐标点。
进一步地，该处理器执行所述计算机可读指令时还实现如下步骤：
对所述鼠标的运动轨迹添加预设的特效，并在所述画布中显示所述特效。
进一步地，该处理器执行所述计算机可读指令时还实现如下步骤：
将所述数组中存储的两相邻坐标点依次连接成线段，以形成所述鼠标的运动轨迹时，依次加粗连接形成的各个所述线段。
所述处理器可以是中央处理单元(Central Processing Unit，CPU)，还可以是其他通用处理器、数字信号处理器 (Digital Signal Processor，DSP)、专用集成电路 (Application Specific Integrated Circuit，ASIC)、现成可编程门阵列 (Field-Programmable Gate Array，FPGA) 或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等，所述处理器是所述计算机装置的控制中心，利用各种接口和线路连接整个计算机装置的各个部分。
所述存储器可用于存储所述计算机可读指令和/或模块，所述处理器通过运行或执行存储在所述存储器内的计算机可读指令和/或模块，以及调用存储在存储器内的数据，实现所述计算机装置的各种功能。所述存储器可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序（比如声音播放功能、图像播放功能等）等；存储数据区可存储根据手机的使用所创建的数据（比如音频数据、视频数据等）等。
所述存储器可以集成在所述处理器中，也可以与所述处理器分开设置。
在一个实施例中，提供了一个或多个存储有计算机可读指令的可读存储介质，所述计算机可读存储介质可以是非易失性，也可以是易失性，所述计算机可读指令被一个或多个处理器执行时，使得所述一个或多个处理器执行例如图2所示的步骤101至步骤105及该方法的其它扩展和相关步骤的延伸。或者，所述计算机可读指令被一个或多个处理器执行时实现上述实施例中鼠标跟随特效的实现装置的各模块/单元的功能，例如图5所示模块11至模块15的功能。具体地，该计算机可读指令被一个或多个处理器执行时，使得所述一个或多个处理器执行如下步骤：
监听到鼠标操作事件时，获取鼠标在浏览器页面中操作的坐标点；
将获取的所述坐标点按照事件发生的时间先后顺序依次存储在数组中；
实时获取所述鼠标在所述浏览器页面经过的坐标点，将实时获取的所述坐标点更新存储在所述数组中；
将所述数组中存储的两相邻坐标点依次连接成线段，以形成所述鼠标的运动轨迹，并将所述运动轨迹在预先创建的画布中显示；
在所述浏览器每渲染一次页面帧时，擦除所述画布中显示的所述运动轨迹，获取所述数组中最近一次更新的所述鼠标的坐标点，循环形成所述鼠标的运动轨迹至本步骤直至所述鼠标操作事件停止。
进一步地，该计算机可读指令被一个或多个处理器执行时，使得所述一个或多个处理器还执行如下步骤：
根据接收的指令创建包括有预设个存储位的所述数组；
在浏览器页面中创建用于显示所述运动轨迹的画布，将所述运动轨迹在所述画布中显示。
进一步地，该计算机可读指令被一个或多个处理器执行时，使得所述一个或多个处理器还执行如下步骤：
首次获取所述鼠标在所述浏览器页面中操作的坐标点时，将最先获取的所述鼠标的坐标点存储在所述数组的最前存储位；
按照获取所述坐标点的时间先后顺序在所述存储位中依次往后存储所述坐标点。
进一步地，该计算机可读指令被一个或多个处理器执行时，使得所述一个或多个处理器还执行如下步骤：
判断所述数组的存储位是否存储满，若否，则将实时获取的所述坐标点依次存储在所述数组的尾部，若是，则删除存储在所述数组最前存储位的坐标点且在所述数组的尾部压入新的坐标点。
进一步地，该计算机可读指令被一个或多个处理器执行时，使得所述一个或多个处理器还执行如下步骤：
对所述鼠标的运动轨迹添加预设的特效，并在所述画布中显示所述特效。
进一步地，该计算机可读指令被一个或多个处理器执行时，使得所述一个或多个处理器还执行如下步骤：
将所述数组中存储的两相邻坐标点依次连接成线段，以形成所述鼠标的运动轨迹时，依次加粗连接形成的各个所述线段。
本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机可读指令来指令相关的硬件来完成，所述的计算机可读指令可存储于一非易失性计算机可读取存储介质中，该计算机可读指令在执行时，可包括如上述各方法的实施例的流程。其中，本申请所提供的各实施例中所使用的对存储器、存储、数据库或其它介质的任何引用，均可包括非易失性和/或易失性存储器。非易失性存储器可包括只读存储器（ROM）、可编程ROM（PROM）、电可编程ROM（EPROM）、电可擦除可编程ROM（EEPROM）或闪存。易失性存储器可包括随机存取存储器（RAM）或者外部高速缓冲存储器。作为说明而非局限，RAM以多种形式可得，诸如静态RAM（SRAM）、动态RAM（DRAM）、同步DRAM（SDRAM）、双数据率SDRAM（DDRSDRAM）、增强型SDRAM（ESDRAM）、同步链路（Synchlink） DRAM（SLDRAM）、存储器总线（Rambus）直接RAM（RDRAM）、直接存储器总线动态RAM（DRDRAM）、以及存储器总线动态RAM（RDRAM）等。
所属领域的技术人员可以清楚地了解到，为了描述的方便和简洁，仅以上述各功能单元、模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能单元、模块完成，即将所述装置的内部结构划分成不同的功能单元或模块，以完成以上描述的全部或者部分功能。
以上所述实施例仅用以说明本申请的技术方案，而非对其限制；尽管参照前述实施例对本申请进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本申请各实施例技术方案的精神和范围，均应包含在本申请的保护范围之内。

Claims (20)

  1. 一种鼠标跟随特效的实现方法，其中，所述方法包括：
    监听到鼠标操作事件时，获取鼠标在浏览器页面中操作的坐标点；
    将获取的所述坐标点按照事件发生的时间先后顺序依次存储在数组中；
    实时获取所述鼠标在所述浏览器页面经过的坐标点，将实时获取的所述坐标点更新存储在所述数组中；
    将所述数组中存储的两相邻坐标点依次连接成线段，以形成所述鼠标的运动轨迹，并将所述运动轨迹在预先创建的画布中显示；
    在所述浏览器每渲染一次页面帧时，擦除所述画布中显示的所述运动轨迹，获取所述数组中最近一次更新的所述鼠标的坐标点，循环形成所述鼠标的运动轨迹至本步骤直至所述鼠标操作事件停止。
  2. 根据权利要求1所述的鼠标跟随特效的实现方法，其中，所述方法还包括：
    根据接收的指令创建包括有预设个存储位的所述数组；
    在浏览器页面中创建用于显示所述运动轨迹的画布，将所述运动轨迹在所述画布中显示。
  3. 根据权利要求1所述的鼠标跟随特效的实现方法，其中，所述将获取的所述坐标点按照事件发生的时间先后顺序依次存储在数组中的步骤包括：
    首次获取所述鼠标在所述浏览器页面中操作的坐标点时，将最先获取的所述鼠标的坐标点存储在所述数组的最前存储位；
    按照获取所述坐标点的时间先后顺序在所述存储位中依次往后存储所述坐标点。
  4. 根据权利要求1所述的鼠标跟随特效的实现方法，其中，所述将实时获取的所述坐标点更新存储在所述数组中的步骤进一步包括：
    判断所述数组的存储位是否存储满，若否，则将实时获取的所述坐标点依次存储在所述数组的尾部，若是，则删除存储在所述数组最前存储位的坐标点且在所述数组的尾部压入新的坐标点。
  5. 根据权利要求1至4任一项所述的鼠标跟随特效的实现方法，其中，所述方法还包括：
    对所述鼠标的运动轨迹添加预设的特效，并在所述画布中显示所述特效。
  6. 根据权利要求5所述的鼠标跟随特效的实现方法，其中，所述对所述鼠标的运动轨迹添加预设的特效的步骤包括：
    将所述数组中存储的两相邻坐标点依次连接成线段，以形成所述鼠标的运动轨迹时，依次加粗连接形成的各个所述线段。
  7. 一种鼠标跟随特效的实现装置，其中，所述装置包括：
    鼠标监听模块，用于监听到鼠标操作事件时，获取鼠标在浏览器页面中操作的坐标点；
    坐标存储模块，用于将获取的所述坐标点按照事件发生的时间先后顺序依次存储在数组中；
    更新模块，用于实时获取所述鼠标在所述浏览器页面经过的坐标点，将实时获取的所述坐标点更新存储在所述数组中；
    显示模块，用于将所述数组中存储的两相邻坐标点依次连接成线段，以形成所述鼠标的运动轨迹，并将所述运动轨迹在预先创建的画布中显示；
    循环模块，用于在所述浏览器每渲染一次页面帧时，擦除所述画布中显示的所述运动轨迹，获取所述数组中最近一次更新的所述鼠标的坐标点，循环形成所述鼠标的运动轨迹至本步骤。
  8. 根据权利要求7所述的鼠标跟随特效的实现装置，其中，所述更新模块包括：
    判断单元，用于判断所述数组的存储位是否存储满，若否，则将实时获取的所述坐标点依次存储在所述数组的尾部，若是，则删除存储在所述数组最前存储位的坐标点且在所述数组的尾部压入新的坐标点。
  9. 一种计算机设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机可读指令，其中，所述处理器执行所述计算机可读指令时实现如下步骤:
    监听到鼠标操作事件时，获取鼠标在浏览器页面中操作的坐标点；
    将获取的所述坐标点按照事件发生的时间先后顺序依次存储在数组中；
    实时获取所述鼠标在所述浏览器页面经过的坐标点，将实时获取的所述坐标点更新存储在所述数组中；
    将所述数组中存储的两相邻坐标点依次连接成线段，以形成所述鼠标的运动轨迹，并将所述运动轨迹在预先创建的画布中显示；
    在所述浏览器每渲染一次页面帧时，擦除所述画布中显示的所述运动轨迹，获取所述数组中最近一次更新的所述鼠标的坐标点，循环形成所述鼠标的运动轨迹至本步骤直至所述鼠标操作事件停止。
  10. 根据权利要求9所述的计算机设备，其中，所述处理器执行所述计算机可读指令时还实现如下步骤：
    根据接收的指令创建包括有预设个存储位的所述数组；
    在浏览器页面中创建用于显示所述运动轨迹的画布，将所述运动轨迹在所述画布中显示。
  11. 根据权利要求9所述的计算机设备，其中，所述处理器执行所述计算机可读指令时还实现如下步骤：
    首次获取所述鼠标在所述浏览器页面中操作的坐标点时，将最先获取的所述鼠标的坐标点存储在所述数组的最前存储位；
    按照获取所述坐标点的时间先后顺序在所述存储位中依次往后存储所述坐标点。
  12. 根据权利要求9所述的计算机设备，其中，所述处理器执行所述计算机可读指令时还实现如下步骤：
    判断所述数组的存储位是否存储满，若否，则将实时获取的所述坐标点依次存储在所述数组的尾部，若是，则删除存储在所述数组最前存储位的坐标点且在所述数组的尾部压入新的坐标点。
  13. 根据权利要求9至12任一项所述的计算机设备，其中，所述处理器执行所述计算机可读指令时还实现如下步骤：
    对所述鼠标的运动轨迹添加预设的特效，并在所述画布中显示所述特效。
  14. 根据权利要求13所述的计算机设备，其中，所述处理器执行所述计算机可读指令时还实现如下步骤：
    将所述数组中存储的两相邻坐标点依次连接成线段，以形成所述鼠标的运动轨迹时，依次加粗连接形成的各个所述线段。
  15. 一个或多个存储有计算机可读指令的可读存储介质，所述计算机可读指令被一个或多个处理器执行时，使得所述一个或多个处理器执行如下步骤：
    监听到鼠标操作事件时，获取鼠标在浏览器页面中操作的坐标点；
    将获取的所述坐标点按照事件发生的时间先后顺序依次存储在数组中；
    实时获取所述鼠标在所述浏览器页面经过的坐标点，将实时获取的所述坐标点更新存储在所述数组中；
    将所述数组中存储的两相邻坐标点依次连接成线段，以形成所述鼠标的运动轨迹，并将所述运动轨迹在预先创建的画布中显示；
    在所述浏览器每渲染一次页面帧时，擦除所述画布中显示的所述运动轨迹，获取所述数组中最近一次更新的所述鼠标的坐标点，循环形成所述鼠标的运动轨迹至本步骤直至所述鼠标操作事件停止。
  16. 根据权利要求15所述的一个或多个存储有计算机可读指令的可读存储介质，其中，所述计算机可读指令被一个或多个处理器执行时，使得所述一个或多个处理器还执行如下步骤：
    根据接收的指令创建包括有预设个存储位的所述数组；
    在浏览器页面中创建用于显示所述运动轨迹的画布，将所述运动轨迹在所述画布中显示。
  17. 根据权利要求15所述的一个或多个存储有计算机可读指令的可读存储介质，其中，所述计算机可读指令被一个或多个处理器执行时，使得所述一个或多个处理器还执行如下步骤：
    首次获取所述鼠标在所述浏览器页面中操作的坐标点时，将最先获取的所述鼠标的坐标点存储在所述数组的最前存储位；
    按照获取所述坐标点的时间先后顺序在所述存储位中依次往后存储所述坐标点。
  18. 根据权利要求15所述的一个或多个存储有计算机可读指令的可读存储介质，其中，所述计算机可读指令被一个或多个处理器执行时，使得所述一个或多个处理器还执行如下步骤：
    判断所述数组的存储位是否存储满，若否，则将实时获取的所述坐标点依次存储在所述数组的尾部，若是，则删除存储在所述数组最前存储位的坐标点且在所述数组的尾部压入新的坐标点。
  19. 根据权利要求15至18任一项所述的一个或多个存储有计算机可读指令的可读存储介质，其中，所述计算机可读指令被一个或多个处理器执行时，使得所述一个或多个处理器还执行如下步骤：
    对所述鼠标的运动轨迹添加预设的特效，并在所述画布中显示所述特效。
  20. 根据权利要求19所述的一个或多个存储有计算机可读指令的可读存储介质，其中，所述计算机可读指令被一个或多个处理器执行时，使得所述一个或多个处理器还执行如下步骤：
    将所述数组中存储的两相邻坐标点依次连接成线段，以形成所述鼠标的运动轨迹时，依次加粗连接形成的各个所述线段。
     
PCT/CN2020/118002 2020-04-28 2020-09-27 鼠标跟随特效的实现方法、装置、计算机设备及存储介质 WO2021218017A1 (zh)

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN202010350315.4A CN111666007A (zh) 2020-04-28 2020-04-28 鼠标跟随特效的实现方法、装置、计算机设备及存储介质
CN202010350315.4 2020-04-28

Publications (1)

Publication Number Publication Date
WO2021218017A1 true WO2021218017A1 (zh) 2021-11-04

Family

ID=72383006

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2020/118002 WO2021218017A1 (zh) 2020-04-28 2020-09-27 鼠标跟随特效的实现方法、装置、计算机设备及存储介质

Country Status (2)

Country Link
CN (1) CN111666007A (zh)
WO (1) WO2021218017A1 (zh)

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114648603A (zh) * 2022-05-19 2022-06-21 杭州比智科技有限公司 一种基于canvas与echarts实现飞线动效的方法及系统
CN117241090A (zh) * 2023-11-15 2023-12-15 广东朝歌智慧互联科技有限公司 一种视频流中目标区域的信息生成方法和装置

Families Citing this family (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111666007A (zh) * 2020-04-28 2020-09-15 平安科技（深圳）有限公司 鼠标跟随特效的实现方法、装置、计算机设备及存储介质
CN112135041B (zh) * 2020-09-18 2022-05-06 北京达佳互联信息技术有限公司 一种人脸特效的处理方法及装置、存储介质
CN112346635A (zh) * 2020-10-22 2021-02-09 杭州安恒信息技术股份有限公司 基于svg实现滑块效果的方法、装置和计算机设备
CN113608499B (zh) * 2021-08-26 2022-08-26 江西理工大学 一种提升二维运动流畅程度的方法
CN115268720B (zh) * 2022-08-16 2024-06-11 北京尽微致广信息技术有限公司 一种页面渲染方法、装置、设备及可读存储介质

Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103399640A (zh) * 2013-08-16 2013-11-20 贝壳网际（北京）安全技术有限公司 根据用户手势进行控制的方法、装置和客户端
CN105487687A (zh) * 2015-11-23 2016-04-13 广州视睿电子科技有限公司 一种笔迹显示方法和装置
CN111666007A (zh) * 2020-04-28 2020-09-15 平安科技（深圳）有限公司 鼠标跟随特效的实现方法、装置、计算机设备及存储介质

Family Cites Families (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105677169A (zh) * 2014-11-19 2016-06-15 阿里巴巴集团控股有限公司 鼠标指针自动跟随光标的方法及装置
CN108874136B (zh) * 2018-06-13 2022-02-18 北京百度网讯科技有限公司 动态图像生成方法、装置、终端和存储介质
CN109646957B (zh) * 2018-12-19 2022-03-25 北京像素软件科技股份有限公司 拖尾特效实现方法及装置
CN111054072B (zh) * 2019-12-17 2023-11-07 米哈游科技（上海）有限公司 一种角色模型拖尾的方法、装置、设备及存储介质

Patent Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103399640A (zh) * 2013-08-16 2013-11-20 贝壳网际（北京）安全技术有限公司 根据用户手势进行控制的方法、装置和客户端
CN105487687A (zh) * 2015-11-23 2016-04-13 广州视睿电子科技有限公司 一种笔迹显示方法和装置
CN111666007A (zh) * 2020-04-28 2020-09-15 平安科技（深圳）有限公司 鼠标跟随特效的实现方法、装置、计算机设备及存储介质

Non-Patent Citations (2)

* Cited by examiner, † Cited by third party
Title
YAMAMOTO NOAH: "Mouse color trajectory animation ", 6 May 2019 (2019-05-06), XP055861636, Retrieved from the Internet <URL:https://python.freelycode.com/contribution/detail/1562> *
YAMAMOTO NOAH: "Mouse Trail", 1 February 2019 (2019-02-01), XP055861639, Retrieved from the Internet <URL:https://noahyamamoto.com/blog/mousetrailanimation> *

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114648603A (zh) * 2022-05-19 2022-06-21 杭州比智科技有限公司 一种基于canvas与echarts实现飞线动效的方法及系统
CN117241090A (zh) * 2023-11-15 2023-12-15 广东朝歌智慧互联科技有限公司 一种视频流中目标区域的信息生成方法和装置
CN117241090B (zh) * 2023-11-15 2024-06-11 广东朝歌智慧互联科技有限公司 一种视频流中目标区域的信息生成方法和装置

Also Published As

Publication number Publication date
CN111666007A (zh) 2020-09-15

Similar Documents

Publication Publication Date Title
WO2021218017A1 (zh) 鼠标跟随特效的实现方法、装置、计算机设备及存储介质
JP5854442B2 (ja) 複数キャラクターを連続筆記する手書き入力方法
WO2018196457A1 (zh) 一种弹幕显示方法及电子设备
KR101858420B1 (ko) 스크롤가능한 그리드 상에서의 잘린 컨텐츠의 노출
CN110069204B (zh) 基于书写轨迹的图形处理方法、装置、设备及存储介质
US9207858B2 (en) Method and apparatus for drawing and erasing calligraphic ink objects on a display surface
CN113452941B (zh) 视频生成方法、装置、电子设备及存储介质
CN103576848B (zh) 手势操作方法和手势操作装置
WO2016082586A1 (zh) 网页更新方法及装置
CN104243668B (zh) 一种基于安卓操作系统的视频全屏播放方法及装置
WO2021098878A1 (zh) 一种预测手写笔绘制点的方法和设备
US10957285B2 (en) Method and system for playing multimedia data
CN112506413A (zh) 触控点预测方法、装置、终端设备及计算机可读存储介质
CN109215098B (zh) 笔迹擦除方法和装置
TW201706822A (zh) 介面調整方法及電子裝置
JP2023552591A (ja) ビデオ処理方法及び装置、電子設備及びコンピュータ読み取り可能な記憶媒体
WO2024174924A1 (zh) 页面显示方法、装置、电子设备和可读存储介质
CN112000259A (zh) 一种基于移动终端触摸事件控制摄像头的方法及装置
CN109753333B (zh) 一种界面布局方法、装置、设备及介质
US20220319086A1 (en) Method and apparatus for controlling animation refreshing, computer device, and storage medium
JPWO2004095361A1 (ja) オンライン手書き文字入力装置及び方法
CN115495307A (zh) 一种传屏数据的处理方法、装置、计算机可读存储介质及系统
CN112819839A (zh) 基于b样条曲线的自定义抠图方法、装置、系统及介质
CN110989895B (zh) 一种控件显示状态检测方法及装置
CN108491139B (zh) 一种对象固定方法、装置、终端设备及存储介质

Legal Events

Date Code Title Description
121 Ep: the epo has been informed by wipo that ep was designated in this application

Ref document number: 20934009

Country of ref document: EP

Kind code of ref document: A1

NENP Non-entry into the national phase

Ref country code: DE

122 Ep: pct application non-entry in european phase

Ref document number: 20934009

Country of ref document: EP

Kind code of ref document: A1