CN105094838B - A kind of patterned generation method of response type and system - Google Patents
A kind of patterned generation method of response type and system Download PDFInfo
- Publication number
- CN105094838B CN105094838B CN201510498488.XA CN201510498488A CN105094838B CN 105094838 B CN105094838 B CN 105094838B CN 201510498488 A CN201510498488 A CN 201510498488A CN 105094838 B CN105094838 B CN 105094838B
- Authority
- CN
- China
- Prior art keywords
- icon
- size
- ratio
- window
- graphical
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
- 238000000034 method Methods 0.000 title claims abstract description 23
- XLYOFNOQVPJJNP-UHFFFAOYSA-N water Substances O XLYOFNOQVPJJNP-UHFFFAOYSA-N 0.000 claims 1
- 230000001419 dependent effect Effects 0.000 abstract description 2
- 238000013461 design Methods 0.000 description 4
- 230000000007 visual effect Effects 0.000 description 4
- 241000208340 Araliaceae Species 0.000 description 1
- RAQQRQCODVNJCK-JLHYYAGUSA-N N-[(4-amino-2-methylpyrimidin-5-yl)methyl]-N-[(E)-5-hydroxy-3-(2-hydroxyethyldisulfanyl)pent-2-en-2-yl]formamide Chemical compound C\C(N(Cc1cnc(C)nc1N)C=O)=C(\CCO)SSCCO RAQQRQCODVNJCK-JLHYYAGUSA-N 0.000 description 1
- 235000005035 Panax pseudoginseng ssp. pseudoginseng Nutrition 0.000 description 1
- 235000003140 Panax quinquefolius Nutrition 0.000 description 1
- 238000013459 approach Methods 0.000 description 1
- 238000011161 development Methods 0.000 description 1
- 238000010586 diagram Methods 0.000 description 1
- 235000008434 ginseng Nutrition 0.000 description 1
- 230000000750 progressive effect Effects 0.000 description 1
- 238000012800 visualization Methods 0.000 description 1
Abstract
The invention discloses a kind of patterned generation method of response type and systems, obtain targeted graphical data from physical layer interface；The targeted graphical data include: each icon vertically with the horizontal direction size ratio with the vertical size of graphical window total height and overall width horizontal size respectively, and each icon vertical position height and horizontal direction position the width ratio with the vertical position of graphical window total height and overall width horizontal position respectively, determine the total height and overall width of current Graphics window；According to the vertical size ratio of each icon and graphical window, horizontal size ratio, vertical position ratio, the total height and overall width of horizontal position ratio and current Graphics window, the corresponding position coordinates of each icon and size are calculated, and draws each icon in the current Graphics window.Each icon size and position and graphical window size ratio-dependent, the page of drafting automated to respond to the facility environment of user.
Description
Technical field
The present invention relates to internet information front end fields, more particularly to a kind of patterned generation method of response type and are
System.
Background technique
With the fast development of information age, the information content of user is growing day by day.The visualization of massive information is around " can
Read, logic it is available " purpose transmit information, uninteresting cumbersome data are switched into straightaway graphical information, improve user
Experience.
The page that traditional approach is write, for different display equipment, different mobile hand-held devices, meeting such as screen size
The case where appearance can not adapt to screen.For the screen of different resolution, the interface of fixed width just will appear
Interface it is too big and beyond screen or interface too small appearances sheet blank the case where.The facility environment of user cannot be automated toed respond to,
Keep the user experience of the visual design poor.
Summary of the invention
In view of this, can make to draw the main purpose of the present invention is to provide a kind of patterned generation method of response type
The content of pages size of system adapts to graphical window size.
To achieve the above object, the present invention provides a kind of patterned generation methods of response type, comprising:
Targeted graphical data are obtained from physical layer interface；
The targeted graphical data include: the vertical size ratio of each icon vertical direction size Yu graphical window total height
Example, the horizontal size ratio of each icon horizontal direction size and graphical window overall width, each icon vertical position
Height and the vertical position ratio of graphical window total height and each icon horizontal direction position width and graphical window
The horizontal position ratio of mouth overall width；
Determine the total height and overall width of current Graphics window；
According to the vertical size ratio of each icon and graphical window, horizontal size ratio, vertical position ratio
Example, the total height and overall width of horizontal position ratio and current Graphics window calculate the corresponding position of each icon
Coordinate and size；
According to the corresponding position coordinates of each icon and size, each figure is drawn in the current Graphics window
Mark.
Preferably, the position coordinates of each icon are the coordinate of each icon central point.
Preferably, each icon is drawn in the current Graphics window using Canvas element.
The present invention also provides a kind of patterned generation systems of response type, comprising: graph data obtains module, graphically
Window size determining module, icon size determining module and icon drafting module；
The graph data obtains module and is used to obtain targeted graphical data, the targeted graphical data packet from physical layer interface
It includes: the vertical size ratio of each icon vertical direction size and graphical window total height, each icon horizontal direction size and figure
The horizontal size ratio of shape window overall width, each icon vertical position height and graphical window total height are erected
The horizontal position ratio of straight position proportional and each icon horizontal direction position width and graphical window overall width；
The graphical window size determining module is used to determine the total height and overall width of current Graphics window；
The icon size determining module is used for the vertical size ratio according to each icon and graphical window,
The total height and overall width of horizontal size ratio, vertical position ratio, horizontal position ratio and current Graphics window calculate
The corresponding position coordinates of each icon and size out；
The icon drafting module is used for according to the corresponding position coordinates of each icon and size, in the current Graphics
Change in window and draws each icon.
Preferably, the position coordinates of each icon are the coordinate of each icon central point.
Preferably, each icon is drawn in the current Graphics window using Canvas element.
Using a kind of patterned generation method of response type provided by the invention and system, target figure is obtained from physical layer interface
Graphic data；The targeted graphical data include: each icon vertically with horizontal direction size respectively with graphical window total height
The ratio and each icon vertical position height and horizontal direction position width of vertical size and overall width horizontal size point
Not with the ratio of the vertical position of graphical window total height and overall width horizontal position, total height of current Graphics window is determined
Degree and overall width；According to the vertical size ratio of each icon and graphical window, horizontal size ratio, vertical position
The total height and overall width of ratio, horizontal position ratio and current Graphics window calculate the corresponding position of each icon
Coordinate and size are set, and draws each icon in the current Graphics window.Each icon size and position and graphical
Window size ratio-dependent is drawn to each equal adaptability of icon according to different graphical window sizes, and the page of drafting is certainly
The facility environment of dynamic response user makes the better user experience of the visual design.
Detailed description of the invention
In order to more clearly explain the embodiment of the invention or the technical proposal in the existing technology, to embodiment or will show below
There is attached drawing needed in technical description to be briefly described, it should be apparent that, the accompanying drawings in the following description is only this
The embodiment of invention for those of ordinary skill in the art without creative efforts, can also basis
The attached drawing of offer obtains other attached drawings.
Fig. 1 is a kind of flow chart of the patterned generation method embodiment one of response type of the present invention；
Fig. 2 is a kind of patterned structural schematic diagram for generating system embodiment two of response type of the present invention.
Specific embodiment
Following will be combined with the drawings in the embodiments of the present invention, and technical solution in the embodiment of the present invention carries out clear, complete
Site preparation description, it is clear that described embodiments are only a part of the embodiments of the present invention, instead of all the embodiments.It is based on
Embodiment in the present invention, it is obtained by those of ordinary skill in the art without making creative efforts every other
Embodiment shall fall within the protection scope of the present invention.
Embodiment one:
The present invention provides a kind of patterned generation methods of response type, and it is patterned that Fig. 1 shows response type of the present invention
The flow chart of generation method embodiment one, comprising:
Step S101: targeted graphical data are obtained from physical layer interface；
Targeted graphical data, the targeted graphical data packet are obtained by bottom Rest Api application programming interface
It includes: the vertical size ratio of each icon vertical direction size and graphical window total height, each icon horizontal direction size and figure
The horizontal size ratio of shape window overall width, each icon vertical position height and graphical window total height are erected
The horizontal position ratio of straight position proportional and each icon horizontal direction position width and graphical window overall width；
Step S102: the total height and overall width of current Graphics window are determined；
Step S103: according to the vertical size ratio of each icon and graphical window, horizontal size ratio is erected
The total height and overall width of straight position proportional, horizontal position ratio and current Graphics window calculate each icon pair
The position coordinates and size answered；
Step S104: it according to the corresponding position coordinates of each icon and size, is drawn in the current Graphics window
Make each icon.
The size for each icon for needing to draw in the present embodiment and position are by the ratio with graphical window size come table
Sign, picture mark position coordinate are set as the coordinate of icon central point, and the central point for defining each icon is a corresponding node, first
The total height for defining graphical window is winHeight, and the elemental height coordinate of Ingress node net0 is defined as winHeight/
The height of 20, net0 corresponding entrance icons is winHeight/x1.Set difference in height between subsequent icon as
WinHeight/10, to prevent from being overlapped between icon, subsequent node icon is using net0 as benchmark icon node, and net1 pairs of node
The icon height answered is winHeight/x2, therefore the height coordinate of node net1 is winHeight/20+winHeight/2x1+
winHeight/10+winHeight/2x2.The height of node subsequent in this way depends on previous icon node coordinate, previous
The sum of icon height and the icon height of itself, following icon size and position coordinates and so on；
The overall width for defining graphical window is wWidth, and the original width coordinate of Ingress node icon net0 is defined as
The width of the corresponding entrance icon of wWidth/3, net0 is wWidth/y1.We, which set subsequent figure and are marked with initial graph, is designated as benchmark
Central point, the corresponding icon width of second node net1 are wWidth/y2, therefore the width coordinate of net1 is wWidth/3+
(wWidth/2y1-wWidth/2y2), each icon has spaced out in vertical direction, on the basis of first icon, in level side
Upward large icons central point keeps left, and small icon central point is kept right, and subsequent node icon and so on generates；
After obtaining size and the position coordinates of icon, carried out in current Graphics window using the Canvas element of html
It draws, obtains the graphical page of response current window size.
Using a kind of patterned generation method of response type provided in this embodiment, targeted graphical number is obtained from physical layer interface
According to；The targeted graphical data include: that each icon is vertical with graphical window total height respectively with horizontal direction size vertically
The ratio and each icon vertical position height and horizontal direction position width of size and overall width horizontal size respectively with
The vertical position of graphical window total height and the ratio of overall width horizontal position, determine the total height of current Graphics window with
Overall width；According to the vertical size ratio of each icon and graphical window, horizontal size ratio, vertical position ratio
Example, the total height and overall width of horizontal position ratio and current Graphics window calculate the corresponding position of each icon
Coordinate and size, and each icon is drawn in the current Graphics window.Each icon size and position and graphical window
Mouth dimension scale determines, according to different graphical window sizes, draws to each equal adaptability of icon, the page of drafting is automatic
The facility environment for responding user, makes the better user experience of the visual design.
Embodiment two:
The present invention also provides a kind of patterned generation system of response type, Fig. 2 shows, comprising: a kind of response type figure
The generation system of shape characterized by comprising graph data acquisition module 101, graphical window size determining module 102,
Icon size determining module 103 and icon drafting module 104；
The graph data obtains module 101 and is used to obtain targeted graphical data, the targeted graphical number from physical layer interface
According to the vertical size ratio for including: each icon vertical direction size and graphical window total height, each icon horizontal direction size
With the horizontal size ratio of graphical window overall width, each icon vertical position height and graphical window total height
Vertical position ratio and each icon horizontal direction position width and graphical window overall width horizontal position ratio
Example；
The graphical window size determining module 102 is used to determine the total height and overall width of current Graphics window；
The icon size determining module 103 is used for the vertical size ratio according to each icon and graphical window
Example, horizontal size ratio, vertical position ratio, the total height and overall width of horizontal position ratio and current Graphics window,
Calculate the corresponding position coordinates of each icon and size；
The icon drafting module 104 is used for according to the corresponding position coordinates of each icon and size, described current
Each icon is drawn in graphical window.
Using a kind of patterned generation system of response type provided in this embodiment, targeted graphical number is obtained from physical layer interface
According to；The targeted graphical data include: that each icon is vertical with graphical window total height respectively with horizontal direction size vertically
The ratio and each icon vertical position height and horizontal direction position width of size and overall width horizontal size respectively with
The vertical position of graphical window total height and the ratio of overall width horizontal position, determine the total height of current Graphics window with
Overall width；According to the vertical size ratio of each icon and graphical window, horizontal size ratio, vertical position ratio
Example, the total height and overall width of horizontal position ratio and current Graphics window calculate the corresponding position of each icon
Coordinate and size, and each icon is drawn in the current Graphics window.Each icon size and position and graphical window
Mouth dimension scale determines, according to different graphical window sizes, draws to each equal adaptability of icon, the page of drafting is automatic
The facility environment for responding user, makes the better user experience of the visual design.
It should be noted that all the embodiments in this specification are described in a progressive manner, each embodiment weight
Point explanation is the difference from other embodiments, and the same or similar parts between the embodiments can be referred to each other.
For system class embodiment, since it is basically similar to the method embodiment, so being described relatively simple, related place ginseng
See the part explanation of embodiment of the method.
Finally, it is to be noted that, herein, relational terms such as first and second and the like be used merely to by
One entity or operation are distinguished with another entity or operation, without necessarily requiring or implying these entities or operation
Between there are any actual relationship or orders.Moreover, the terms "include", "comprise" or its any other variant meaning
Covering non-exclusive inclusion, so that the process, method, article or equipment for including a series of elements not only includes that
A little elements, but also including other elements that are not explicitly listed, or further include for this process, method, article or
The intrinsic element of equipment.In the absence of more restrictions, the element limited by sentence "including a ...", is not arranged
Except there is also other identical elements in the process, method, article or apparatus that includes the element.
Method and system provided by the present invention is described in detail above, specific case used herein is to this
The principle and embodiment of invention is expounded, method of the invention that the above embodiments are only used to help understand and
Its core concept；At the same time, for those skilled in the art in specific embodiment and is answered according to the thought of the present invention
With in range, there will be changes, in conclusion the contents of this specification are not to be construed as limiting the invention.
Claims (2)
1. a kind of patterned generation method of response type characterized by comprising
Targeted graphical data are obtained from bottom Rest Api application programming interface；
The targeted graphical data include: the vertical size ratio of each icon vertical direction size and graphical window total height,
The horizontal size ratio of each icon horizontal direction size and graphical window overall width, each icon vertical position height
It is total with the vertical position ratio of graphical window total height and each icon horizontal direction position width and graphical window
The horizontal position ratio of width；
Determine the total height and overall width of current Graphics window；
According to the vertical size ratio of each icon and graphical window, horizontal size ratio, vertical position ratio, water
The total height and overall width of flat position proportional and current Graphics window, calculate the corresponding position coordinates of each icon with
Size；
According to the corresponding position coordinates of each icon and size, drawn in the current Graphics window using Canvas element
Make each icon；
Wherein, the position coordinates of each icon are the coordinate of each icon central point.
2. a kind of patterned generation system of response type characterized by comprising graph data obtains module, graphical window
Size determining module, icon size determining module and icon drafting module；
The graph data obtains module and is used to obtain targeted graphical data, institute from bottom Rest Api application programming interface
State the vertical size ratio that targeted graphical data include: each icon vertical direction size and graphical window total height, each icon
The horizontal size ratio of horizontal direction size and graphical window overall width, each icon vertical position height and figure
The vertical position ratio of change window total height and each icon horizontal direction position width and graphical window overall width
Horizontal position ratio；
The graphical window size determining module is used to determine the total height and overall width of current Graphics window；
The icon size determining module is used for the vertical size ratio according to each icon and graphical window, horizontal
The total height and overall width of dimension scale, vertical position ratio, horizontal position ratio and current Graphics window, calculate institute
State the corresponding position coordinates of each icon and size；
The icon drafting module is used for according to the corresponding position coordinates of each icon and size, using Canvas element in institute
It states and draws each icon in current Graphics window；
Wherein, the position coordinates of each icon are the coordinate of each icon central point.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201510498488.XA CN105094838B (en) | 2015-08-13 | 2015-08-13 | A kind of patterned generation method of response type and system |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201510498488.XA CN105094838B (en) | 2015-08-13 | 2015-08-13 | A kind of patterned generation method of response type and system |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN105094838A CN105094838A (en) | 2015-11-25 |
| CN105094838B true CN105094838B (en) | 2019-01-18 |
Family
ID=54575366
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201510498488.XA Active CN105094838B (en) | 2015-08-13 | 2015-08-13 | A kind of patterned generation method of response type and system |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN105094838B (en) |
Families Citing this family (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105739972A (en) * | 2016-01-21 | 2016-07-06 | 浪潮通用软件有限公司 | Screen self-adaption method and device of control |
| WO2019215638A1 (en) * | 2018-05-09 | 2019-11-14 | 3M Innovative Properties Company | Determining dimensions for providing a precut window film |
Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103176993A (en) * | 2011-12-21 | 2013-06-26 | 北京神州绿盟信息安全科技股份有限公司 | Content presentation device and content presentation method |
| CN103927169A (en) * | 2014-04-10 | 2014-07-16 | 南京信息工程大学 | Method for realizing scaling of electronic map drawn by GDI (graphic device interface)+ |
-
2015
- 2015-08-13 CN CN201510498488.XA patent/CN105094838B/en active Active
Patent Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103176993A (en) * | 2011-12-21 | 2013-06-26 | 北京神州绿盟信息安全科技股份有限公司 | Content presentation device and content presentation method |
| CN103927169A (en) * | 2014-04-10 | 2014-07-16 | 南京信息工程大学 | Method for realizing scaling of electronic map drawn by GDI (graphic device interface)+ |
Non-Patent Citations (1)
| Title |
|---|
| "基于分层的网络拓扑结构可视化方法研究";谢红漫 等;《北京航空航天大学学报》;20040630;第30卷(第6期);第529-533页 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN105094838A (en) | 2015-11-25 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN104703044B (en) | A kind of picture barrage dissemination method | |
| CN105608319B (en) | A kind of mask method and annotation equipment of digital pathological section | |
| CN103530052B (en) | The display methods and user equipment of a kind of interface content | |
| WO2016145832A1 (en) | Method of operating terminal and device utilizing same | |
| CN105493023A (en) | Manipulation of content on a surface | |
| CN102955794A (en) | Method and device for displaying click condition of web page | |
| CN104035664A (en) | Display method and device for user interface of application program | |
| CN103559007A (en) | Method and device for dynamically generating screen wallpaper | |
| CN103513856A (en) | Method and device for refreshing page | |
| CN108573008A (en) | Massive point methods of exhibiting and device in a kind of electronic map | |
| US20160019321A1 (en) | System, computer program, and method for designing custom building components | |
| CN104182430A (en) | Method and device for displaying image in text message | |
| CN101763234A (en) | Method and device for simulating various screen resolutions | |
| CN105094838B (en) | A kind of patterned generation method of response type and system | |
| CN102236441A (en) | Interactive three-dimensional image display system and method | |
| CN104503725B (en) | A kind of information processing method and electronic equipment | |
| EP3034999B1 (en) | Method and apparatus for generating a composite image based on an ambient occlusion | |
| CN105095593A (en) | Patterned topology generating method and system | |
| US9678645B2 (en) | Interactive map markers | |
| CN106131533A (en) | A kind of method for displaying image and terminal | |
| CN106843701A (en) | A kind of picture rotation methods of exhibiting and device | |
| CN103838429A (en) | Method and system for conducting drawing on touch screen to achieve writing brush effect | |
| CN103156646A (en) | Method and device of dual-screen ultraphonic medical treatment measurement | |
| CN106873860A (en) | The network information comments on method and device | |
| CN106708495B (en) | Page display method and device based on mobile terminal |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| C10 | Entry into substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |