WO2017041383A1 - Scalable vector graphic image reorganization method and reorganization apparatus - Google Patents
Scalable vector graphic image reorganization method and reorganization apparatus Download PDFInfo
- Publication number
- WO2017041383A1 WO2017041383A1 PCT/CN2015/098226 CN2015098226W WO2017041383A1 WO 2017041383 A1 WO2017041383 A1 WO 2017041383A1 CN 2015098226 W CN2015098226 W CN 2015098226W WO 2017041383 A1 WO2017041383 A1 WO 2017041383A1
- Authority
- WO
- WIPO (PCT)
- Prior art keywords
- image
- unit
- scalable vector
- information
- image unit
- 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.)
- Ceased
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING OR CALCULATING; COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
-
- G—PHYSICS
- G06—COMPUTING OR CALCULATING; COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/50—Information retrieval; Database structures therefor; File system structures therefor of still image data
- G06F16/56—Information retrieval; Database structures therefor; File system structures therefor of still image data having vectorial format
-
- G—PHYSICS
- G06—COMPUTING OR CALCULATING; COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9574—Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching
Definitions
- the present invention relates to the field of network technologies, and in particular, to the field of network page image processing technologies, and in particular, to a method and a device for recombining a scalable vector graphics image.
- Scalable Vector Graphics is a graphic format used to describe two-dimensional vector graphics. It can be arbitrarily scaled without distortion, so it is obtained in mobile terminals (such as mobile phones, tablets, etc.). widely used. With the wide application of HTML5 (Hyper Text Markup Language; 5 for the fifth edition), the application of scalable vector graphics in mobile terminals has been further strengthened.
- HTML5 Hyper Text Markup Language
- the mobile terminal has the advantages of being portable and full-featured, and has a wider application range in production and life. Since the screen of the mobile terminal is determined by each merchant according to market needs, its display attributes (such as size and resolution) are different according to the judgment of the merchant on the market. For a web page production company, the more mobile terminals that a web page can be applied, the more the coverage of the user can be improved. Since the screen of the mobile terminal has various display attributes, it is required for the webpage making company to adjust the webpage for each mobile terminal's screen. Most of these adjustments are repeated manual processing, which is cumbersome and cannot guarantee accuracy. Especially for the adjustment of the picture. In a screen that displays a good webpage, there may be problems such as image display errors, image distortion, and even garbled characters on another screen. The content of the webpage changes every moment, and the workload of webpage production is large. Web page production is not efficient.
- the present application provides a recombination method and a recombination device for a scalable vector graphic image to solve the problem of low processing efficiency of the scalable vector graphic image in the web page production process.
- the present application provides a method for recombining a scalable vector graphics image, the method comprising:
- the present application provides a reconfigurable apparatus for a scalable vector graphics image, the apparatus comprising:
- An image obtaining unit configured to acquire a scalable vector graphic image
- a location information acquiring unit configured to decompose the scalable vector graphics image into image units, and acquire location information of the image unit
- a location determining unit configured to load the image unit to a destination page, and determine, according to the location information, a location of the image unit on the destination page;
- An image recombining unit configured to merge the image units at the locations to generate a scalable vector graphics recombination image.
- the recombining method and recombining device of the scalable vector graphic image decomposes the scalable vector graphic image into image units, and records the position information of the image unit, thereby ensuring the mutual positional relationship between the image units;
- the unit is loaded to the destination page, and the position of the image unit on the destination page is determined according to the position information, which improves the loading efficiency and positioning accuracy of the image unit on the destination page; finally, the processed image unit is reorganized into a scalable vector graphics recombination image, so that
- the Scalable Vector Graphics Recombined Image preserves the image characteristics of the Scalable Vector Graphics image.
- FIG. 1 is a flowchart of a method for recombining a scalable vector graphics image according to Embodiment 1 of the present application;
- FIG. 2 is a structural diagram of a composition of a scalable vector graphics image reorganization apparatus according to Embodiment 2 of the present application;
- FIG. 3 is a schematic diagram of an image unit of the embodiment 3 of the present application for extracting an image unit from a humanoid image
- FIG. 5 is a schematic diagram of editing an image unit loaded into a webpage according to Embodiment 3 of the present application.
- the present embodiment provides a method for reorganizing a scalable vector graphics image.
- a flow chart 100 is shown in an embodiment of a method for recombining a scalable vector graphics image.
- the reorganization method 100 in this embodiment includes the following steps. :
- Step 101 Acquire a scalable vector graphic image
- the Scalable Vector Graphics image is usually stored in the image server.
- the Scalable Vector Graphics image needs to be downloaded locally from the image server.
- Step 102 Decompose the scalable vector graphic image into image units, and acquire position information of the image unit;
- Step 103 Loading the image unit to the destination page, and determining the position of the image unit on the destination page according to the location information;
- the image unit After the image unit is loaded to the destination page (such as a web page or other image processed page), in order to maintain the original image characteristics of the scalable vector graphic image, it is necessary to ensure the positional relationship between the image units. Generally, as long as the position of an image unit on the destination page can be determined, the position of the other image unit on the destination page can be determined based on the location information.
- Step 104 Combine the image units at the location to generate a scalable vector graphics recombination image.
- step 103 determines the position of the image unit on the destination page, and then the image unit can be separately rendered or animated, or the image unit can be simply enlarged, reduced, displaced or modified. Wait for the operation. Finally, a scalable vector graphics recombination image is generated.
- the method of the embodiment decomposes the scalable vector graphic image into image units, and records the position information of the image unit, thereby ensuring the mutual positional relationship between the image units; then loading the image unit to the destination page, and determining the image unit according to the position information. In the position of the destination page, the loading efficiency and positioning accuracy of the image unit on the destination page are improved; finally, the processed image unit is reorganized into a scalable vector graphics recombination image, so that the scalable vector graphics recombined image retains the scalable vector graphics.
- the image characteristics of the image are described by the image.
- the position information of the image unit is obtained in step 102.
- Step 1021 Set a reference point on the scalable vector graphic image.
- the reference point can be set on a blank area of the scalable vector graphic image, or other position that does not affect the measurement of the image unit.
- Step 1022 Measure an absolute distance and an absolute angle of a specified point on the image unit to the reference point;
- the image unit is usually not a point, but a graphic. Therefore, after setting the reference point, set the respective specified points (ie, reference points) on the image unit, by measuring the absolute distance between each specified point and the reference point. The distance and absolute angle enable precise positioning of the positional relationship between the image unit and the reference point.
- Step 1023 Obtain absolute position information of the image unit on the scalable vector graphic image according to the absolute distance and the absolute angle.
- the absolute position information of the image unit on the scalable vector graphic image is obtained.
- the image unit can be loaded to the destination page. At this point, you also need to set a new reference point on the destination page so that the image unit can be loaded to the corresponding location. If the relative positional relationship between the image units can be obtained, the step of setting a new reference point on the destination page can be omitted, and each image unit can be prevented from being loaded to the destination page one by one according to the new reference point, which can be greatly Simplify the process of loading image units. To this end, it can also include:
- Step 1024 Measure relative distances and relative angles between image units according to absolute position information
- the relative distance and relative angle are obtained based on the absolute position information, and the overall structure of the scalable vector graphic image can be guaranteed.
- Step 1025 Obtain relative position information between the image units according to the relative distance and the relative angle.
- the image unit After obtaining the relative position information between the image units, it can be ensured that the image unit still maintains the image characteristics of the scalable vector graphic image after being recombined under the current size.
- the image characteristics of the scalable vector graphic image cannot be guaranteed only by the relative position information.
- Step 1026 Measure size information of the image unit
- the size information here may be the size information of the smallest rectangle occupied by the image unit.
- Step 1027 Obtain proportional information of the image unit according to the size information and the relative position information.
- the relationship information is obtained by associating the size information with the relative position information.
- the proportional information characterizes the size of each image unit under the premise of the current relative position information; Or, what is the relative position information at the size of the current image unit.
- each image unit needs to be separately saved as a separate file. It therefore also includes the step of saving the image unit as a scalable vector graphics sub-image.
- step 103 includes:
- Step 1031 Select an image unit to be set at a specified position of the destination page
- the specified location is the location where the image unit needs to be placed; if the destination page is the operation page of the image editing software, the specified location is the image manipulation area of the operation page.
- Step 1032 Determine an initial position for recombining the image unit according to the specified position and relative position information
- the position of the other image unit on the destination page that is, the initial position
- the initial position is set according to the positional relationship between the original image units, and various operations (such as animation effects, etc.) may be performed on the image unit on the destination page, which may change the position of the image unit. Therefore, what is obtained here is the initial position.
- Step 1033 The remaining image units are correspondingly set in the initial position.
- Step 104 specifically includes:
- Step 1041 Set a frame for adjusting the size of the image unit for the image unit;
- the bezel may be a rectangle formed on the periphery of the image unit, and a drag point for changing the overall size of the image unit may be disposed at the four corners of the rectangle. It is also possible to set a one-sided adjustment point for changing the horizontal or vertical scale of the image unit at the midpoint of each side of the rectangle.
- Step 1042 Adjust the frame according to the adjustment instruction, and reorganize all the adjusted image units into a scalable vector graphic recombination image.
- the adjustment command here may be an instruction to adjust the position, size, and the like of the image unit, or may be an instruction to perform an animation, rendering, or the like on the image unit.
- adjusting the frame according to the adjustment instruction includes: sizing the single image unit according to the adjustment instruction The adjustment is made, and/or the overall structure of all image units is adjusted according to the scale information.
- the image unit Before reorganizing the image unit, it is further determined whether all image units are included, and may further include: detecting, according to the position information, whether the scalable vector graphics recombination image includes all image units, and if so, generating a scalable The vector graphics reorganize the image, otherwise, an alert message is sent.
- the present embodiment and the embodiment 1 belong to the same inventive concept.
- the embodiment provides a reconfigurable device for a scalable vector graphic image. Referring to FIG. 2, a composition and a structure diagram of a recombining device 200 for a scalable vector graphic image is shown.
- the reorganization device 200 of an embodiment comprises:
- An image obtaining unit 201 configured to acquire a scalable vector graphic image
- the Scalable Vector Graphics image is usually stored in the image server.
- the Scalable Vector Graphics image needs to be downloaded locally from the image server.
- a location information obtaining unit 202 configured to decompose the scalable vector graphics image into image units, and acquire location information of the image unit;
- the scalable vector graphics image is first decomposed into set image units, and then each image unit is processed separately. At the same time, in order to ensure the consistency of the processed image unit on certain features, it is necessary to record the position information of the image unit on the scalable vector graphic image.
- a location determining unit 203 configured to load an image unit to a destination page, and determine, according to the location information, a location of the image unit on the destination page;
- the image unit After the image unit is loaded to the destination page (such as a web page or other image processed page), in order to maintain the original image characteristics of the scalable vector graphic image, it is necessary to ensure the positional relationship between the image units. Generally, as long as the position of an image unit on the destination page can be determined, the position of the other image unit on the destination page can be determined based on the location information.
- the image recombining unit 204 is configured to merge the image units in position to generate a scalable vector graphics recombination image.
- the position determining unit 203 determines the position of the image unit on the destination page, and then can perform an operation of rendering or animating the image unit separately at this position, or The image unit performs simple operations such as zooming in, zooming out, shifting, or modifying colors. Finally, a scalable vector graphics recombination image is generated.
- the location information acquiring unit 202 includes:
- a reference point setting subunit 2021 configured to set a reference point on the scalable vector graphic image
- the reference point can be set on a blank area of the scalable vector graphic image, or other position that does not affect the measurement of the image unit.
- a first information acquisition subunit 2022 configured to measure an absolute distance and an absolute angle of a specified point on the image unit to the reference point;
- the image unit is usually not a point, but a graphic. Therefore, after setting the reference point, set the respective specified points (ie, reference points) on the image unit, by measuring the absolute distance between each specified point and the reference point. The distance and absolute angle enable precise positioning of the positional relationship between the image unit and the reference point.
- the absolute position information acquisition sub-unit 2023 is configured to obtain absolute position information of the image unit on the scalable vector graphic image according to the absolute distance and the absolute angle.
- the absolute position information of the image unit on the scalable vector graphic image is obtained.
- the image unit can be loaded to the destination page. At this point, you also need to set a new reference point on the destination page so that the image unit can be loaded to the corresponding location. If the relative positional relationship between the image units can be obtained, the step of setting a new reference point on the destination page can be omitted, and each image unit can be prevented from being loaded one by one according to the new reference point, which can greatly simplify the loading of the image.
- the process of the unit. Therefore, the location information obtaining unit 202 may further include:
- a second information acquisition subunit 2024 configured to measure a relative distance and a relative angle between the image units according to the absolute position information
- the relative distance and relative angle are obtained based on the absolute position information, and the overall structure of the scalable vector graphic image can be guaranteed.
- a relative position information acquisition subunit 2025 for obtaining the relative distance and the relative angle Relative position information between image units.
- the location information obtaining unit 202 may further include:
- the size information acquisition subunit 2026 is configured to measure size information of the image unit; the size information herein may be size information of a minimum rectangle occupied by the image unit.
- the ratio information acquisition sub-unit 2027 is configured to obtain the scale information of the image unit according to the size information and the relative position information.
- the relationship information is obtained by associating the size information with the relative position information.
- the scale information characterizes the size of each image unit under the premise of the current relative position information; or, what the relative position information should be under the size of the current image unit.
- the location information obtaining unit 202 may further include:
- the storage subunit 2028 is configured to save the image unit as a scalable vector graphics sub-image.
- the location determining unit 203 includes:
- the first setting subunit 2031 is configured to select an image unit to be set at a designated position of the destination page
- the specified location is the location where the image unit needs to be placed; if the destination page is the operation page of the image editing software, the specified location is the image manipulation area of the operation page.
- An initial position acquisition subunit 2032 configured to determine an initial position for recombining the image unit according to the specified position and relative position information
- the position of the other image unit on the destination page can be determined, that is, at the beginning Starting position.
- the initial position is set according to the positional relationship between the original image units, and various operations (such as animation effects, etc.) may be performed on the image unit on the destination page, which may change the position of the image unit. Therefore, what is obtained here is the initial position.
- the second setting subunit 2033 is configured to set the remaining image units correspondingly at the initial position.
- the image unit can be adjusted and reorganized as needed, and the image recombining unit 204 includes:
- a frame generation subunit 2041 configured to set a frame for adjusting an image unit size for the image unit
- the bezel may be a rectangle formed on the periphery of the image unit, and a drag point for changing the size of the image unit may be set at the four corners of the rectangle. It is also possible to set a one-sided adjustment point for changing the horizontal and vertical ratio of the image unit at the midpoint of each side of the rectangle.
- the scalable vector graphics recombination sub-unit 2042 is configured to adjust the frame according to the adjustment instruction, and re-form all the adjusted image units into the scalable vector graphics recombination image.
- the adjustment command here may be an instruction to adjust the position and size of the image unit, or may be an instruction to perform an animation, rendering, or the like on the image unit.
- the scalable vector graphics recombination sub-unit 2042 further includes an adjustment module for adjusting the size of the individual image units according to the adjustment instruction, and/or adjusting the overall structure of all the image units according to the scale information.
- the scalable vector graphics recombination sub-unit 2042 further includes: an execution module, configured to detect, according to the location information, whether the scalable vector graphics recombination image includes All image units, if so, generate a scalable vector graphics recombination image, otherwise, an alarm message is issued.
- the scalable vector graphic image of this embodiment selects a humanoid image, as shown in FIG. 3, and the humanoid image is processed as an example to describe the application in detail.
- the specific operation steps include:
- Step 301 Acquire a human figure image
- Step 302 Decompose the human figure image into image units, and acquire position information of the image unit;
- the designated portion of the humanoid image is drawn with a region dividing line (dotted line in Fig. 3) containing the region of the setting portion.
- the setting portion here will be extracted as an image unit.
- the area dividing line is used to select the leg figure of the human figure image, firstly, the area containing the leg figure (ie, the designated part) is drawn by the area dividing line, and then the leg figure (ie, the setting part) is extracted therefrom.
- each part of the humanoid image is extracted to obtain all the image units. It should be noted that after the image unit is obtained as described above, the human figure image is also retained to set operations such as reference points.
- a reference point is set on the blank area of the human figure, and the specific position of the reference point is preferably selected to be set at a position capable of accurately measuring the distance and angle of the image unit without overlapping confusion. .
- the reference point also set its own specified point, and use the reference point as the coordinate origin to measure the absolute distance and absolute angle of the specified point to the reference point, so that the distance of each specified point to the reference point is obtained.
- Vector that is, absolute position information relative to the reference point. Absolute position information is established by relying on the reference point, and setting different reference points, the resulting distance vector of each image unit is also different, which makes the position information of the image unit relatively confusing.
- the relative position information between the image units can be obtained on the basis of the absolute position information, specifically: calculating the relative distance and the relative angle between the image units according to the absolute position information, and obtaining the image unit according to the relative distance and the relative angle.
- the relative positional information between the two thus establishes the positional relationship between the image units, so that the image unit establishes a holistic structure.
- Image units are likely to be edited when loaded into other pages, such as animating or properly deforming the leg graphics in Figure 4, which affects the positional relationship between the leg graphics and other image elements.
- the size information of the image unit corresponding to the relative position information, that is, in the current relative
- the size of the image unit is based on the location information.
- the size information here is the size of the smallest rectangle occupied by the image unit.
- the scale information of the feature capable of completely retaining the humanoid image is obtained.
- the image units are each saved as separate SVG images.
- Step 303 Loading the image unit to the destination page, and determining the location of the image unit on the destination page according to the location information;
- the destination page can be a web page or a page of other image processing programs.
- the web page is an example, and the image unit is recolored and the animation effect is added before the image unit is loaded into the web page.
- the initial position is shown in Figure 5.
- Step 304 Combine the image units in position to generate a humanoid image recombination image.
- the animation effect operation will cause the image unit to be displaced or rotated.
- a frame can be generated for each image unit, and the displacement or rotation of the image unit can be realized by moving or rotating the frame, and then the scale information is used for all the images.
- the unit is zoomed in or out.
- the image unit can be reorganized.
- the relative position information contained in the position information marks all the image units, the integrity of the image unit can be performed by the position information. Detection. When the detection result is that all the image units are present, all the image units are reorganized into a humanoid recombination image; when not all the image units are included, an alarm is sent through the sound or information dialog box.
- each block of the flowchart or block diagrams can represent a module, a program segment, or a portion of code that includes one or more logic for implementing the specified.
- Functional executable instructions can also occur in a different order than that illustrated in the drawings. For example, two successively represented blocks may in fact be executed substantially in parallel, and they may sometimes be executed in the reverse order, depending upon the functionality involved.
- each block of the block diagrams and/or flowcharts, and combinations of blocks in the block diagrams and/or flowcharts can be implemented in a dedicated hardware-based system that performs the specified function or operation. Or it can be implemented by a combination of dedicated hardware and computer instructions.
- the units involved in the embodiments of the present application may be implemented by software or by hardware.
- the described unit may also be disposed in the processor, for example, as a processor including an image acquisition unit and location information.
- a unit, a position determining unit, and an image recombining unit may be implemented by software or by hardware.
- the described unit may also be disposed in the processor, for example, as a processor including an image acquisition unit and location information.
- the names of these units do not in any way constitute a limitation on the unit itself.
- the present application further provides a computer readable storage medium, which may be a computer readable storage medium included in the apparatus described in the foregoing embodiment, or may exist separately, not A computer readable storage medium that is assembled into a terminal.
- the computer readable storage medium stores one or more programs that are used by one or more processors to perform a method of recombining a scalable vector graphics image as described herein.
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Databases & Information Systems (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Processing Or Creating Images (AREA)
Abstract
Description
相关申请的交叉引用Cross-reference to related applications
本申请要求于2015年09月07日提交的中国专利申请号为“201510564649.0”的优先权,其全部内容作为整体并入本申请中。The present application claims priority to Chinese Patent Application No. 201510564649.0, filed on Sep. 7, 2015, the entire content of
本申请涉及网络技术领域,具体涉及网络页面图像处理技术领域,尤其涉及可缩放矢量图形图像的重组方法及重组装置。The present invention relates to the field of network technologies, and in particular, to the field of network page image processing technologies, and in particular, to a method and a device for recombining a scalable vector graphics image.
可缩放矢量图形图像(Scalable Vector Graphics,SVG)是用于描述二维矢量图形的一种图形格式,可以任意缩放而不会产生失真,因此在移动终端(如手机、平板电脑等)中得到了广泛使用。随着HTML5(Hyper Text Markup Language,超文本标记语言;5表示第5版)的广泛应用,可缩放矢量图形图像在移动终端中的应用得到了进一步的加强。Scalable Vector Graphics (SVG) is a graphic format used to describe two-dimensional vector graphics. It can be arbitrarily scaled without distortion, so it is obtained in mobile terminals (such as mobile phones, tablets, etc.). widely used. With the wide application of HTML5 (Hyper Text Markup Language; 5 for the fifth edition), the application of scalable vector graphics in mobile terminals has been further strengthened.
移动终端具有便携式、功能全面等优点,在生产生活中的应用范围越来越广。由于移动终端的屏幕是各商家根据市场需要制定的,其显示属性(如尺寸和分辨率等)会根据商家对市场的判断而各自不同。对于网页制作公司而言,网页能够适用的移动终端越多,越能够提高对用户的覆盖率。由于移动终端的屏幕具有各种不同的显示属性,这就需要网页制作公司针对每一种移动终端的屏幕对网页进行调整,这些调整工作大多是重复的手动处理过程,工作烦琐,并且无法保证精度,尤其是对图片的调整而言。在一种屏幕内显示完好的网页,可能在另一种屏幕内出现图像显示错误、图像变形,甚至图像乱码等问题;而网页内容每时每刻都在发生变化,网页制作的工作量大,网页制作的效率不高。 The mobile terminal has the advantages of being portable and full-featured, and has a wider application range in production and life. Since the screen of the mobile terminal is determined by each merchant according to market needs, its display attributes (such as size and resolution) are different according to the judgment of the merchant on the market. For a web page production company, the more mobile terminals that a web page can be applied, the more the coverage of the user can be improved. Since the screen of the mobile terminal has various display attributes, it is required for the webpage making company to adjust the webpage for each mobile terminal's screen. Most of these adjustments are repeated manual processing, which is cumbersome and cannot guarantee accuracy. Especially for the adjustment of the picture. In a screen that displays a good webpage, there may be problems such as image display errors, image distortion, and even garbled characters on another screen. The content of the webpage changes every moment, and the workload of webpage production is large. Web page production is not efficient.
发明内容Summary of the invention
本申请提供了可缩放矢量图形图像的重组方法及重组装置,以解决可缩放矢量图形图像在网页制作过程中的处理效率低等不足。The present application provides a recombination method and a recombination device for a scalable vector graphic image to solve the problem of low processing efficiency of the scalable vector graphic image in the web page production process.
一方面,本申请提供了一种可缩放矢量图形图像的重组方法,所述方法包括:In one aspect, the present application provides a method for recombining a scalable vector graphics image, the method comprising:
获取可缩放矢量图形图像;Obtain a scalable vector graphic image;
将所述可缩放矢量图形图像分解为图像单元,并获取所述图像单元的位置信息;Decomposing the scalable vector graphic image into image units, and acquiring position information of the image unit;
将所述图像单元加载至目的页面,根据所述位置信息确定所述图像单元在所述目的页面上的位置;Loading the image unit to a destination page, and determining a location of the image unit on the destination page according to the location information;
在所述位置上合并所述图像单元,生成可缩放矢量图形重组图像。Combining the image elements at the locations produces a scalable vector graphics recombination image.
第二方面,本申请提供了一种可缩放矢量图形图像的重组装置,所述装置包括:In a second aspect, the present application provides a reconfigurable apparatus for a scalable vector graphics image, the apparatus comprising:
图像获取单元,用于获取可缩放矢量图形图像;An image obtaining unit, configured to acquire a scalable vector graphic image;
位置信息获取单元,用于将所述可缩放矢量图形图像分解为图像单元,并获取所述图像单元的位置信息;a location information acquiring unit, configured to decompose the scalable vector graphics image into image units, and acquire location information of the image unit;
位置确定单元,用于将所述图像单元加载至目的页面,根据所述位置信息确定所述图像单元在所述目的页面上的位置;a location determining unit, configured to load the image unit to a destination page, and determine, according to the location information, a location of the image unit on the destination page;
图像重组单元,用于在所述位置上合并所述图像单元,生成可缩放矢量图形重组图像。An image recombining unit configured to merge the image units at the locations to generate a scalable vector graphics recombination image.
本申请提供的可缩放矢量图形图像的重组方法及重组装置,将可缩放矢量图形图像分解为图像单元,并记录了图像单元的位置信息,保证了图像单元之间的相互位置关系;然后将图像单元加载到目的页面,根据位置信息确定图像单元在目的页面的位置,提高了图像单元在目的页面上的加载效率和定位精度;最后将处理后的图像单元重组为可缩放矢量图形重组图像,使得可缩放矢量图形重组图像保留了可缩放矢量图形图像的图像特性。The recombining method and recombining device of the scalable vector graphic image provided by the present application decomposes the scalable vector graphic image into image units, and records the position information of the image unit, thereby ensuring the mutual positional relationship between the image units; The unit is loaded to the destination page, and the position of the image unit on the destination page is determined according to the position information, which improves the loading efficiency and positioning accuracy of the image unit on the destination page; finally, the processed image unit is reorganized into a scalable vector graphics recombination image, so that The Scalable Vector Graphics Recombined Image preserves the image characteristics of the Scalable Vector Graphics image.
通过阅读参照以下附图所作的对非限制性实施例所作的详细描述,本申请的其它特征、目的和优点将会变得更明显:Other features, objects, and advantages of the present application will become more apparent from the detailed description of the accompanying drawings.
图1是本申请实施例1的可缩放矢量图形图像的重组方法的流程图;1 is a flowchart of a method for recombining a scalable vector graphics image according to Embodiment 1 of the present application;
图2是本申请实施例2的可缩放矢量图形图像的重组装置的组成结构图;2 is a structural diagram of a composition of a scalable vector graphics image reorganization apparatus according to Embodiment 2 of the present application;
图3是本申请实施例3的图像单元从人形图像上划取图像单元的示意图;3 is a schematic diagram of an image unit of the embodiment 3 of the present application for extracting an image unit from a humanoid image;
图4是本申请实施例3的划取得到的图像单元;4 is an image unit obtained by the third embodiment of the present application;
图5是本申请实施例3的图像单元加载到网页上编辑的示意图。FIG. 5 is a schematic diagram of editing an image unit loaded into a webpage according to Embodiment 3 of the present application.
下面结合附图和实施例对本申请作进一步的详细说明。可以理解的是,此处所描述的具体实施例仅仅用于解释相关发明,而非对该发明的限定。另外还需要说明的是,为了便于描述,附图中仅示出了与有关发明相关的部分。The present application will be further described in detail below with reference to the accompanying drawings and embodiments. It is understood that the specific embodiments described herein are merely illustrative of the invention, rather than the invention. It is also to be noted that, for the convenience of description, only the parts related to the related invention are shown in the drawings.
需要说明的是,在不冲突的情况下,本申请中的实施例及实施例中的特征可以相互组合。下面将参考附图并结合实施例来详细说明本申请。It should be noted that the embodiments in the present application and the features in the embodiments may be combined with each other without conflict. The present application will be described in detail below with reference to the accompanying drawings.
实施例1Example 1
本实施例提供了一种可缩放矢量图形图像的重组方法,参考图1,示出了可缩放矢量图形图像的重组方法的一个实施例流程图100,本实施例所述重组方法100包括以下步骤:The present embodiment provides a method for reorganizing a scalable vector graphics image. Referring to FIG. 1, a
步骤101:获取可缩放矢量图形图像;Step 101: Acquire a scalable vector graphic image;
实际中,可缩放矢量图形图像通常保存在图片服务器内,对某个可缩放矢量图形图像进行处理时,需要先从图片服务器将可缩放矢量图形图像下载至本地。In practice, the Scalable Vector Graphics image is usually stored in the image server. When processing a Scalable Vector Graphics image, the Scalable Vector Graphics image needs to be downloaded locally from the image server.
步骤102:将可缩放矢量图形图像分解为图像单元,并获取图像单元的位置信息;Step 102: Decompose the scalable vector graphic image into image units, and acquire position information of the image unit;
要对可缩放矢量图形图像进行相应的处理,需要先将可缩放矢量图 形图像分解为设定的图像单元,然后对每个图像单元进行单独处理。同时,为了保证处理后的图像单元在某些特征上的一致性,需要记录图像单元在可缩放矢量图形图像上的位置信息。To process the scalable vector graphics image, you need to first scale the vector graphics. The image is decomposed into set image units, and each image unit is processed separately. At the same time, in order to ensure the consistency of the processed image unit on certain features, it is necessary to record the position information of the image unit on the scalable vector graphic image.
步骤103:将图像单元加载至目的页面,根据位置信息确定图像单元在目的页面上的位置;Step 103: Loading the image unit to the destination page, and determining the position of the image unit on the destination page according to the location information;
图像单元被加载至目的页面(如网页或其他图像处理的页面)后,为了保持可缩放矢量图形图像原有的图像特性,需要保证图像单元之间的位置关系。通常,只要能确定某一个图像单元在目的页面上的位置,根据位置信息就能确定其他图像单元在目的页面的位置。After the image unit is loaded to the destination page (such as a web page or other image processed page), in order to maintain the original image characteristics of the scalable vector graphic image, it is necessary to ensure the positional relationship between the image units. Generally, as long as the position of an image unit on the destination page can be determined, the position of the other image unit on the destination page can be determined based on the location information.
步骤104:在所述位置上合并图像单元,生成可缩放矢量图形重组图像。Step 104: Combine the image units at the location to generate a scalable vector graphics recombination image.
上述步骤103确定了图像单元在目的页面上的位置,然后在此位置上可以单独对某个图像单元进行渲染或动画处理等操作,也可以对图像单元进行简单的放大、缩小、位移或修改颜色等操作。最后生成可缩放矢量图形重组图像。The
本实施例方法将可缩放矢量图形图像分解为图像单元,并记录了图像单元的位置信息,保证了图像单元之间的相互位置关系;然后将图像单元加载到目的页面,根据位置信息确定图像单元在目的页面的位置,提高了图像单元在目的页面上的加载效率和定位精度;最后将处理后的图像单元重组为可缩放矢量图形重组图像,使得可缩放矢量图形重组图像保留了可缩放矢量图形图像的图像特性。The method of the embodiment decomposes the scalable vector graphic image into image units, and records the position information of the image unit, thereby ensuring the mutual positional relationship between the image units; then loading the image unit to the destination page, and determining the image unit according to the position information. In the position of the destination page, the loading efficiency and positioning accuracy of the image unit on the destination page are improved; finally, the processed image unit is reorganized into a scalable vector graphics recombination image, so that the scalable vector graphics recombined image retains the scalable vector graphics. The image characteristics of the image.
为了使可缩放矢量图形图像在被分解为图像单元后还具有可缩放矢量图形图像的特性,需要在得到图像单元后,记录图像单元的位置信息,具体的,步骤102中获取图像单元的位置信息包括:In order to make the scalable vector graphic image have the characteristics of the scalable vector graphic image after being decomposed into image units, it is necessary to record the position information of the image unit after obtaining the image unit. Specifically, the position information of the image unit is obtained in
步骤1021:在可缩放矢量图形图像上设置参考点;Step 1021: Set a reference point on the scalable vector graphic image.
要想得到位置信息,首先要设置参考点,以参考点为基准得到图像单元的位置信息。参考点可以设置在可缩放矢量图形图像的空白区域上,也可以是其他不影响对图像单元进行测量的位置。To get the position information, first set the reference point and get the position information of the image unit based on the reference point. The reference point can be set on a blank area of the scalable vector graphic image, or other position that does not affect the measurement of the image unit.
步骤1022:测量图像单元上的指定点到参考点的绝对距离和绝对角度; Step 1022: Measure an absolute distance and an absolute angle of a specified point on the image unit to the reference point;
图像单元通常不是一个点,而是一个图形,因此,在设置完参考点后,也要在图像单元上设置各自的指定点(即基准点),通过测量各个指定点到参考点之间的绝对距离和绝对角度,能够精确定位图像单元与参考点的位置关系。The image unit is usually not a point, but a graphic. Therefore, after setting the reference point, set the respective specified points (ie, reference points) on the image unit, by measuring the absolute distance between each specified point and the reference point. The distance and absolute angle enable precise positioning of the positional relationship between the image unit and the reference point.
步骤1023:根据绝对距离和绝对角度得到图像单元在可缩放矢量图形图像上的绝对位置信息。Step 1023: Obtain absolute position information of the image unit on the scalable vector graphic image according to the absolute distance and the absolute angle.
将绝对距离和绝对角度构成一个距离矢量,就得到了图像单元在可缩放矢量图形图像上的绝对位置信息。By constructing a distance vector from the absolute distance and the absolute angle, the absolute position information of the image unit on the scalable vector graphic image is obtained.
得到绝对位置信息后,可以将图像单元加载到目的页面。此时,还需要在目的页面设置一个新的参考点,以便图像单元能到加载到对应的位置。而如果能够得到图像单元之间的相对位置关系,那么就可以省掉在目的页面设置新参考点的步骤,也可以避免将每个图像单元根据新参考点一个一个定位加载到目的页面,可以大大简化加载图像单元的过程。为此,还可以包括:Once the absolute position information is obtained, the image unit can be loaded to the destination page. At this point, you also need to set a new reference point on the destination page so that the image unit can be loaded to the corresponding location. If the relative positional relationship between the image units can be obtained, the step of setting a new reference point on the destination page can be omitted, and each image unit can be prevented from being loaded to the destination page one by one according to the new reference point, which can be greatly Simplify the process of loading image units. To this end, it can also include:
步骤1024:根据绝对位置信息测量图像单元之间的相对距离和相对角度;Step 1024: Measure relative distances and relative angles between image units according to absolute position information;
相对距离和相对角度是在绝对位置信息的基础上得到的,能够保证可缩放矢量图形图像的整体结构。The relative distance and relative angle are obtained based on the absolute position information, and the overall structure of the scalable vector graphic image can be guaranteed.
步骤1025:根据相对距离和相对角度得到图像单元之间的相对位置信息。Step 1025: Obtain relative position information between the image units according to the relative distance and the relative angle.
得到图像单元之间的相对位置信息后,能够保证图像单元在当前尺寸下重组后仍然保持可缩放矢量图形图像的图像特性。但是,对于需要对图像单元的尺寸或距离等进行调整的情况,只有相对位置信息就无法保证可缩放矢量图形图像的图像特性了。为此,还需要获得当前图像单元的尺寸信息,建立起相对位置信息与尺寸信息的关联关系,具体包括:After obtaining the relative position information between the image units, it can be ensured that the image unit still maintains the image characteristics of the scalable vector graphic image after being recombined under the current size. However, in the case where adjustment of the size or distance of the image unit or the like is required, the image characteristics of the scalable vector graphic image cannot be guaranteed only by the relative position information. To this end, it is also necessary to obtain the size information of the current image unit, and establish an association relationship between the relative position information and the size information, which specifically includes:
步骤1026:测量图像单元的尺寸信息;Step 1026: Measure size information of the image unit;
此处的尺寸信息可以为图像单元所占据的最小矩形的尺寸信息。The size information here may be the size information of the smallest rectangle occupied by the image unit.
步骤1027:根据尺寸信息和相对位置信息得到图像单元的比例信息。Step 1027: Obtain proportional information of the image unit according to the size information and the relative position information.
将尺寸信息与相对位置信息建立关联关系得到比例信息。比例信息表征了在当前相对位置信息的前提下,各个图像单元的尺寸应该是多少; 或者,在当前图像单元的尺寸下,相对位置信息应该是多少。The relationship information is obtained by associating the size information with the relative position information. The proportional information characterizes the size of each image unit under the premise of the current relative position information; Or, what is the relative position information at the size of the current image unit.
得到上述信息后,为了便于图像单元被其他程序调用或单独被操作,还需要将每个图像单元单独保存为独立的文件。因此还包括将图像单元保存为可缩放矢量图形子图像的步骤。After obtaining the above information, in order to facilitate the image unit being called by other programs or operated alone, each image unit needs to be separately saved as a separate file. It therefore also includes the step of saving the image unit as a scalable vector graphics sub-image.
上述完成了将可缩放矢量图形图像分解为图像单元,并得到位置信息的步骤,属于“拆解”过程;之后需要将图像单元在目的页面上进行“重组”的过程。具体的,步骤103包括:The above completes the step of decomposing the scalable vector graphics image into image units and obtaining position information, which belongs to the "disassembly" process; then the process of "reorganizing" the image unit on the destination page is required. Specifically,
步骤1031:选取一个图像单元设置在目的页面的指定位置;Step 1031: Select an image unit to be set at a specified position of the destination page;
如果目的页面是网页,则指定位置就是需要放置图像单元的位置;如果目的页面是图像编辑软件的操作页面,则指定位置就是操作页面的图像操作区。If the destination page is a web page, the specified location is the location where the image unit needs to be placed; if the destination page is the operation page of the image editing software, the specified location is the image manipulation area of the operation page.
步骤1032:根据指定位置和相对位置信息确定用于重组图像单元的初始位置;Step 1032: Determine an initial position for recombining the image unit according to the specified position and relative position information;
当将一个图像单元设置在指定位置后,根据该图像单元与相对位置信息的对应关系,可以确定其他的图像单元在目的页面上的位置,即初始位置。初始位置是按照原来的图像单元之间的位置关系设定的,而在目的页面上还可能对图像单元进行各种操作(如制作动画效果等),这些操作可能会改变图像单元的位置。因此,此处得到的是初始位置。After an image unit is set at a specified position, according to the correspondence relationship between the image unit and the relative position information, the position of the other image unit on the destination page, that is, the initial position, can be determined. The initial position is set according to the positional relationship between the original image units, and various operations (such as animation effects, etc.) may be performed on the image unit on the destination page, which may change the position of the image unit. Therefore, what is obtained here is the initial position.
步骤1033:将其余的图像单元对应设置在初始位置上。Step 1033: The remaining image units are correspondingly set in the initial position.
之后,可以根据需要对图像单元进行调整并重组,步骤104具体包括:After that, the image unit can be adjusted and reorganized as needed. Step 104 specifically includes:
步骤1041:为图像单元设置用于调整图像单元的大小的边框;Step 1041: Set a frame for adjusting the size of the image unit for the image unit;
边框可以是矩形,形成于图像单元的外围,可以在矩形的四个角上设置用于改变图像单元整体大小的拖动点。还可以在矩形的每个边的中点设置用于改变图像单元横向或纵向比例的单侧调整点。The bezel may be a rectangle formed on the periphery of the image unit, and a drag point for changing the overall size of the image unit may be disposed at the four corners of the rectangle. It is also possible to set a one-sided adjustment point for changing the horizontal or vertical scale of the image unit at the midpoint of each side of the rectangle.
步骤1042:根据调整指令对边框进行调整,并将调整后的全部的图像单元重组成可缩放矢量图形重组图像。Step 1042: Adjust the frame according to the adjustment instruction, and reorganize all the adjusted image units into a scalable vector graphic recombination image.
此处的调整指令可以是对图像单元的位置、大小等进行调整的指令,也可以是对图像单元进行动画制作、渲染等操作的指令。具体的,根据调整指令对边框进行调整包括:根据调整指令对单个的图像单元的尺寸 进行调整,和/或根据比例信息对全部图像单元构成的整体结构进行调整。The adjustment command here may be an instruction to adjust the position, size, and the like of the image unit, or may be an instruction to perform an animation, rendering, or the like on the image unit. Specifically, adjusting the frame according to the adjustment instruction includes: sizing the single image unit according to the adjustment instruction The adjustment is made, and/or the overall structure of all image units is adjusted according to the scale information.
在重组图像单元前,还要确定是否全部的图像单元都被包含在内,为此还可以包括:根据位置信息检测可缩放矢量图形重组图像是否包含了全部的图像单元,若是,则生成可缩放矢量图形重组图像,否则,发出告警信息。Before reorganizing the image unit, it is further determined whether all image units are included, and may further include: detecting, according to the position information, whether the scalable vector graphics recombination image includes all image units, and if so, generating a scalable The vector graphics reorganize the image, otherwise, an alert message is sent.
实施例2Example 2
本实施例与实施例1属于同一发明构思,本实施例提供了一种可缩放矢量图形图像的重组装置,参考图2,示出了可缩放矢量图形图像的重组装置200的组成结构图,本实施例的所述重组装置200包括:The present embodiment and the embodiment 1 belong to the same inventive concept. The embodiment provides a reconfigurable device for a scalable vector graphic image. Referring to FIG. 2, a composition and a structure diagram of a
图像获取单元201,用于获取可缩放矢量图形图像;An
实际中,可缩放矢量图形图像通常保存在图片服务器内,对某个可缩放矢量图形图像进行处理时,需要先从图片服务器将可缩放矢量图形图像下载至本地。In practice, the Scalable Vector Graphics image is usually stored in the image server. When processing a Scalable Vector Graphics image, the Scalable Vector Graphics image needs to be downloaded locally from the image server.
位置信息获取单元202,用于将可缩放矢量图形图像分解为图像单元,并获取图像单元的位置信息;a location
要对可缩放矢量图形图像进行相应的处理,需要先将可缩放矢量图形图像分解为设定的图像单元,然后对每个图像单元进行单独处理。同时,为了保证处理后的图像单元在某些特征上的一致性,需要记录图像单元在可缩放矢量图形图像上的位置信息。To perform corresponding processing on the scalable vector graphics image, the scalable vector graphics image is first decomposed into set image units, and then each image unit is processed separately. At the same time, in order to ensure the consistency of the processed image unit on certain features, it is necessary to record the position information of the image unit on the scalable vector graphic image.
位置确定单元203,用于将图像单元加载至目的页面,根据位置信息确定图像单元在目的页面上的位置;a
图像单元被加载至目的页面(如网页或其他图像处理的页面)后,为了保持可缩放矢量图形图像原有的图像特性,需要保证图像单元之间的位置关系。通常,只要能确定某一个图像单元在目的页面上的位置,根据位置信息就能确定其他图像单元在目的页面的位置。After the image unit is loaded to the destination page (such as a web page or other image processed page), in order to maintain the original image characteristics of the scalable vector graphic image, it is necessary to ensure the positional relationship between the image units. Generally, as long as the position of an image unit on the destination page can be determined, the position of the other image unit on the destination page can be determined based on the location information.
图像重组单元204,用于在位置上合并图像单元,生成可缩放矢量图形重组图像。The
位置确定单元203确定了图像单元在目的页面上的位置,然后在此位置上可以单独对某个图像单元进行渲染或动画处理等操作,也可以对
图像单元进行简单的放大、缩小、位移或修改颜色等操作。最后生成可缩放矢量图形重组图像。The
为了使可缩放矢量图形图像在被分解为图像单元后还具有可缩放矢量图形图像的特性,需要在得到图像单元后,记录图像单元的位置信息,具体的,位置信息获取单元202包括:In order to make the Scalable Vector Graphics image have the characteristics of the Scalable Vector Graphics Image after being decomposed into the image unit, the location information of the image unit needs to be recorded after the image unit is obtained. Specifically, the location
参考点设置子单元2021,用于在可缩放矢量图形图像上设置参考点;a reference point setting subunit 2021, configured to set a reference point on the scalable vector graphic image;
要想得到位置信息,首先要设置参考点,以参考点为基准得到图像单元的位置信息。参考点可以设置在可缩放矢量图形图像的空白区域上,也可以是其他不影响对图像单元进行测量的位置。To get the position information, first set the reference point and get the position information of the image unit based on the reference point. The reference point can be set on a blank area of the scalable vector graphic image, or other position that does not affect the measurement of the image unit.
第一信息获取子单元2022,用于测量图像单元上的指定点到参考点的绝对距离和绝对角度;a first information acquisition subunit 2022, configured to measure an absolute distance and an absolute angle of a specified point on the image unit to the reference point;
图像单元通常不是一个点,而是一个图形,因此,在设置完参考点后,也要在图像单元上设置各自的指定点(即基准点),通过测量各个指定点到参考点之间的绝对距离和绝对角度,能够精确定位图像单元与参考点的位置关系。The image unit is usually not a point, but a graphic. Therefore, after setting the reference point, set the respective specified points (ie, reference points) on the image unit, by measuring the absolute distance between each specified point and the reference point. The distance and absolute angle enable precise positioning of the positional relationship between the image unit and the reference point.
绝对位置信息获取子单元2023,用于根据绝对距离和绝对角度得到图像单元在可缩放矢量图形图像上的绝对位置信息。The absolute position information acquisition sub-unit 2023 is configured to obtain absolute position information of the image unit on the scalable vector graphic image according to the absolute distance and the absolute angle.
将绝对距离和绝对角度构成一个距离矢量,就得到了图像单元在可缩放矢量图形图像上的绝对位置信息。By constructing a distance vector from the absolute distance and the absolute angle, the absolute position information of the image unit on the scalable vector graphic image is obtained.
得到绝对位置信息后,可以将图像单元加载到目的页面。此时,还需要在目的页面设置一个新的参考点,以便图像单元能到加载到对应的位置。而如果能够得到图像单元之间的相对位置关系,那么就可以省掉在目的页面设置新参考点的步骤,也可以避免将每个图像单元根据新参考点一个一个定位加载,可以大大简化加载图像单元的过程。因此,位置信息获取单元202还可以包括:Once the absolute position information is obtained, the image unit can be loaded to the destination page. At this point, you also need to set a new reference point on the destination page so that the image unit can be loaded to the corresponding location. If the relative positional relationship between the image units can be obtained, the step of setting a new reference point on the destination page can be omitted, and each image unit can be prevented from being loaded one by one according to the new reference point, which can greatly simplify the loading of the image. The process of the unit. Therefore, the location
第二信息获取子单元2024,用于根据绝对位置信息测量图像单元之间的相对距离和相对角度;a second information acquisition subunit 2024, configured to measure a relative distance and a relative angle between the image units according to the absolute position information;
相对距离和相对角度是在绝对位置信息的基础上得到的,能够保证可缩放矢量图形图像的整体结构。The relative distance and relative angle are obtained based on the absolute position information, and the overall structure of the scalable vector graphic image can be guaranteed.
相对位置信息获取子单元2025,用于根据相对距离和相对角度得到 图像单元之间的相对位置信息。a relative position information acquisition subunit 2025 for obtaining the relative distance and the relative angle Relative position information between image units.
得到图像单元之间的相对位置信息后,能够保证图像单元在当前尺寸下重组后仍然保持可缩放矢量图形图像的图像特性。但是,对于需要对图像单元的尺寸或距离进行调整的情况,只有相对位置信息就无法保证可缩放矢量图形图像的图像特性了。为此,还需要当前图像单元的尺寸信息,建立起相对位置信息与尺寸信息的关联关系。因此,位置信息获取单元202还可以包括:After obtaining the relative position information between the image units, it can be ensured that the image unit still maintains the image characteristics of the scalable vector graphic image after being recombined under the current size. However, in the case where it is necessary to adjust the size or distance of the image unit, only the relative position information cannot guarantee the image characteristics of the scalable vector graphic image. To this end, the size information of the current image unit is also needed, and the relationship between the relative position information and the size information is established. Therefore, the location
尺寸信息获取子单元2026,用于测量图像单元的尺寸信息;此处的尺寸信息可以为图像单元所占据的最小矩形的尺寸信息。The size information acquisition subunit 2026 is configured to measure size information of the image unit; the size information herein may be size information of a minimum rectangle occupied by the image unit.
比例信息获取子单元2027,用于根据尺寸信息和相对位置信息得到图像单元的比例信息。The ratio information acquisition sub-unit 2027 is configured to obtain the scale information of the image unit according to the size information and the relative position information.
将尺寸信息与相对位置信息建立关联关系得到比例信息。比例信息表征了在当前相对位置信息的前提下,各个图像单元的尺寸应该是多少;或者,在当前图像单元的尺寸下,相对位置信息应该是多少。The relationship information is obtained by associating the size information with the relative position information. The scale information characterizes the size of each image unit under the premise of the current relative position information; or, what the relative position information should be under the size of the current image unit.
得到上述信息后,为了便于图像单元被其他程序调用或单独被操作,还需要将每个图像单元单独保存为独立的文件。因此,位置信息获取单元202还可以包括:After obtaining the above information, in order to facilitate the image unit being called by other programs or operated alone, each image unit needs to be separately saved as a separate file. Therefore, the location
存储子单元2028,用于将图像单元保存为可缩放矢量图形子图像。The storage subunit 2028 is configured to save the image unit as a scalable vector graphics sub-image.
上述完成了将可缩放矢量图形图像分解为图像单元,并得到位置信息的步骤,属于“拆解”过程;之后需要将图像单元在目的页面上进行“重组”的过程。具体的,位置确定单元203包括:The above completes the step of decomposing the scalable vector graphics image into image units and obtaining position information, which belongs to the "disassembly" process; then the process of "reorganizing" the image unit on the destination page is required. Specifically, the
第一设置子单元2031,用于选取一个图像单元设置在目的页面的指定位置;The first setting subunit 2031 is configured to select an image unit to be set at a designated position of the destination page;
如果目的页面是网页,则指定位置就是需要放置图像单元的位置;如果目的页面是图像编辑软件的操作页面,则指定位置就是操作页面的图像操作区。If the destination page is a web page, the specified location is the location where the image unit needs to be placed; if the destination page is the operation page of the image editing software, the specified location is the image manipulation area of the operation page.
初始位置获取子单元2032,用于根据指定位置和相对位置信息确定用于重组图像单元的初始位置;An initial position acquisition subunit 2032, configured to determine an initial position for recombining the image unit according to the specified position and relative position information;
当将一个图像单元设置在指定位置后,根据该图像单元与相对位置信息的对应关系,可以确定其他的图像单元在目的页面上的位置,即初 始位置。初始位置是按照原来的图像单元之间的位置关系设定的,而在目的页面上还可能对图像单元进行各种操作(如制作动画效果等),这些操作可能会改变图像单元的位置。因此,此处得到的是初始位置。After an image unit is set at a specified position, according to the correspondence between the image unit and the relative position information, the position of the other image unit on the destination page can be determined, that is, at the beginning Starting position. The initial position is set according to the positional relationship between the original image units, and various operations (such as animation effects, etc.) may be performed on the image unit on the destination page, which may change the position of the image unit. Therefore, what is obtained here is the initial position.
第二设置子单元2033,用于将其余的图像单元对应设置在初始位置上。The second setting subunit 2033 is configured to set the remaining image units correspondingly at the initial position.
之后,可以根据需要对图像单元进行调整并重组,图像重组单元204包括:Thereafter, the image unit can be adjusted and reorganized as needed, and the
边框生成子单元2041,用于为图像单元设置用于调整图像单元的大小的边框;a frame generation subunit 2041, configured to set a frame for adjusting an image unit size for the image unit;
边框可以是矩形,形成于图像单元的外围,可以在矩形的四个角上设置用于改变图像单元大小的拖动点。还可以在矩形的每个边的中点设置用于改变图像单元横向与纵向比例的单侧调整点。The bezel may be a rectangle formed on the periphery of the image unit, and a drag point for changing the size of the image unit may be set at the four corners of the rectangle. It is also possible to set a one-sided adjustment point for changing the horizontal and vertical ratio of the image unit at the midpoint of each side of the rectangle.
可缩放矢量图形重组子单元2042,用于根据调整指令对边框进行调整,并将调整后的全部的图像单元重组成可缩放矢量图形重组图像。The scalable vector graphics recombination sub-unit 2042 is configured to adjust the frame according to the adjustment instruction, and re-form all the adjusted image units into the scalable vector graphics recombination image.
此处的调整指令可以是对图像单元的位置、大小进行调整的指令,也可以是对图像单元进行动画制作、渲染等操作的指令。可缩放矢量图形重组子单元2042还包括:调整模块,用于根据调整指令对单个的图像单元的尺寸进行调整,和/或根据比例信息对全部图像单元构成的整体结构进行调整。The adjustment command here may be an instruction to adjust the position and size of the image unit, or may be an instruction to perform an animation, rendering, or the like on the image unit. The scalable vector graphics recombination sub-unit 2042 further includes an adjustment module for adjusting the size of the individual image units according to the adjustment instruction, and/or adjusting the overall structure of all the image units according to the scale information.
在重组图像单元前,还要确定是否全部的图像单元都被包含在内,因此,可缩放矢量图形重组子单元2042还包括:执行模块,用于根据位置信息检测可缩放矢量图形重组图像是否包含了全部的图像单元,若是,则生成可缩放矢量图形重组图像,否则,发出告警信息。Before reorganizing the image unit, it is further determined whether all the image units are included. Therefore, the scalable vector graphics recombination sub-unit 2042 further includes: an execution module, configured to detect, according to the location information, whether the scalable vector graphics recombination image includes All image units, if so, generate a scalable vector graphics recombination image, otherwise, an alarm message is issued.
实施例3Example 3
以下通过一个实际场景对本申请进行详细说明。The application is described in detail below through an actual scenario.
本实施例的可缩放矢量图形图像选用一个人形图像,如图3所示,以对人形图像进行处理为例来对本申请进行详细说明,具体操作步骤包括:The scalable vector graphic image of this embodiment selects a humanoid image, as shown in FIG. 3, and the humanoid image is processed as an example to describe the application in detail. The specific operation steps include:
步骤301:获取人形图像;Step 301: Acquire a human figure image;
步骤302:将人形图像分解为图像单元,并获取图像单元的位置信息; Step 302: Decompose the human figure image into image units, and acquire position information of the image unit;
将人形图像的指定部分用区域分割线(图3中的点线)进行划取,该指定部分包含设定部分的区域。此处的设定部分将被提取为图像单元。图3中,区域分割线用于选取人形图像的腿部图形,首先用区域分割线划取包含腿部图形的区域(即指定部分),然后从中提取出腿部图形(即设定部分),如图4所示。类似的,将人形图像的每个部分都进行提取,得到全部的图像单元。需要说明的是,上述得到图像单元后,人形图像还会被保留,以便设置参考点等操作。The designated portion of the humanoid image is drawn with a region dividing line (dotted line in Fig. 3) containing the region of the setting portion. The setting portion here will be extracted as an image unit. In FIG. 3, the area dividing line is used to select the leg figure of the human figure image, firstly, the area containing the leg figure (ie, the designated part) is drawn by the area dividing line, and then the leg figure (ie, the setting part) is extracted therefrom. As shown in Figure 4. Similarly, each part of the humanoid image is extracted to obtain all the image units. It should be noted that after the image unit is obtained as described above, the human figure image is also retained to set operations such as reference points.
之后需要获得图像单元的位置信息,具体为,在人形图像的空白区域上设置一个参考点,参考点的具体位置优选选择设置在能够准确测量图像单元的距离和角度而不至于发生重叠混淆的位置。然后为每个图像单元也分别设置自己的指定点,并以参考点为坐标原点,测量指定点到参考点的绝对距离和绝对角度,这样就得到每个指定点到参考点的位置关系的距离矢量,即相对于参考点的绝对位置信息。绝对位置信息是依靠参考点才成立的,而设置不同的参考点,得到的每个图像单元的距离矢量也不同,这就使得图像单元的位置信息相对混乱。为此,可以在绝对位置信息的基础上得到图像单元之间的相对位置信息,具体为:根据绝对位置信息计算图像单元之间的相对距离和相对角度,根据相对距离和相对角度得到图像单元之间的相对位置信息,这样就建立了图像单元之间的位置关系,使得图像单元建立了一种整体性的结构。Then, the position information of the image unit needs to be obtained. Specifically, a reference point is set on the blank area of the human figure, and the specific position of the reference point is preferably selected to be set at a position capable of accurately measuring the distance and angle of the image unit without overlapping confusion. . Then, for each image unit, also set its own specified point, and use the reference point as the coordinate origin to measure the absolute distance and absolute angle of the specified point to the reference point, so that the distance of each specified point to the reference point is obtained. Vector, that is, absolute position information relative to the reference point. Absolute position information is established by relying on the reference point, and setting different reference points, the resulting distance vector of each image unit is also different, which makes the position information of the image unit relatively confusing. To this end, the relative position information between the image units can be obtained on the basis of the absolute position information, specifically: calculating the relative distance and the relative angle between the image units according to the absolute position information, and obtaining the image unit according to the relative distance and the relative angle. The relative positional information between the two thus establishes the positional relationship between the image units, so that the image unit establishes a holistic structure.
图像单元在加载到其他页面时很可能会被编辑,如将图4中的腿部图形做成动画效果或适当变形,这就会影响到腿部图形与其他图像单元之间的位置关系。为了保证对图像单元处理后还能保留人形图像原有的图像特征(如各个部分之间的位置关系和比例关系等),需要得到相对位置信息对应的图像单元的尺寸信息,即,在当前相对位置信息的前提下,图像单元的尺寸是多大。此处的尺寸信息为图像单元占据的最小矩形的尺寸。根据相对位置信息和尺寸信息就得到了能够完整保留人形图像的特征的比例信息。最后,将图像单元各自保存为独立的SVG图像。Image units are likely to be edited when loaded into other pages, such as animating or properly deforming the leg graphics in Figure 4, which affects the positional relationship between the leg graphics and other image elements. In order to ensure that the original image features of the humanoid image (such as the positional relationship and the proportional relationship between the various parts) can be retained after the image unit is processed, it is necessary to obtain the size information of the image unit corresponding to the relative position information, that is, in the current relative The size of the image unit is based on the location information. The size information here is the size of the smallest rectangle occupied by the image unit. Based on the relative position information and the size information, the scale information of the feature capable of completely retaining the humanoid image is obtained. Finally, the image units are each saved as separate SVG images.
步骤303:将图像单元加载至目的页面,根据位置信息确定图像单元在目的页面上的位置;Step 303: Loading the image unit to the destination page, and determining the location of the image unit on the destination page according to the location information;
目的页面可以是网页,也可以是其他图像处理程序的页面,此处以 网页为例,并且,在将图像单元加载到网页前,对图像单元重新着色并增加动画效果。首先,确定加载图像单元的位置,将一个图像单元加载到该位置;然后,根据相对位置信息确定其他的图像单元在该网页上的对应位置,即初始位置;最后将其他图像单元加载到网页的初始位置上,如图5所示。The destination page can be a web page or a page of other image processing programs. The web page is an example, and the image unit is recolored and the animation effect is added before the image unit is loaded into the web page. First, determining the position of the loaded image unit, loading one image unit to the position; then, determining the corresponding position of the other image unit on the webpage according to the relative position information, that is, the initial position; finally loading the other image unit into the webpage The initial position is shown in Figure 5.
步骤304:在位置上合并图像单元,生成人形图像重组图像。Step 304: Combine the image units in position to generate a humanoid image recombination image.
动画效果操作会使图像单元发生位移或旋转,为了便于操作,可以为每个图像单元生成一个边框,通过对边框的移动或旋转实现对图像单元的位移或旋转,之后通过比例信息对全部的图像单元都进行放大或缩小等操作。The animation effect operation will cause the image unit to be displaced or rotated. For the convenience of operation, a frame can be generated for each image unit, and the displacement or rotation of the image unit can be realized by moving or rotating the frame, and then the scale information is used for all the images. The unit is zoomed in or out.
经上述操作后,可以将图像单元进行重组。当图像文件很多,不易进行计数或区别时,不易确保人形图像的完整性,由于位置信息包含的相对位置信息对全部的图像单元进行了标记,因此,可以通过位置信息对图像单元的完整性进行检测。当检测结果为全部的图像单元都存在时,将全部的图像单元重组为人形重组图像;当不包含全部的图像单元时,通过声音或信息对话框发送告警。After the above operation, the image unit can be reorganized. When there are many image files that are difficult to count or distinguish, it is difficult to ensure the integrity of the humanoid image. Since the relative position information contained in the position information marks all the image units, the integrity of the image unit can be performed by the position information. Detection. When the detection result is that all the image units are present, all the image units are reorganized into a humanoid recombination image; when not all the image units are included, an alarm is sent through the sound or information dialog box.
附图中的流程图和框图,图示了按照本申请各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上,流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分,所述模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意,在有些作为替换的实现中,方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如,两个接连地表示的方框实际上可以基本并行地执行,它们有时也可以按相反的顺序执行,这依所涉及的功能而定。也要注意的是,框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合,可以用执行规定的功能或操作的专用的基于硬件的系统来实现,或者可以用专用硬件与计算机指令的组合来实现。The flowchart and block diagrams in the Figures illustrate the architecture, functionality and operation of possible implementations of systems, methods and computer program products in accordance with various embodiments of the present application. In this regard, each block of the flowchart or block diagrams can represent a module, a program segment, or a portion of code that includes one or more logic for implementing the specified. Functional executable instructions. It should also be noted that in some alternative implementations, the functions noted in the blocks may also occur in a different order than that illustrated in the drawings. For example, two successively represented blocks may in fact be executed substantially in parallel, and they may sometimes be executed in the reverse order, depending upon the functionality involved. It is also noted that each block of the block diagrams and/or flowcharts, and combinations of blocks in the block diagrams and/or flowcharts, can be implemented in a dedicated hardware-based system that performs the specified function or operation. Or it can be implemented by a combination of dedicated hardware and computer instructions.
描述于本申请实施例中所涉及到的单元可以通过软件的方式实现,也可以通过硬件的方式来实现。所描述的单元也可以设置在处理器中,例如,可以描述为:一种处理器包括图像获取单元、位置信息获 取单元、位置确定单元、图像重组单元。其中,这些单元的名称在某种情况下并不构成对该单元本身的限定。The units involved in the embodiments of the present application may be implemented by software or by hardware. The described unit may also be disposed in the processor, for example, as a processor including an image acquisition unit and location information. A unit, a position determining unit, and an image recombining unit. The names of these units do not in any way constitute a limitation on the unit itself.
作为另一方面,本申请还提供了一种计算机可读存储介质,该计算机可读存储介质可以是上述实施例中所述装置中所包含的计算机可读存储介质;也可以是单独存在,未装配入终端中的计算机可读存储介质。所述计算机可读存储介质存储有一个或者一个以上程序,所述程序被一个或者一个以上的处理器用来执行描述于本申请的可缩放矢量图形图像的重组方法。In another aspect, the present application further provides a computer readable storage medium, which may be a computer readable storage medium included in the apparatus described in the foregoing embodiment, or may exist separately, not A computer readable storage medium that is assembled into a terminal. The computer readable storage medium stores one or more programs that are used by one or more processors to perform a method of recombining a scalable vector graphics image as described herein.
以上描述仅为本申请的较佳实施例以及对所运用技术原理的说明。本领域技术人员应当理解,本申请中所涉及的发明范围,并不限于上述技术特征的特定组合而成的技术方案,同时也应涵盖在不脱离所述发明构思的情况下,由上述技术特征或其等同特征进行任意组合而形成的其它技术方案。例如上述特征与本申请中公开的(但不限于)具有类似功能的技术特征进行互相替换而形成的技术方案。 The above description is only a preferred embodiment of the present application and a description of the principles of the applied technology. It should be understood by those skilled in the art that the scope of the invention referred to in the present application is not limited to the specific combination of the above technical features, and should also be covered by the above technical features without departing from the inventive concept. Other technical solutions formed by any combination of their equivalent features. For example, the above features are combined with the technical features disclosed in the present application, but are not limited to the technical features having similar functions.
Claims (20)
Applications Claiming Priority (2)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201510564649.0 | 2015-09-07 | ||
| CN201510564649.0A CN105243082B (en) | 2015-09-07 | 2015-09-07 | The recombination method and reconstruction unit of scalable vector graphics image |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| WO2017041383A1 true WO2017041383A1 (en) | 2017-03-16 |
Family
ID=55040731
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| PCT/CN2015/098226 Ceased WO2017041383A1 (en) | 2015-09-07 | 2015-12-22 | Scalable vector graphic image reorganization method and reorganization apparatus |
Country Status (2)
| Country | Link |
|---|---|
| CN (1) | CN105243082B (en) |
| WO (1) | WO2017041383A1 (en) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115858401A (en) * | 2023-02-27 | 2023-03-28 | 成都光合信号科技有限公司 | Page detection method and device, electronic equipment and storage medium |
Families Citing this family (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110287431B (en) * | 2019-06-27 | 2021-08-24 | 北京金山安全软件有限公司 | Image file loading method, device, electronic device and storage medium |
| AU2021204186B2 (en) * | 2020-06-29 | 2022-09-01 | Canva Pty Ltd. | Systems and methods for recolouring vector graphics |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20020109729A1 (en) * | 2000-12-14 | 2002-08-15 | Rabindranath Dutta | Integrating content with virtual advertisements using vector graphics images obtainable on the web |
| CN1917635A (en) * | 2006-08-25 | 2007-02-21 | 中山大学 | Method for transferring data of vector graphics |
| CN102930001A (en) * | 2012-10-26 | 2013-02-13 | 北京法兰奇科技有限责任公司 | Object image stereo high-definition enlarging display method for Internet web webpage |
Family Cites Families (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103226471A (en) * | 2013-03-21 | 2013-07-31 | 南京工业大学 | Design method of firmware graphical user interface based on SVG |
| CN104680421B (en) * | 2013-11-26 | 2019-02-12 | 浙江大华系统工程有限公司 | A kind of saleable vector graphics SVG display methods and device |
| CN103955549A (en) * | 2014-05-26 | 2014-07-30 | 重庆大学 | Web GIS system based on SVG and data input and search method thereof |
-
2015
- 2015-09-07 CN CN201510564649.0A patent/CN105243082B/en active Active
- 2015-12-22 WO PCT/CN2015/098226 patent/WO2017041383A1/en not_active Ceased
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20020109729A1 (en) * | 2000-12-14 | 2002-08-15 | Rabindranath Dutta | Integrating content with virtual advertisements using vector graphics images obtainable on the web |
| CN1917635A (en) * | 2006-08-25 | 2007-02-21 | 中山大学 | Method for transferring data of vector graphics |
| CN102930001A (en) * | 2012-10-26 | 2013-02-13 | 北京法兰奇科技有限责任公司 | Object image stereo high-definition enlarging display method for Internet web webpage |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115858401A (en) * | 2023-02-27 | 2023-03-28 | 成都光合信号科技有限公司 | Page detection method and device, electronic equipment and storage medium |
Also Published As
| Publication number | Publication date |
|---|---|
| CN105243082B (en) | 2018-11-30 |
| CN105243082A (en) | 2016-01-13 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN103093484B (en) | A kind of method of remote sensing image batch integrated with vector data drawing | |
| US11561637B2 (en) | Method and device of drawing handwriting track, electronic apparatus, medium, and program product | |
| CN114675925B (en) | Configuration image processing method and device, computer equipment and storage medium | |
| WO2015131575A1 (en) | Layer-based processing method and device, and computer storage medium | |
| CN104202546B (en) | CAVE immersions virtual display system and display methods | |
| CN110532497B (en) | Method for generating panorama, method for generating three-dimensional page and computing device | |
| JP2015079354A (en) | Three-dimensional map display system using virtual reality | |
| CN111459501A (en) | SVG-based Web configuration picture storage and display system, method and medium | |
| WO2022033131A1 (en) | Animation rendering method based on json data format | |
| CN106097428B (en) | Method and device for labeling three-dimensional model measurement information | |
| CN116109765A (en) | Three-dimensional rendering method and device for labeling objects, computer equipment and storage medium | |
| CN109598672B (en) | Map road rendering method and device | |
| WO2017041383A1 (en) | Scalable vector graphic image reorganization method and reorganization apparatus | |
| CN108447106B (en) | Generation method and device of venue seat map | |
| CN114298915A (en) | Image object processing method and device, storage medium and electronic device | |
| CN107967689A (en) | A kind of image boundary detection method and equipment | |
| WO2021135325A1 (en) | Method and apparatus for gis point data rendering, computer device, and storage medium | |
| CN113345048B (en) | Geographic information image editing method, device and computer equipment | |
| CN113987649A (en) | Model generation method and device | |
| WO2025082262A1 (en) | Video processing method and related device | |
| WO2021190335A1 (en) | Method and device for generating spliced picture, and storage medium | |
| CN117911566A (en) | Point location drawing method and system of plan | |
| CN116797702A (en) | SVG processing method and device, storage medium and electronic equipment | |
| CN116700704A (en) | Image processing method, device, storage medium and electronic equipment | |
| CN114797109A (en) | Object editing method and device, electronic equipment and storage medium |
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: 15903486 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: 15903486 Country of ref document: EP Kind code of ref document: A1 |