Embodiment
In order to make purpose of the present invention, technical scheme and advantage clearer, below in conjunction with drawings and Examples, the present invention is further elaborated, for convenience of explanation, only show the part relevant with the embodiment of the invention.Should be appreciated that the specific embodiment that this place is described, only be used for explaining the present invention, not in order to limit the present invention.
The present invention draws information by the picture that the assembly of resolving UI packet securing component is drawn information and picture, and draws described picture according to described assembly drafting information and picture drafting information.The present invention has reduced in the multiresolution picture is adaptive and has cut the figure workload, and same set of UI resource is adaptive different resolution portable terminal simultaneously, has simplified the interface adaptation procedure, has improved the picture Adaption efficiency, has realized the picture self-adaptation.The present invention is further clear and definite, and assembly drafting information and picture are drawn the content of information, describe simultaneously the computation process of number percent parameter, pixel value parameter, each coordinate and wide height in detail, guaranteed the automatically various display effect of realization of picture, ensure the consistance of picture display position and viewing area on screen, improved the adaptive feasibility of picture.
Embodiment one
Fig. 1 is the first preferred embodiment process flow diagram of a kind of picture adaptive approach of the present invention.Described method comprises step:
S101 obtains the UI packet;
Before this, the picture of at first drawing information and picture by server end according to the assembly of UI design requirement definitions component is drawn information, and draws information and picture drafting information creating UI packet according to described assembly;
Then obtain described UI packet by middleware;
Described assembly drafting information comprises component parameter and the component property of assembly; Described picture drafting information comprises picture anchor point and the image parameters of picture;
Described UI packet encapsulation component parameter and the component property of middleware required component, also encapsulated simultaneously picture anchor point and the image parameters of picture, the UI packet after the encapsulation offers middleware by server end;
Described assembly (Component) is the most basic display unit of middleware UI layer, but display text, picture, animation, webpage, video etc.;
Each assembly has a unique component Name as the display unit at ui interface, and described component Name is used for distinguishing each assembly;
S102, the assembly of resolving described UI packet securing component is drawn the picture drafting information of information and picture;
Namely resolve component parameter and the component property of described UI packet securing component; Also obtain simultaneously picture anchor point and the image parameters of picture;
Described component parameter comprises the coordinate (x coordinate, y coordinate) of assembly and the wide height of assembly (width, highly), described component parameter can be the pixel value component parameter, it also can be the number percent component parameter, represent x coordinate, y coordinate, width and height with x, y, width, height respectively, the coordinate that wherein represents with the number percent component parameter is called the relative coordinate of assembly, with number percent the component parameter width that represents and the relative wide height that highly is called assembly;
The number percent component parameter is that to choose arbitrary resolution screen according to UI design requirement and assembly layout be the number percent component parameter that object of reference estimates, and is specially:
Choose estimation coordinate and the wide height of estimation that arbitrary resolution screen is object of reference estimation assembly according to UI design requirement and assembly layout;
Obtain the relative coordinate and relative wide height of described assembly according to the estimation coordinate of described assembly and the wide height of estimation;
Relative coordinate in the described number percent component parameter refers to described assembly with respect to the coordinate position in parent component or the screen upper left corner, is that wide height with parent component or screen is as calculating basis; Relative coordinate without the assembly of parent component is calculated take the wide height of screen as calculating basis;
Namely, when described assembly had parent component, the relative coordinate of described assembly was the number percent that the wide height of described assembly accounts for the wide height of parent component; When described assembly during without parent component, the relative coordinate of described assembly is the number percent that the wide height of described assembly accounts for the wide height of screen;
Namely, when described assembly had parent component, the relative coordinate of described assembly was the number percent that the difference of the absolute coordinates in the absolute coordinates in the described assembly upper left corner and the parent component upper left corner accounts for the wide height of parent component; When described assembly during without parent component, the relative coordinate of described assembly is the number percent that the absolute coordinates in the described assembly upper left corner accounts for the wide height of screen;
The relative coordinate that the assembly of parent component is arranged is the coordinate-system of relative parent component, and this coordinate-system is take the upper left corner of parent component as true origin, and x increases left, and y increases downwards;
Relatively wide height in the described number percent component parameter refers to that the absolute wide height of described assembly is with respect to the number percent of parent component or the absolute wide height of screen;
Described component property comprises parent component title and sub-component sequence; Described parent component title has recorded the parent component of described assembly; Described parent component refers to include the assembly of sub-component; Described sub-component sequential recording all sub-components of described assembly; Described sub-component refers to the assembly that comprised by parent component can iteration comprise again next stage sub-component; Each assembly can also can have one group of sub-component sequence as the parent component of other assemblies, and the parent component of assembly can only have one, and the sub-component sequence can have a plurality of; For example represent the parent component title of assembly and the sub-component sequence of assembly with parent and subList respectively;
Described assembly can be several assemblies, sets up nest relation by the parent component title in the described component property and sub-component sequence between each assembly, and described nest relation comprises relation of inclusion or involved relation;
Described picture anchor point refers to described picture with respect to the position of assembly under the described picture, comprises occupying left LEFT, occupying right RIGHT, TOP on the horizontal center HCENTER, residence, occupy lower BOTTOM and vertical center VCENTER;
Described image parameters also can be pixel value image parameters or number percent picture parameter;
Described pixel value image parameters comprises absolute coordinates and the absolute wide height of picture;
The absolute coordinates of described picture equals the absolute coordinates of assembly under the wide height of assembly under the described picture of relative coordinate * of described picture+described picture;
The absolute wide height of described picture equals the wide height of the affiliated assembly of the described picture of relatively wide height * of described picture;
Described number percent picture parameter is that to choose arbitrary resolution screen according to UI design requirement and figure chip layout be the number percent picture parameter that object of reference estimates, and is specially:
Choose estimation coordinate and the wide height of estimation that arbitrary resolution screen is object of reference estimation picture according to UI design requirement and figure chip layout;
Obtain the relative coordinate and relative wide height of described picture according to the estimation coordinate of described picture and the wide height of estimation;
Described number percent picture parameter comprises the relative coordinate and relative wide height of picture;
The difference that the estimation coordinate that the relative coordinate of described picture equals described picture deducts the estimation coordinate of assembly under the described picture is again divided by the wide height of estimation of assembly under the described picture;
The wide height of estimation that the relatively wide height of described picture equals described picture is divided by the wide height of estimation of assembly under the described picture;
S103 draws described picture according to described assembly drafting information and picture drafting information;
Draw described picture according to described component parameter, component property, picture anchor point and image parameters, with described Image Display on terminal device.
Embodiment two
Fig. 2 is the second preferred embodiment process flow diagram of a kind of picture adaptive approach of the present invention.Described method comprises step:
S201, number percent component parameter and component property according to UI design requirement definitions component, define simultaneously picture anchor point and the number percent picture parameter of picture, then create the UI packet according to described number percent component parameter, component property, picture anchor point and number percent picture parameter;
Server end is determined interface layout according to product UI design requirement, the nest relation of component type, number percent component parameter and the inter-module of definition middleware required component;
Server end also according to product UI design requirement, is determined the figure chip layout, picture anchor point and the number percent picture parameter of the required picture of definition middleware;
At last, server end is packaged into the UI Packet Generation to middleware with the nest relation of described component type, number percent component parameter and inter-module and picture anchor point and the number percent picture parameter of picture;
For ease of understanding, 320x480 illustrates with screen, and design requirement is as follows: show a pictures, fill full whole screen, picture name is sample1.jpg, picture size 320x480, as shown in Figure 4;
Find out that very simply the drafting effect that design requirement need to reach is exactly to show a picture that fully supports whole screen; According to this design requirement, design component com1, assembly com1 without sub-component, only have the drafting of picture sample1.jpg without parent component, and picture is drawn and fully supported screen, and the wide height of picture drawing area is identical with the wide height of com1 assembly;
According to above analysis, the drafting reference position of com1 draws the estimation coordinate (0,0) of com1 assembly in the screen upper left corner, the com1 assembly fully supports whole screen, so the wide height of the estimation of com1 assembly is (320,480), picture is drawn reference position also in the screen upper left corner and full frame drafting, so the estimation coordinate that picture is drawn also is (0,0), estimates that wide height also is (320,480).
Further, be the relative coordinate and relative wide height of assembly with the estimation coordinate of assembly with the wide height conversion of estimation, namely be converted to the number percent component parameter, be specially:
The com1 assembly is screen assembly without parent component, and the number percent component parameter converts all take the wide height of screen as reference point, and the relative coordinate of com1 and relative wide height are all with respect to screen;
The estimation coordinate (0 of com1 assembly, 0) deducts screen upper left corner coordinate (0,0), gets (0,0), the conversion relative coordinate is (0/ screen width, 0/ screen height)=(0/320,0/480)=(0,0), so the relative coordinate of com1 assembly is (0,0) still;
The wide height of estimation that the relatively wide height of screen assembly com1 is screen assembly is divided by the ratio value of the wide height of screen, so wide height (320 of the estimation of com1,480) divided by the wide height (320 of screen, 480)=>(320/320,480/480)=>relative coordinate (100%, 100%), namely the relatively wide height of com1 is (100%, 100%);
At this moment, there has been the relative coordinate of assembly just can guarantee that with relative wide height the com1 assembly all fully supports whole screen when any screen is drawn;
The relative coordinate of picture sample1 and relative wide height are that the relative position of the assembly under described picture and the described picture estimates;
The relative coordinate of picture sample1 for its draw origin coordinates deduct under the ratio of wide height of the difference of origin coordinates of assembly com1 and affiliated assembly com1, calculate by this definition: the estimation coordinate (0 of sample1,0) deducts the estimation coordinate (0 of com1 assembly, 0) gets (0,0), divided by the wide height of the estimation of com1 assembly (0/320,0/480)=>relative coordinate of picture is (0,0);
The wide height of estimation that the relatively wide height of picture is described picture is divided by the ratio of the wide height of estimation of assembly under the described picture, and namely the relatively wide height of sample1 is (320/320,480/480)=(100%, 100%);
Respectively with posX1=0, posY1=0, paraW1=100%, the relative coordinate of paraH1=100% recordable picture sample1 and relative wide height can be determined the picture anchor point anchor1=LEFT|TOP of described picture sample1 simultaneously;
S202 obtains the UI packet;
Here being middleware is carrying out picture when adaptive, no matter middleware need to carry out adaptive to the screen of which kind of resolution, at this moment all need to obtain number percent component parameter, component property, number percent picture parameter and picture anchor point in the UI packet, and can carry out according to described number percent component parameter, number percent picture parameter and picture anchor point the picture self-adaptation of various resolution screen;
S203 resolves picture anchor point and number percent picture parameter that described UI packet obtains number percent component parameter, component property and the described picture of described assembly;
For ease of understanding, illustrate, for example resolve described UI packet and get access to following information;
Get access to the assembly of com1, his father's component Name parent is empty, and sub-component sequence subList also is empty, and needs the picture sample1.jpg of demonstration;
Get access to the number percent component parameter of com1, wherein x, y, width, height are respectively 0,0,100%, 100%;
The relative coordinate of picture sample1.jpg is respectively posX1=0 with relative wide height, posY1=0, paraW1=100%, paraH1=100%, picture anchor point anchor1=LEFT|TOP, picture size 320x480;
S204 is converted to pixel value component parameter and pixel value image parameters with described number percent component parameter and described number percent picture parameter;
Described pixel value component parameter comprises absolute coordinates and the absolute wide height of described assembly;
When the absolute coordinates of described assembly referred to draw described assembly, described assembly was with respect to the coordinate position in the screen upper left corner;
Described assembly also claims origin coordinates with respect to the coordinate position in the screen upper left corner;
The absolute wide height that the relative coordinate that absolute coordinates in the described pixel value component parameter equals described assembly multiply by described assembly parent component adds the absolute coordinates of parent component again;
The relatively wide height that absolute wide height in the described pixel value component parameter equals described assembly multiply by the absolute wide height of described assembly parent component;
Wherein, the absolute coordinates of the screen assembly relative coordinate that equals screen assembly multiply by the wide height of screen; The relatively wide height that the absolute wide height of screen assembly equals screen assembly multiply by the wide height of screen;
Illustrate: the absolute coordinates of com1 is (0,0), overlaps with screen upper left corner coordinate (0,0);
The absolute width of com1=100%* screen width=screen width, the absolute altitude of com1=100%* screen height=screen height, namely the absolute wide height of com1 is (320,480), is illustrated in figure 3 as the wide high-level schematic of com1 on the 320x480 screen;
The absolute coordinates of picture sample1.jpg is (0,0), and the picture anchor point is the upper left corner, so (0,0) is the upper left corner graphical pointv of sample1.jpg;
The absolute width of picture sample1.jpg=relative width 100%*320 (the absolute width of com1)=320, the absolute altitude of picture sample1.jpg=relative height 100%*480 (absolute altitude of com1)=480, the target drawing area that gets picture sample1.jpg is (320,480); The size of picture sample1.jpg is 320x480, is equal to drawing area (320,480), processes so the drawing process of picture sample1.jpg need not convergent-divergent;
S205 draws described picture according to described pixel value component parameter, component property, pixel value image parameters and picture anchor point according to nested order from front to back;
Described nested order is from front to back drawn described picture and is referred to draw according to the sequencing that picture adds in the assembly, and the picture that adds to first in the assembly is drawn first, draws behind the picture of rear interpolation;
In this example, only have an assembly and a picture, get final product so directly draw described picture, be illustrated in figure 4 as the design sketch of picture sample1.jpg after the 320x480 screen is drawn;
In order more to describe present embodiment in detail, again illustrate the drawing process when a plurality of assemblies and a plurality of picture are arranged:
320x480 illustrates with screen, in this example, resolving described UI packet, to get access to assembly be com1 and com2, and get access to picture sample1.jpg and sample2.jpg, com1 and com2 set up by each self-corresponding parent component title parent and sub-component sequence subList and comprise to each other and involved nest relation, and wherein com1 comprises com2;
The number percent component parameter x, y, width, the height that obtain com1 are respectively 0,0,100%, 100%, the parent component title parent of com1 is empty, sub-component sequence subList is com2, needs rendered images sample1.jpg, picture size 320x480, as shown in Figure 4, the number percent picture parameter of picture is posX1=0, posY1=0, paraW1=100%, paraH1=100%, picture anchor point anchor1=LEFT|TOP;
The number percent component parameter x, y, width, the height that get access to com2 are respectively 0,0,100%, 50%; The parent component title parent of com2 is com1, needs rendered images sample2.jpg, and picture size is 240x240, the number percent picture parameter of picture is posX2=50%, posY2=50%, paraW2=100%, picture anchor point anchor2=HCENTER|VCENTER;
Further, the number percent component parameter is converted to the pixel value component parameter, number percent picture parameter is converted to the pixel value image parameters:
The absolute coordinates of com1 overlaps with screen upper left corner coordinate, is (0,0); The absolute width of com1=100%* screen width=screen width, the absolute altitude of com1=100%* screen height=screen height, calculate the absolute wide height of com1 for (320,480);
The absolute coordinates of com2 is (0,0), the absolute wide height of com2 be (the absolute width of 100%*com1, the absolute altitude of 50%*com1)=>(100%*320,50%*480)=(320,240);
The relative coordinate posX1=0 of picture sample1.jpg, posY1=0 adds the origin coordinates (0,0) of assembly com1, the absolute coordinates that gets sample1 is (0,0), and the drafting anchor point is the upper left corner, so (0,0) is the upper left corner graphical pointv of picture sample1.jpg; The absolute width of picture sample1.jpg=relative width 100%*320 (the absolute width of com1)=320, absolute altitude=relative height 100%*480 (absolute altitude of com1)=480, the picture drawing area is (320,480);
The relative coordinate posX2=50%*320 of picture sample2.jpg (width of com2)=160, posY2=50%*240 (height of com2)=120, the origin coordinates (0 of cumulative upper com2 assembly, 0), get the absolute coordinates (160,120) of sampl e2, and the picture anchor point is that horizontal vertical is placed in the middle, graphical pointv centered by (so 160,120); The absolute width of picture sample2.jpg=relative width 100%*320 (the absolute width of com2)=320; Only set relative width paraW2 in this example, do not set relative height paraH2, this situation adopts uniform zoom strategy, keeps the wide high ratio of picture, namely behind the convergent-divergent behind picture width and the convergent-divergent ratio of picture height must equal picture original width and picture original height ratio;
It is 320 that the absolute width of picture has been calculated, and the original wide height of picture all is 240, and wide height equates that absolute altitude also is 320 after definite uniform zoom easily, so picture sample2.jpg target drawing area is (320,320); But the absolute altitude of com2 assembly is 240, less than the height (320) of picture drawing area, with (320,320) for after drawing area draws, but the drafting of the partial content of sample2.jpg will exceed the viewing area of com2; For picture is complete is presented in the assembly com2, correcting the target drawing area is assembly viewing area (320,240), use " with regard to little principle ": in uniform zoom, get target width and former figure width ratio, object height and former figure height ratio minimum value as pantograph ratio;
The width maximum zoom ratio of picture is: the width of viewing area (320)/picture original width (240)=1.333; Height maximum zoom ratio is: the height of viewing area (240)/picture original height (240)=1.0; Get minimum value 1.0, use 1.0 pantograph ratio drafting sample2.jpg, guarantee that picture is complete is presented at the com2 component internal; Design sketch after picture sample1.jpg and sample2.jpg draw as shown in Figure 5.
Illustrate with 4 assemblies, for example use 4 assembly com1, com2, com3 and com4.
Wherein, com1 assembly relative coordinate is (0,0), relatively wide height is (100%, 100%), without parent component, the picture that needs to show is sample1.jpg, wherein picture number percent parameter is respectively posX1=0, posY1=0, paraW1=100%, paraH1=100%, the picture anchor point is anchor1=LEFT|TOP, picture size 320x480;
The parent component of com2 assembly is com1, relative coordinate is (0,0), relatively wide height is (100%, 50%), the picture that needs to show is sample2.jpg, wherein picture number percent parameter is respectively posX2=50%, posY2=50%, paraW2=100%, picture anchor point anchor2=HCENTER|VCENTER, picture size is 240x240;
The parent component of com3 assembly is com1, relative coordinate (0,50%), relatively wide height is (50%, 25%), the picture that needs to show is sample2.jpg, and wherein picture number percent parameter is respectively posX3=50%, posY3=50%, paraH3=100%, paraW3=100%, picture anchor point anchor3=HCENTER|VCENTER, picture size is 240x240;
The parent component of com4 assembly is com1, relative coordinate (50%, 75%), relatively wide height is (50%, 25%), and the picture that needs to show is sample3.jpg, wherein picture number percent parameter is respectively posX4=100%, posY4=100%, picture anchor point anchor4=RIGHT|BOTTOM, picture size is 40x90;
Take screen resolution 320x480 as example, the absolute wide height that can calculate com1, com2, com3 and com4 is respectively: (320,480), (320,240), (160,120), (160,120), absolute coordinates is respectively: (0,0), (0,0), (0,240), (160,360);
The number percent picture parameter conversion of sample1.jpg among the com1 is pixel value image parameters: posX1=0, posY1=0, add the origin coordinates (0 of assembly com1,0) the drafting origin coordinates that, gets sample1 is (0,0), the drafting anchor point is the upper left corner, upper left angle point that draw for sample1 (so 0,0);
ParaW1=100%*320 (width of com1)=320, paraH1=100%*480 (height of com1)=480, the target drawing area is (320,480).The size of picture sample1.jpg is 320x480, is equal to drawing area (320,480), processes so the drafting of sampl e1.jpg need not convergent-divergent, and the design sketch after the drafting as shown in Figure 6;
The number percent picture parameter conversion of sample2.jpg among the com2 is pixel value image parameters: posX2=50%*320 (width of com2)=160, posY2=50%*240 (height of com2)=120, the origin coordinates (0 of cumulative upper com2 assembly, 0), getting the drafting origin coordinates (160,120) of sample2.jpg, is that horizontal vertical is placed in the middle and draw anchor point, so (160,120) are for drawing central point;
ParaW2=100%*320 (width of com2)=320 has only set paraW2, does not set paraH2, so sample2.jpg uses uniform zoom, to have calculated be 320 to width behind the image zooming, is to keep the wide high ratio of picture, must have:
Height=picture width/picture height behind width/convergent-divergent behind the convergent-divergent;
Can calculate behind the sample2.jpg convergent-divergent highly also is 320, and the target drawing area is (320,320); But the com2 component height is 240, and less than the height (320) of picture drawing area, but the drafting of the partial content of sample2.jpg will go out the com2 viewing area.In order to guarantee the complete component internal that is presented at of picture energy, correcting drawing area is (320,240), according to " with regard to little principle ": in uniform zoom, get target width and former figure width ratio, object height and former figure height ratio minimum value as pantograph ratio.Can be regarded as to such an extent that the best pantograph ratio of sample2.jpg is 1.0.
Namely require sample2.jpg actual displayed zone can not surpass the viewing area 320x240 of com2 assembly, so the width drawn of sample2.jpg can not surpass 320, amplify if that is to say sample2.jpg, the breadth extreme after then amplifying can not surpass 320, so
Picture sample2.jpg width maximum zoom ratio is: but the width of maximum viewing area (320)/picture original width (240)=1.333;
In like manner can get:
Picture sample2.jpg height maximum zoom ratio is: but the height of maximum viewing area (240)/picture original height (240)=1.0;
Get minimum value 1.0, the effect behind the convergent-divergent as shown in Figure 6;
The number percent picture parameter conversion of sample2.jpg among the com3 is pixel value image parameters: posX3=50%*160 (width of com3)=80, posY3=50%*120 (height of com3)=60, the origin coordinates (0 of cumulative upper com3 assembly, 240), get the drafting origin coordinates (80,300) of sample2.jpg among the com3, anchor point is that horizontal vertical is placed in the middle, namely (80,300) are that sampl e2.jpg draws central point among the com3.
ParaW3=100%*160 (width of com3)=160, paraH3=100%*120 (height of com3)=120 gets target drawing area (160,120); The big or small 240x240 of known picture, exceed the drawing area size, so must do convergent-divergent to picture processes, wide high convergent-divergent score is not: 160/240=0.666,120/240=0.5, wide pantograph ratio 0.666 is greater than height pantograph ratio 0.5, sample2.jpg can be stretched horizontally among the effect com3 so finally draw, and draws effect as shown in Figure 6;
Among the com4 the number percent picture parameter conversion of sample3.jpg be pixel value image parameters: posX4=100%*160 (width of com4)=160, posY4=100%*120 (height of com4)=120, cumulative com4 assembly origin coordinates (160,360), get sample3.jpg and draw origin coordinates (320,480), anchor point is the lower right corner; ParaW4 and paraH4 do not have setting, and this situation adopts the picture original size to draw strategy, and namely the original size 40x90 according to sample3.jpg draws;
Design sketch after four pictures are drawn as shown in Figure 6, wherein the dotted line around each picture is the drafting design sketch of assembly under the described picture.
The present invention draws information by the picture that the assembly of resolving UI packet securing component is drawn information and picture, and draws described picture according to described assembly drafting information and picture drafting information.The present invention has reduced in the multiresolution picture is adaptive and has cut the figure workload, and same set of UI resource is adaptive different resolution portable terminal simultaneously, has simplified the interface adaptation procedure, has improved the picture Adaption efficiency, has realized the picture self-adaptation.The present invention is further clear and definite, and assembly drafting information and picture are drawn the content of information, describe simultaneously the computation process of number percent parameter, pixel value parameter, each coordinate and wide height in detail, guarantee the automatically various display effect of realization of picture, ensure the consistance in the position of picture on screen and zone, improved the adaptive feasibility of picture.
Embodiment three
Fig. 7 is the first preferred embodiment structural representation of a kind of picture adaptive system of the present invention.Described system comprises the first acquisition module, parsing module, the second acquisition module and drafting module;
Described the first acquisition module links to each other with described parsing module, is used for obtaining the UI packet;
Before this, the picture of at first drawing information and picture by server end according to the assembly of UI design requirement definitions component is drawn information, and draws information and picture drafting information creating UI packet according to described assembly;
Then obtain described UI packet by middleware;
Described assembly drafting information comprises component parameter and the component property of assembly; Described picture drafting information comprises picture anchor point and the image parameters of picture;
Described UI packet encapsulation component parameter and the component property of middleware required component, also encapsulated simultaneously picture anchor point and the image parameters of picture, the UI packet after the encapsulation offers middleware by server end;
Described assembly (component) is the most basic display unit of middleware UI layer, but display text, picture, animation, webpage, video etc.;
Each assembly has a unique component Name as the display unit at ui interface, and described component Name is used for distinguishing each assembly;
Described parsing module links to each other with the second acquisition module with described the first acquisition module, is used for resolving described UI packet;
Described the second acquisition module links to each other with drafting module with described parsing module, and the assembly that is used for securing component is drawn the picture drafting information of information and picture;
Namely resolve component parameter and the component property of described UI packet securing component; Also obtain simultaneously picture anchor point and the image parameters of picture;
Described component parameter comprises the coordinate (x coordinate, y coordinate) of assembly and the wide height of assembly (width, highly), described component parameter can be the pixel value component parameter, it also can be the number percent component parameter, represent x coordinate, y coordinate, width and height with x, y, width, height respectively, the coordinate that wherein represents with the number percent component parameter is called the relative coordinate of assembly, with number percent the component parameter width that represents and the relative wide height that highly is called assembly;
The number percent component parameter is that to choose arbitrary resolution screen according to UI design requirement and assembly layout be the number percent component parameter that object of reference estimates, and is specially:
Choose estimation coordinate and the wide height of estimation that arbitrary resolution screen is object of reference estimation assembly according to UI design requirement and assembly layout;
Obtain the relative coordinate and relative wide height of described assembly according to the estimation coordinate of described assembly and the wide height of estimation;
Relative coordinate in the described number percent component parameter refers to described assembly with respect to the coordinate position in parent component or the screen upper left corner, is that wide height with parent component or screen is as calculating basis; Relative coordinate without the assembly of parent component is calculated take the wide height of screen as calculating basis;
Namely, when described assembly had parent component, the relative coordinate of described assembly was the number percent that the wide height of described assembly accounts for the wide height of parent component; When described assembly during without parent component, the relative coordinate of described assembly is the number percent that the wide height of described assembly accounts for the wide height of screen;
Namely, when described assembly had parent component, the relative coordinate of described assembly was the number percent that the difference of the absolute coordinates in the absolute coordinates in the described assembly upper left corner and the parent component upper left corner accounts for the wide height of parent component; When described assembly during without parent component, the relative coordinate of described assembly is the number percent that the absolute coordinates in the described assembly upper left corner accounts for the wide height of screen;
The assembly relative coordinate that parent component is arranged is in the coordinate-system of relative parent component, and take the upper left corner of parent component as true origin, x increases left, and y increases downwards;
Relatively wide height in the described number percent component parameter refers to that the absolute wide height of described assembly is with respect to the number percent of parent component or the absolute wide height of screen;
Described component property comprises parent component title and sub-component sequence; Described parent component title has recorded the parent component of described assembly; Described parent component refers to include the assembly of sub-component; Described sub-component sequential recording all sub-components of described assembly; Described sub-component refers to the assembly that comprised by parent component can iteration comprise again next stage sub-component; Each assembly can also can have one group of sub-component sequence as the parent component of other assemblies, and the parent component of assembly can only have one, and the sub-component sequence can have a plurality of; For example represent the parent component title of assembly and the sub-component sequence of assembly with parent and subList respectively;
Described assembly can be several assemblies, sets up nest relation by the parent component title in the described component property and sub-component sequence between each assembly, and described nest relation comprises relation of inclusion or involved relation;
Described picture anchor point refers to described picture with respect to the position of assembly under the described picture, comprises occupying left LEFT, occupying right RIGHT, TOP on the horizontal center HCENTER, residence, occupy lower BOTTOM and vertical center VCENTER;
Described image parameters also can be pixel value image parameters or number percent picture parameter;
Described pixel value image parameters comprises absolute coordinates and the absolute wide height of picture;
The absolute coordinates of described picture equals the absolute coordinates of assembly under the wide height of assembly under the described picture of relative coordinate * of described picture+described picture;
The absolute wide height of described picture equals the wide height of the affiliated assembly of the described picture of relatively wide height * of described picture;
Described number percent picture parameter is that to choose arbitrary resolution screen according to UI design requirement and figure chip layout be the number percent picture parameter that object of reference estimates, and is specially:
Choose estimation coordinate and the wide height of estimation that arbitrary resolution screen is object of reference estimation picture according to UI design requirement and figure chip layout;
Obtain the relative coordinate and relative wide height of described picture according to the estimation coordinate of described picture and the wide height of estimation;
Described number percent picture parameter comprises the relative coordinate and relative wide height of picture;
The difference that the estimation coordinate that the relative coordinate of described picture equals described picture deducts the estimation coordinate of assembly under the described picture is again divided by the wide height of estimation of assembly under the described picture;
The wide height of estimation that the relatively wide height of described picture equals described picture is divided by the wide height of estimation of assembly under the described picture;
Described drafting module links to each other with described the second acquisition module, is used for drawing described picture according to described assembly drafting information and picture drafting information.
The further optimization of such scheme is that described system also comprises definition module and creation module, is illustrated in figure 8 as the second preferred embodiment structural representation of a kind of picture adaptive system of the present invention;
Described definition module links to each other with described creation module, is used for drawing according to the assembly of UI design requirement definitions component the picture drafting information of information and picture;
Described creation module links to each other with the first acquisition module with described definition module, is used for drawing information and picture drafting information creating UI packet according to described assembly.
Server end is determined interface layout according to product UI design requirement, the nest relation of component type, number percent component parameter and the inter-module of definition middleware required component;
Server end also according to product UI design requirement, is determined the figure chip layout, picture anchor point and the number percent picture parameter of the required picture of definition middleware;
At last, server end is packaged into the UI Packet Generation to middleware with the nest relation of described component type, number percent component parameter and inter-module and picture anchor point and the number percent picture parameter of picture;
The further optimization of such scheme is that described system also comprises modular converter, is illustrated in figure 9 as the 3rd preferred embodiment structural representation of a kind of picture adaptive system of the present invention;
Described definition module also is used for number percent component parameter and the component property according to UI design requirement definitions component, defines simultaneously picture anchor point and the number percent picture parameter of picture;
Described creation module also is used for creating the UI packet according to described number percent component parameter, component property, picture anchor point and number percent picture parameter;
For ease of understanding, 320x480 illustrates with screen, and design requirement wherein is: show a pictures, fill full whole screen, picture name is sample1.jpg, picture size 320x480, as shown in Figure 4;
Find out that very simply the drafting effect that design requirement need to reach is exactly to show a picture that fully supports whole screen; According to this design requirement, design component com1, assembly com1 without sub-component, only have the drafting of picture sample1.jpg without parent component, and picture is drawn and fully supported screen, and the wide height of picture drawing area is identical with the wide height of com1 assembly;
According to above analysis, the drafting reference position of com1 draws the estimation coordinate (0,0) of com1 assembly in the screen upper left corner, the com1 assembly fully supports whole screen, so the wide height of the estimation of com1 assembly is (320,480), picture is drawn reference position also in the screen upper left corner and full frame drafting, so the estimation coordinate that picture is drawn also is (0,0), estimates that wide height also is (320,480).
Further, be the relative coordinate and relative wide height of assembly with the estimation coordinate of assembly with the wide height conversion of estimation, namely be converted to the number percent component parameter, be specially:
The com1 assembly is screen assembly without parent component, and the number percent component parameter converts all take the wide height of screen as reference point, and the relative coordinate of com1 and relative wide height are all with respect to screen;
The estimation coordinate (0 of com1 assembly, 0) deducts screen upper left corner coordinate (0,0), gets (0,0), the conversion relative coordinate is (0/ screen width, 0/ screen height)=(0/320,0/480)=(0,0), so the relative coordinate of com1 assembly is (0,0) still;
The wide height of estimation that the relatively wide height of screen assembly com1 is screen assembly is divided by the ratio value of the wide height of screen, so wide height (320 of the estimation of com1,480) divided by the wide height (320 of screen, 480)=>(320/320,480/480)=>relative coordinate (100%, 100%), namely the relatively wide height of com1 is (100%, 100%);
At this moment, there has been the relative coordinate of assembly just can guarantee that with relative wide height the com1 assembly all fully supports whole screen when any screen is drawn;
The relative coordinate of picture sample1 and relative wide height are that the relative position of the assembly under described picture and the described picture estimates;
The relative coordinate of picture sample1 for its draw origin coordinates deduct under the ratio of wide height of the difference of origin coordinates of assembly com1 and affiliated assembly com1, calculate by this definition: the estimation coordinate (0 of sample1,0) deducts the estimation coordinate (0 of com1 assembly, 0) gets (0,0), divided by the wide height of the estimation of com1 assembly (0/320,0/480)=>relative coordinate of picture is (0,0);
The wide height of estimation that the relatively wide height of picture is described picture is divided by the ratio of the wide height of estimation of assembly under the described picture, and namely the relatively wide height of sample1 is (320/320,480/480)=(100%, 100%);
Respectively with posX1=0, posY1=0, paraW1=100%, the relative coordinate of paraH1=100% recordable picture sample1 and relative wide height can be determined the picture anchor point anchor1=LEFT|TOP of described picture sample1 simultaneously;
Described the second acquisition module links to each other with described parsing module, modular converter and drafting module, also is used for obtaining described number percent component parameter, component property, picture anchor point and number percent picture parameter;
Here being middleware is carrying out picture when adaptive, no matter middleware need to carry out adaptive to the screen of which kind of resolution, at this moment all need to obtain number percent component parameter, component property, number percent picture parameter and picture anchor point in the UI packet, and can carry out according to described number percent component parameter, number percent picture parameter and picture anchor point the picture self-adaptation of various resolution screen;
For ease of understanding, illustrate, for example parsing module is resolved described UI packet, and it is com1 that the second acquisition module gets access to assembly;
Obtain the component property of com1, wherein the parent component title parent of com1 is empty, and sub-component sequence subList is empty, and the picture that com1 need to show is sample1.jpg;
Get access to the number percent component parameter of com1, wherein x, y, width, height are respectively 0,0,100%, 100%;
The relative coordinate of picture sample1.jpg is respectively posX1=0 with relative wide height, posY1=0, paraW1=100%, paraH1=100%, picture anchor point anchor1=LEFT|TOP, picture size 320x480;
Described modular converter links to each other with drafting module with described the second acquisition module, is used for described number percent component parameter is converted to the pixel value component parameter; Also be used for described number percent picture parameter is converted to the pixel value image parameters;
Described pixel value component parameter comprises absolute coordinates and the absolute wide height of described assembly;
When the absolute coordinates of described assembly referred to draw described assembly, described assembly was with respect to the coordinate position in the screen upper left corner;
Described assembly also claims origin coordinates with respect to the coordinate position in the screen upper left corner;
The absolute wide height that the relative coordinate that absolute coordinates in the described pixel value component parameter equals described assembly multiply by described assembly parent component adds the absolute coordinates of parent component again;
The relatively wide height that absolute wide height in the described pixel value component parameter equals described assembly multiply by the absolute wide height of described assembly parent component;
Wherein, the absolute coordinates of the screen assembly relative coordinate that equals screen assembly multiply by the wide height of screen; The relatively wide height that the absolute wide height of screen assembly equals screen assembly multiply by the wide height of screen;
Illustrate: the absolute coordinates of com1 and screen upper left corner coordinate (0,0) overlap;
The absolute width of com1=100%* screen width=screen width, the absolute altitude of com1=100%* screen height=screen height, namely the absolute wide height of com1 is (320,480), is illustrated in figure 3 as the wide high-level schematic of com1 on the 320x480 screen;
The absolute coordinates of picture sample1.jpg is (0,0), and the picture anchor point is the upper left corner, so (0,0) is the upper left corner graphical pointv of sample1.jpg;
The absolute width of picture sample1.jpg=relative width 100%*320 (the absolute width of com1)=320, the absolute altitude of picture sample1.jpg=relative height 100%*480 (absolute altitude of com1)=480, the target drawing area that gets picture sample1.jpg is (320,480); The size of picture sample1.jpg is 320x480, is equal to drawing area (320,480), processes so the drawing process of picture sample1.jpg need not convergent-divergent;
Described drafting module links to each other with modular converter with described the second acquisition module, also is used for drawing described picture according to described pixel value component parameter, component property, picture anchor point and pixel value image parameters.
In this example, only have an assembly and a picture, get final product so directly draw described picture, be illustrated in figure 4 as the design sketch of picture sample1.jpg after the 320x480 screen is drawn;
To describe content identical for the drawing process of two pictures, three pictures or four pictures and embodiment one or two in the present embodiment, for saving length, repeats no more herein.
The described picture adaptive system of present embodiment comprises the first acquisition module, parsing module, the second acquisition module and drafting module, and wherein said the first acquisition module is used for obtaining the UI packet; Described parsing module is used for resolving described UI packet; The assembly of described the second acquisition module securing component is drawn the picture of information and picture and is drawn information; Described drafting module is used for drawing described picture according to described assembly drafting information and picture drafting information.Present embodiment has reduced in multiresolution is adaptive cuts the figure workload, and same set of UI resource is adaptive different resolution portable terminal simultaneously, has simplified the interface adaptation procedure, has improved the picture Adaption efficiency, has realized the picture self-adaptation.Present embodiment has further increased definition module, creation module and modular converter, and wherein definition module is used for number percent component parameter and the component property according to UI design requirement definitions component, defines simultaneously picture anchor point and the number percent picture parameter of picture; Described creation module is used for creating the UI packet according to described number percent component parameter, component property, picture anchor point and number percent picture parameter; Described modular converter is used for described number percent component parameter is converted to the pixel value component parameter; Also be used for described number percent picture parameter is converted to the pixel value image parameters.Thereby further clear and definite assembly is drawn the content that information and picture are drawn information, describe simultaneously the computation process of number percent parameter, pixel value parameter, each coordinate and wide height in detail, guarantee the automatically various display effect of realization of picture, ensure the consistance of picture display position and viewing area on screen, improved the adaptive feasibility of picture.
Picture adaptive system provided by the invention need can be applied on the adaptive terminal device of picture, such as PC, PDA, mobile phone, server etc.
Those having ordinary skill in the art will appreciate that, all or part of step in realization above-described embodiment method can be finished by the programmed instruction related hardware, described program can be stored in the computer read/write memory medium, and described storage medium can be ROM, RAM, disk, CD etc.
The above only is preferred embodiment of the present invention, not in order to limiting the present invention, all any modifications of doing within the spirit and principles in the present invention, is equal to and replaces and improvement etc., all should be included within protection scope of the present invention.