CN112558961A - Method and device for presenting guide mask, electronic equipment and storage medium - Google Patents
Method and device for presenting guide mask, electronic equipment and storage medium Download PDFInfo
- Publication number
- CN112558961A CN112558961A CN202011555007.1A CN202011555007A CN112558961A CN 112558961 A CN112558961 A CN 112558961A CN 202011555007 A CN202011555007 A CN 202011555007A CN 112558961 A CN112558961 A CN 112558961A
- Authority
- CN
- China
- Prior art keywords
- mask
- page
- picture
- guide
- component
- 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 49
- 230000006870 function Effects 0.000 claims abstract description 36
- 230000005540 biological transmission Effects 0.000 claims description 11
- 238000013507 mapping Methods 0.000 claims description 8
- 241000968591 Haemanthus albiflos Species 0.000 claims description 6
- 238000004458 analytical method Methods 0.000 claims description 6
- 238000009877 rendering Methods 0.000 claims 5
- 230000008447 perception Effects 0.000 abstract description 4
- 230000000873 masking effect Effects 0.000 description 9
- 230000008569 process Effects 0.000 description 8
- 238000005516 engineering process Methods 0.000 description 7
- 238000010586 diagram Methods 0.000 description 6
- 230000008859 change Effects 0.000 description 3
- 238000004891 communication Methods 0.000 description 3
- 238000004590 computer program Methods 0.000 description 3
- 230000008878 coupling Effects 0.000 description 3
- 238000010168 coupling process Methods 0.000 description 3
- 238000005859 coupling reaction Methods 0.000 description 3
- 238000011161 development Methods 0.000 description 3
- 238000012545 processing Methods 0.000 description 3
- 230000006399 behavior Effects 0.000 description 2
- 230000008901 benefit Effects 0.000 description 2
- 238000004364 calculation method Methods 0.000 description 2
- 238000010276 construction Methods 0.000 description 2
- 230000000694 effects Effects 0.000 description 2
- 230000009471 action Effects 0.000 description 1
- 230000006978 adaptation Effects 0.000 description 1
- 238000005562 fading Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 238000005457 optimization Methods 0.000 description 1
- 239000003973 paint Substances 0.000 description 1
- 238000010422 painting Methods 0.000 description 1
- 230000004044 response Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/34—Graphical or visual programming
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/20—Software design
- G06F8/24—Object-oriented
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
Abstract
The application provides a method and a device for presenting a guide mask, wherein the method comprises the following steps: for one or more page elements of a montage layout to be displayed in a specified page of an application program, acquiring the size of the page elements and the positions of the page elements in the page; creating a pure transparent color mask component consistent with the size of the page, and laying out one or more mask pictures in the pure transparent color mask component; and calling an editing interface, editing the mask picture laid out in the pure transparent mask component, and popping up the mask picture under the condition that the application program presents a specified page. The method and the device can ensure that the user behavior guidance is conveniently and accurately carried out and the perception strength of key functions is improved, so that the product service requirements are quickly, effectively and accurately met.
Description
Technical Field
The present application relates to the field of computer technologies, and in particular, to a method and an apparatus for presenting a guide mask, an electronic device, and a storage medium.
Background
With the increasing popularization of the mobile internet, the development cycle of a mobile application program (App) product is shorter and shorter, the iteration is fast, and each version of release inevitably adds some new functions or modifies old functions, wherein the functions are displayed through each page of the application program. In order to guide the user to use, modify the page change caused by the old function, or add the function newly, taking a mobile phone as an example, a mobile phone application program generally pops up a mask diagram to cover a mobile phone screen on the page of the application program to tell the user about the change or the function introduction, thereby improving the user experience.
The current market can be roughly divided into two schemes based on flute to realize the function of guiding mask:
1. the method is realized by using a pure Flutter technology, and the problems of dynamically acquiring the guide function coordinate, statically using a UI picture, comprehensively considering compatibility under different resolutions and the like are not considered, so that the problems of configurability, reusability, accurate element positioning, quick response and the like can be flexibly and quickly realized when different requirements cannot be met, the problem of seriously influencing the working efficiency is solved, and great passivity can be brought to user experience and products.
2. By means of the technical support of the native APP, the function is realized through the native end of the APP, and then after the method is provided externally, the flutter calls the native method to change phases. Although this scheme can perfectly solve the partial problem among above-mentioned scheme 1, it is stronger to native end dependence, needs Android and iOS bi-polar development to increase development cost, be unfavorable for solving the product fast and describe the requirement, easily receive the native end of APP influence simultaneously, bring uncontrollable or unpredictable's problem.
Disclosure of Invention
The application aims to provide a method and a system for presenting a guide mask.
A first aspect of the present application provides a method of presenting a guide mask, comprising:
for one or more page elements of a montage layout to be displayed in a specified page of an application program, acquiring the size of the page elements and the positions of the page elements in the page;
creating a pure transparent color mask component consistent with the size of the page, and laying out one or more mask pictures in the pure transparent color mask component;
and calling an editing interface, editing the mask picture laid out in the pure transparent mask component, and popping up the mask picture under the condition that the application program presents the specified page.
In some embodiments of the present application, the obtaining the size and the position of the page element in the page includes:
converting the stored mask configuration information into a plurality of mask classes, and forming a mapping relation table in which a plurality of page elements and one or more mask classes are mapped one by one; the mask class comprises a mask picture or a network address of the mask picture and a layout position of the mask picture in the page;
and determining a mask class corresponding to a page element of a mask picture to be displayed in the page according to the mapping relation table, acquiring the mask picture according to the mask class and determining the layout position of the mask picture in the pure transparent mask component.
In some embodiments of the present application, the mask class further includes an identifier of a page element guided by the mask;
the mask picture comprises an arrow;
the step of laying out one or more mask pictures in the pure transparent color mask assembly comprises: setting a mask picture in the pure transparent color mask component, and enabling an arrow in the mask picture to point to a page element with the identification.
In some embodiments of the present application, the laying out one or more mask pictures in the pure transparent color mask assembly comprises:
accurate coordinates are obtained based on a GlobalKey instance in the widget, the coordinates are converted into actual pixel values, the range of a transparent guide area needing to be drawn is controlled through a parameter transmission mode, and a guide information prompt position is controlled.
In some embodiments of the present application, the editing the mask picture laid out in the transparent mask component includes:
and combining the acquired coordinate values, setting the range of the current function guide area, and drawing the required graph by using a canvas, a Paint brush and a third-order Bessel curve cubicTo.
In some embodiments of the present application, the editing the mask picture laid out in the transparent mask component further includes:
and dynamically setting prompt contents in a parameter transmission mode, and adding a next step or canceling an operation button, wherein the next step operation button is used for switching the current guide mask function, and the canceling operation button is used for finishing the current guide mask function.
In some embodiments of the present application, the method comprises:
and (4) performing routing when the page init is needed by using a router mode, and realizing a mask basic function by routing the mask page.
A second aspect of the present application provides an apparatus for presenting a guide mask, comprising:
the front-end analysis module is used for acquiring the size and the position of one or more page elements of a montage layout to be displayed in a specified page of an application program;
the front-end display module is used for creating a pure transparent color mask component consistent with the size of the page and laying out one or more mask pictures in the pure transparent color mask component; and calling an editing interface, editing the mask picture laid out in the pure transparent mask component, and popping up the mask picture under the condition that the application program presents the specified page.
A third aspect of the present application provides an electronic device comprising:
at least one processor; and the number of the first and second groups,
a memory communicatively coupled to the at least one processor; wherein the memory stores instructions executable by the one processor to cause the at least one processor to perform the method described above.
A fourth aspect of the present application provides a non-transitory computer-readable storage medium storing computer instructions for causing a computer to perform the method described above.
Compared with the prior art, according to the technical scheme, accurate coordinates are obtained based on a Globalkey instance in a widget and are converted into actual pixel values, the range of a transparent guide area needs to be drawn through parameter transmission, the guide information prompt position is dynamically and flexibly controlled, a canvas technology is adopted, a Paint brush and a third-order Bezier curve cubico are used for drawing a needed graph, the flutter routing characteristic is combined, full-screen mask covering is carried out through a transparent routing mode, return button interception is achieved through WillPopScope, user behavior guidance is conveniently and accurately carried out, the perception strength of key functions is improved, and accordingly the product service requirements are quickly, effectively and accurately met.
Drawings
Various other advantages and benefits will become apparent to those of ordinary skill in the art upon reading the following detailed description of the preferred embodiments. The drawings are only for purposes of illustrating the preferred embodiments and are not to be construed as limiting the application. Also, like reference numerals are used to refer to like parts throughout the drawings. In the drawings:
FIG. 1 illustrates a flow chart of a method of presenting a guide mask provided by some embodiments of the present application;
FIG. 2 illustrates a block diagram of a system for presenting a guide mask provided by some embodiments of the present application;
fig. 3 illustrates a guide mask basic effect presentation provided by some embodiments of the present application.
Detailed Description
Exemplary embodiments of the present disclosure will be described in more detail below with reference to the accompanying drawings. While exemplary embodiments of the present disclosure are shown in the drawings, it should be understood that the present disclosure may be embodied in various forms and should not be limited to the embodiments set forth herein. Rather, these embodiments are provided so that this disclosure will be thorough and complete, and will fully convey the scope of the disclosure to those skilled in the art.
It is to be noted that, unless otherwise specified, technical or scientific terms used herein shall have the ordinary meaning as understood by those skilled in the art to which this application belongs.
In addition, the terms "first" and "second", etc. are used to distinguish different objects, rather than to describe a particular order. Furthermore, the terms "include" and "have," as well as any variations thereof, are intended to cover non-exclusive inclusions. For example, a process, method, system, article, or apparatus that comprises a list of steps or elements is not limited to only those steps or elements listed, but may alternatively include other steps or elements not listed, or inherent to such process, method, article, or apparatus.
The embodiment of the application provides a method for presenting a guide mask, which is exemplarily described below by combining the embodiment with the accompanying drawings.
As shown in fig. 1 to 2, a method of presenting a guide mask of the present application may include:
it will be appreciated that the acquisition assembly exact coordinates: and performing widget binding through a Global Key instance, acquiring an accurate position set (capable of converting coordinates and pixel values), and transmitting the accurate position set as a parameter to a mask component calling method. The method comprises the steps of obtaining accurate coordinates based on a GlobalKey example in the widget, converting the accurate coordinates into actual pixel values, accurately controlling the range of a transparent guide area to be drawn through a parameter transmission mode, and dynamically and flexibly controlling a guide information prompt position.
In this embodiment, the mask map is not a full-screen-size picture, but is arranged in the pure transparent mask component according to a predetermined position, and the pure transparent mask component is popped up by using a full-screen dialog box, so that the pure transparent mask component contains the mask map, and after the full-screen dialog box is popped up, the pure transparent mask component automatically adapts to the size of the screen, so that the mask map can be displayed in an adaptation manner with the screen under the condition of different screen sizes.
In some embodiments, the obtaining the size and the position of the page element in the page includes:
step 111, converting the stored mask configuration information into a plurality of mask classes, and forming a mapping relation table in which a plurality of page elements and one or more mask classes are mapped one by one; the mask class comprises a mask picture or a network address of the mask picture, and also comprises a layout position of the mask picture in a page;
when the application program is started, a server side request is carried out through http/https, and if the server has configuration, the mask configuration information of the server side is downloaded. And merging the downloaded mask configuration information of the server side and the mask configuration information of the local cache to form local cache configuration.
In the functional page needing to display the mask layout, the front-end display module judges whether the page needs to display the mask layout or not, and if the mask layout needs to be displayed, the front-end mask processing module processes the page. After the mask is displayed, a mask mark is set. When the application program presents the page, whether the page needs to present the mask layout is judged, if yes, whether a mask mark exists is judged, if yes, the mask layout is shown, and therefore the mask layout is not presented any more. In order to enable a user to see the masking layout again, an option for clearing the masking mark is added in the setting function of the application program, and the user can use the option to clear the masking mark after seeing the masking layout, so that the masking mark does not exist when judging whether the masking mark exists or not, the masking layout is displayed again, and the front-end analysis module is called to perform the following steps. Therefore, whether the mask layout needs to be displayed or not is judged according to the mask configuration information and the mask marks, so that the judgment logic is simple, the processing is convenient, and the smooth operation of the terminal equipment is facilitated.
The front-end analysis module processes mask configuration xml information corresponding to a page needing to display a mask layout into a configuration class aiming at the page, takes an Android platform as an example, processes the mask configuration xml information into a mask Java class, and corresponds the specific mask Java class to page elements of the mask layout to be displayed in the current page one by one, so that a mapping relation table of the page elements and the mask classes is formed.
And 112, determining a mask class corresponding to a page element of a mask to be displayed in the page according to the mapping relation table, acquiring a mask picture according to the mask class and determining the layout position of the mask picture in the pure transparent mask component.
The front-end analysis module obtains the accurate layout position and size of the corresponding page of the interface element to be displayed on the page one by one through a pure transparent color mask component technology (mainly comprising Drawable graph generation, original control position calculation, control size calculation along with the size of an equipment screen and the like) provided by an Android SDK platform, and finds the corresponding mask class through a mapping relation table.
102, creating a pure transparent color mask component consistent with the size of a page, and laying out one or more mask pictures in the pure transparent color mask component;
it can be appreciated that the creation of the mask component: realizing a fully transparent mask component as a construction basis of all functional modules; realizing a basic mask: a router mode is skillfully used, routing mask pages is carried out when the page init is needed, and mask basic functions are achieved.
In the embodiment, a pure Flutter technology is used, accurate coordinates are obtained based on a GlobalKey instance in a widget, the coordinates are converted into actual pixel values, the range of a transparent guide area needs to be drawn is accurately controlled through a parameter transmission mode, and the guide information prompt position is dynamically and flexibly controlled.
And 103, calling an editing interface, editing the mask picture laid out in the pure transparent mask component, and popping up the mask picture under the condition that the application program presents a specified page.
It can be understood that the real mask pattern is drawn: setting the range (the extension width and the extension height) of the current function guide area simultaneously by combining the acquired coordinate values, and drawing a required graph by using a canvas, a Paint brush and a three-order Bessel curve cubicTo; and (3) adding guide texts and logic: and dynamically setting prompt contents in a parameter transmission mode. And adding operation buttons such as next step or cancel, and switching or ending the current guide mask function.
In the embodiment, a fully transparent mask component is realized and used as a construction basis of all functional modules; a router mode is skillfully used, when the page init is needed, the routing mask page realizes the basic function of mask masking; performing widget binding through a GlobalKey instance, acquiring an accurate position set (capable of converting coordinates and pixel values), and transmitting the position set as a parameter to a mask component calling method; setting the range (the extension width and the extension height) of the current function guide area simultaneously by combining the acquired coordinate values, and drawing a required graph by using a canvas, a Paint brush and a three-order Bessel curve cubicTo; and (3) adding guide texts and logic: and dynamically setting prompt contents in a parameter transmission mode. And adding operation buttons such as next step or cancel, and switching or ending the current guide mask function.
In some variations of embodiments of the present application, laying out one or more mask pictures in the clear transparent color mask assembly comprises:
accurate coordinates are obtained based on a GlobalKey instance in the widget, the coordinates are converted into actual pixel values, the range of a transparent guide area needing to be drawn is controlled through a parameter transmission mode, and the guide information prompt position is dynamically and flexibly controlled.
Editing the mask picture laid out in the pure transparent color mask component, comprising the following steps:
and combining the acquired coordinate values, setting the range of the current function guide area, and drawing the required graph by using a canvas, a Paint brush and a third-order Bessel curve cubicTo.
In this embodiment, adopt canvas technique, use Paint painting brush and third-order bezier curve cubicTo to draw required figure to combine flute routing characteristic, adopt transparent routing mode to carry out full-screen mask and cover, realize returning the button interception through willpoppype simultaneously, ensure convenient accurate user action guide of carrying on and promote key function perception dynamics, thereby realize effectively accurately satisfying the product business demand fast.
In some modified embodiments of the embodiment of the present application, the mask class further includes an identifier of a page element guided by the mask;
the mask picture comprises an arrow;
the step of laying out one or more mask pictures in the pure transparent color mask assembly comprises: the mask picture is placed in a pure transparent color mask assembly and the arrow in the mask picture is made to point to the page element with the logo.
The front-end display module pops up the control through a full-screen dialog box, and can further use an Android platform animation technology to fade in and display a mask domain pure transparent mask component, so that a user sees an accurate page mask domain guiding prompt and records a mask domain display mark; fading out is realized by adopting an animation technology when the mask image disappears, and the user experience is improved. For some mask images, arrows are included to guide page elements (e.g., button 51) to the user's attention.
In some variations of the embodiments of the present application, the editing process performed on the mask picture laid out in the mask assembly with pure transparent color further includes:
and dynamically setting prompt contents in a parameter transmission mode, and adding a next step or canceling an operation button, wherein the next step operation button is used for switching the current guide mask function, and the canceling operation button is used for finishing the current guide mask function.
As shown in fig. 2, as an implementation of the methods shown in the above figures, the present application provides an embodiment of a bus route optimization system, and the embodiment of the system corresponds to the embodiment of the method shown in fig. 1.
The front-end analysis module 211 is configured to, for one or more page elements to be displayed in a montage layout in a specified page of an application program, obtain sizes of the page elements and positions of the page elements in the page;
a front-end presentation module 212 for creating a clear transparent color mask assembly in accordance with the size of the page, in which one or more mask pictures are laid out; and calling an editing interface, editing the mask picture laid out in the pure transparent mask component, and popping up the mask picture under the condition that the application program presents a specified page.
As shown in fig. 3, a basic effect display of the method for presenting the guiding mask is shown, in the drawing, after an APP application is upgraded, a page is entered and popped up, and the page needs to present the mask. The button 'one-key quotation' in the page needs to be a page element needing to display the Mongolian picture; the montage area shown is "quick quote, you | in this case! The pure transparent color mask component displayed in full screen is set to be in a semi-transparent state, and is set to be in a full-transparent state at a button needing to display the mask picture, so that a user is prompted to pay attention to the button. And a semitransparent black picture, wherein one area of the semitransparent black picture is transparent and is provided with a description, and the prompt of switching different positions can be carried out by clicking the next step, or the prompt information can be skipped by clicking a fixed button. This is the most common user-guided masking function.
In one embodiment, a computer device is proposed, the computer device comprising a memory, a processor and a computer program stored on the memory and executable on the processor, the processor implementing the following steps when executing the computer program: for one or more page elements of a montage layout to be displayed in a specified page of an application program, acquiring the size of the page elements and the positions of the page elements in the page; creating a pure transparent color mask component consistent with the size of the page, and laying out one or more mask pictures in the pure transparent color mask component; and calling an editing interface, editing the mask picture laid out in the pure transparent mask component, and popping up the mask picture under the condition that the application program presents a specified page.
In one embodiment, a storage medium is provided that stores computer-readable instructions that, when executed by one or more processors, cause the one or more processors to perform the steps of: for one or more page elements of a montage layout to be displayed in a specified page of an application program, acquiring the size of the page elements and the positions of the page elements in the page; creating a pure transparent color mask component consistent with the size of the page, and laying out one or more mask pictures in the pure transparent color mask component; and calling an editing interface, editing the mask picture laid out in the pure transparent mask component, and popping up the mask picture under the condition that the application program presents a specified page.
It should be noted that the flowchart and block diagrams in the figures illustrate the architecture, functionality, and operation of possible implementations of systems, methods and computer program products according to various embodiments of the present application. In this regard, each block in the flowchart or block diagrams may represent a module, segment, or portion of code, which comprises one or more executable instructions for implementing the specified logical function(s). It should also be noted that, in some alternative implementations, the functions noted in the block may occur out of the order noted in the figures. For example, two blocks shown in succession may, in fact, be executed substantially concurrently, or the blocks may sometimes be executed in the reverse order, depending upon the functionality involved. It will also be noted that each block of the block diagrams and/or flowchart illustration, and combinations of blocks in the block diagrams and/or flowchart illustration, can be implemented by special purpose hardware-based systems which perform the specified functions or acts, or combinations of special purpose hardware and computer instructions.
It is clear to those skilled in the art that, for convenience and brevity of description, the specific working processes of the above-described systems, apparatuses and units may refer to the corresponding processes in the foregoing method embodiments, and are not described herein again.
In the several embodiments provided in the present application, it should be understood that the disclosed apparatus and method may be implemented in other ways. The above-described embodiments of the apparatus are merely illustrative, and for example, the division of the units is only one logical division, and there may be other divisions when actually implemented, and for example, a plurality of units or components may be combined or integrated into another system, or some features may be omitted, or not executed. In addition, the shown or discussed mutual coupling or direct coupling or communication connection may be an indirect coupling or communication connection of devices or units through some communication interfaces, and may be in an electrical, mechanical or other form.
The units described as separate parts may or may not be physically separate, and parts displayed as units may or may not be physical units, may be located in one place, or may be distributed on a plurality of network units. Some or all of the units can be selected according to actual needs to achieve the purpose of the solution of the embodiment.
In addition, functional units in the embodiments of the present application may be integrated into one processing unit, or each unit may exist alone physically, or two or more units are integrated into one unit.
The functions, if implemented in the form of software functional units and sold or used as a stand-alone product, may be stored in a computer readable storage medium. Based on such understanding, the technical solution of the present application or portions thereof that substantially contribute to the prior art may be embodied in the form of a software product stored in a storage medium and including instructions for causing a computer device (which may be a personal computer, a server, or a network device) to execute all or part of the steps of the method according to the embodiments of the present application. And the aforementioned storage medium includes: a U-disk, a removable hard disk, a Read-Only Memory (ROM), a Random Access Memory (RAM), a magnetic disk or an optical disk, and other various media capable of storing program codes.
Finally, it should be noted that: the above embodiments are only used for illustrating the technical solutions of the present application, and not for limiting the same; although the present application has been described in detail with reference to the foregoing embodiments, it should be understood by those of ordinary skill in the art that: the technical solutions described in the foregoing embodiments may still be modified, or some or all of the technical features may be equivalently replaced; such modifications and substitutions do not depart from the spirit and scope of the present disclosure, and the present disclosure should be construed as being covered by the claims and the specification. The method and the device ensure that the user behavior guidance is conveniently and accurately carried out and the perception strength of key functions is improved, so that the product service requirements are quickly, effectively and accurately met.
Claims (10)
1. A method of presenting a guide mask, comprising:
for one or more page elements of a montage layout to be displayed in a specified page of an application program, acquiring the size of the page elements and the positions of the page elements in the page;
creating a pure transparent color mask component consistent with the size of the page, and laying out one or more mask pictures in the pure transparent color mask component;
and calling an editing interface, editing the mask picture laid out in the pure transparent mask component, and popping up the mask picture under the condition that the application program presents the specified page.
2. The method of rendering a guide mask of claim 1, wherein said obtaining a size of the page element and a position in the page comprises:
converting the stored mask configuration information into a plurality of mask classes, and forming a mapping relation table in which a plurality of page elements and one or more mask classes are mapped one by one; the mask class comprises a mask picture or a network address of the mask picture and a layout position of the mask picture in the page;
and determining a mask class corresponding to a page element of a mask picture to be displayed in the page according to the mapping relation table, acquiring the mask picture according to the mask class and determining the layout position of the mask picture in the pure transparent mask component.
3. The method of rendering a guide mask according to claim 2,
the mask type also comprises an identifier of a page element guided by the mask pattern;
the mask picture comprises an arrow;
the step of laying out one or more mask pictures in the pure transparent color mask assembly comprises: setting a mask picture in the pure transparent color mask component, and enabling an arrow in the mask picture to point to a page element with the identification.
4. The method of rendering a guide mask as claimed in claim 1, wherein said laying out one or more mask pictures in the clear transparent color mask assembly comprises:
accurate coordinates are obtained based on a GlobalKey instance in the widget, the coordinates are converted into actual pixel values, the range of a transparent guide area needing to be drawn is controlled through a parameter transmission mode, and a guide information prompt position is controlled.
5. The method of rendering a guide mask as claimed in claim 4, wherein said editing the mask picture laid out in the clear transparent color mask component comprises:
and combining the acquired coordinate values, setting the range of the current function guide area, and drawing the required graph by using a canvas, a Paint brush and a third-order Bessel curve cubicTo.
6. The method of rendering a guide mask as claimed in claim 1, wherein said editing the mask picture laid out in the clear transparent color mask component further comprises:
and dynamically setting prompt contents in a parameter transmission mode, and adding a next step or canceling an operation button, wherein the next step operation button is used for switching the current guide mask function, and the canceling operation button is used for finishing the current guide mask function.
7. The method of presenting a guide mask as recited in claim 6, the method comprising:
and (4) performing routing when the page init is needed by using a router mode, and realizing a mask basic function by routing the mask page.
8. An apparatus for presenting a guide mask, comprising:
the front-end analysis module is used for acquiring the size and the position of one or more page elements of a montage layout to be displayed in a specified page of an application program;
the front-end display module is used for creating a pure transparent color mask component consistent with the size of the page and laying out one or more mask pictures in the pure transparent color mask component; and calling an editing interface, editing the mask picture laid out in the pure transparent mask component, and popping up the mask picture under the condition that the application program presents the specified page.
9. An electronic device, comprising:
at least one processor; and the number of the first and second groups,
a memory communicatively coupled to the at least one processor; wherein the memory stores instructions executable by the one processor to cause the at least one processor to perform the method of any one of claims 1-7.
10. A non-transitory computer-readable storage medium storing computer instructions for causing a computer to perform the method of any one of claims 1-7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011555007.1A CN112558961A (en) | 2020-12-24 | 2020-12-24 | Method and device for presenting guide mask, electronic equipment and storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011555007.1A CN112558961A (en) | 2020-12-24 | 2020-12-24 | Method and device for presenting guide mask, electronic equipment and storage medium |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN112558961A true CN112558961A (en) | 2021-03-26 |
Family
ID=75033859
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202011555007.1A Pending CN112558961A (en) | 2020-12-24 | 2020-12-24 | Method and device for presenting guide mask, electronic equipment and storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112558961A (en) |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113253898A (en) * | 2021-06-01 | 2021-08-13 | 北京城市网邻信息技术有限公司 | Guide method and device for interface interaction, electronic equipment and readable medium |
| CN113986089A (en) * | 2021-10-25 | 2022-01-28 | 北京有竹居网络技术有限公司 | Method and equipment for prohibiting page jump |
| CN114359094A (en) * | 2021-12-30 | 2022-04-15 | 网易（杭州）网络有限公司 | Image processing method, device, equipment and storage medium |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| KR20090078698A (en) * | 2008-01-15 | 2009-07-20 | 포항공과대학교 산학협력단 | Multi-platform based user interface screen editing method and device supporting concurrent editing of user interface screens |
| CN108664294A (en) * | 2017-03-29 | 2018-10-16 | 北京京东尚科信息技术有限公司 | The method and apparatus and electronic equipment and storage medium of presentation masking-out figure |
| CN111026392A (en) * | 2019-11-14 | 2020-04-17 | 北京金山安全软件有限公司 | Method and device for generating guide page and electronic equipment |
-
2020
- 2020-12-24 CN CN202011555007.1A patent/CN112558961A/en active Pending
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| KR20090078698A (en) * | 2008-01-15 | 2009-07-20 | 포항공과대학교 산학협력단 | Multi-platform based user interface screen editing method and device supporting concurrent editing of user interface screens |
| CN108664294A (en) * | 2017-03-29 | 2018-10-16 | 北京京东尚科信息技术有限公司 | The method and apparatus and electronic equipment and storage medium of presentation masking-out figure |
| CN111026392A (en) * | 2019-11-14 | 2020-04-17 | 北京金山安全软件有限公司 | Method and device for generating guide page and electronic equipment |
Non-Patent Citations (1)
| Title |
|---|
| 早起的年轻人: "Flutter新手引导蒙版（浮层）", pages 1 - 14, Retrieved from the Internet <URL:https://my.oschina.net/u/2447911/blog/4802543> * |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113253898A (en) * | 2021-06-01 | 2021-08-13 | 北京城市网邻信息技术有限公司 | Guide method and device for interface interaction, electronic equipment and readable medium |
| CN113986089A (en) * | 2021-10-25 | 2022-01-28 | 北京有竹居网络技术有限公司 | Method and equipment for prohibiting page jump |
| CN114359094A (en) * | 2021-12-30 | 2022-04-15 | 网易（杭州）网络有限公司 | Image processing method, device, equipment and storage medium |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN112558961A (en) | Method and device for presenting guide mask, electronic equipment and storage medium | |
| EP3220249B1 (en) | Method, device and terminal for implementing regional screen capture | |
| CN104574454B (en) | Image processing method and device | |
| US20150016675A1 (en) | Terminal apparatus, information processing system, and information processing method | |
| JP2011135556A (en) | Method of generating display object, digital media providing system, computer program therefor and display object | |
| US20190095075A1 (en) | Method and apparatus for setting background picture of unlocking interface of application, and electronic device | |
| KR20140038381A (en) | Systems and methods for testing content of mobile communication devices | |
| CN107301046B (en) | Icon processing method and device, computer equipment and storage medium | |
| CN105787874B (en) | Method and device for mosaic processing of screenshot | |
| CN108664294B (en) | Method and device for presenting Mongolian layout, electronic equipment and storage medium | |
| CN105444754A (en) | Navigation image display method and device | |
| CN110634102A (en) | Cross-platform certificate photo mobile terminal system based on flutter and use method thereof | |
| CN111399831A (en) | Page display method and device, storage medium and electronic device | |
| CN105466414A (en) | A navigation route recommending method and a server | |
| JP4261281B2 (en) | Skin generation method, program and apparatus | |
| US8468240B2 (en) | Locating network resources | |
| CN111833234A (en) | Image display method, image processing apparatus, and computer-readable storage medium | |
| CN109460175B (en) | Method and device for moving application icon, electronic terminal and medium | |
| JP2013045316A (en) | Image processing device and image processing method | |
| CN107608733A (en) | Image display method, device and terminal device | |
| US20170168759A1 (en) | Information processing apparatus, information processing method, and recording medium | |
| KR20130082755A (en) | Service server and method by object recognition | |
| CN110913193B (en) | Image processing method, device, apparatus and computer readable storage medium | |
| CN108449385A (en) | A kind of the video object dissemination method, device and terminal device | |
| CN113554546A (en) | Watermark drawing method and device |
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 |