CN108196755A

CN108196755A - Background picture display and device

Info

Publication number: CN108196755A
Application number: CN201810089355.0A
Authority: CN
Inventors: 张洋平
Original assignee: Tencent Technology Shenzhen Co Ltd
Current assignee: Tencent Technology Shenzhen Co Ltd
Priority date: 2018-01-30
Filing date: 2018-01-30
Publication date: 2018-06-22
Anticipated expiration: 2038-01-30
Also published as: CN108196755B

Abstract

The invention discloses a kind of background picture display and devices, belong to applied technical field.Method includes：When receiving scaling instruction, the first application widget is zoomed in and out, obtains the second application widget；When the wide high proportion of background picture in the first application widget is equal to the wide high proportion of the second application widget, the display location of each functional area and the target scale ratio of background picture in the second application widget are obtained；In the second application widget on the display location of each functional area, the corresponding picture block of each functional area in showing Background Picture according to target scale ratio.The present invention can realize the background picture after equal proportion scaling is shown in application widget after scaling, the application widget that background picture is adapted to after scaling, ensure completely show in the window of the subject element in background picture after scaling, improve the display effect of background picture.

Description

Background picture display and device

Technical field

The present invention relates to network technique field more particularly to a kind of background picture display and devices.

Background technology

With the development of browser, more and more users search for information using browser.Beautiful browser appearance It is a key factor for attracting user, wherein, it is that a most important function, browser can pass through during appearance shows to change skin Skin is changed to show Background Picture, so as to beautify the appearance of browser.

At present, the method that browser shows Background Picture is as follows：User can operate browser in terminal, touch What hair terminal showed browser changes the skin page, and user can change the background picture that oneself is selected to like in the skin page at this.Terminal The background picture that user selects can be retrieved as background picture to be shown, according to the size (packet of browser maximized window Include width and height), it is stored in memory after which is cut, scaled so that the size of background picture is equal to browsing The size of device maximized window, then according to each functional area of browser window, (such as page display area, is appointed at status bar Be engaged in column etc.) size, starting pixels point and end pixel point when calculating each functional area rendering context picture respectively, later Each functional area successively draws the background picture in memory since its corresponding starting pixels point, until end pixel point Terminate to draw, to form the background picture in browser window.

In the implementation of the present invention, inventor has found that the relevant technologies have at least the following problems：

Window size when being maximized in above-mentioned technology according to browser, the size of background picture is fixedly installed, if User zooms in and out operation to current browser window so that window size is less than background picture size, then can be due in memory The size of the background picture of storage is fixed, causes to be only able to display Background in the browser window of background picture after scaling A piece part so that the display effect of background picture is poor.

Invention content

An embodiment of the present invention provides a kind of background picture display and devices, can solve the relevant technologies display effect The problem of poor.The technical solution is as follows：

On the one hand, a kind of background picture display is provided, the method includes：

When receiving scaling instruction, the first application widget is zoomed in and out, obtains the second application widget；

When the wide high proportion of background picture in first application widget is equal to the wide high proportion of second application widget When, the display location of each functional area and the target scale ratio of the background picture in second application widget are obtained, The target scale ratio is used to zooming to the background picture into the size identical with second application widget；

Described in second application widget on the display location of each functional area, according to the target scale ratio Show the corresponding picture block of each functional area described in the background picture.

On the one hand, a kind of background picture display device is provided, described device includes：

Zoom module, for when receiving scaling instruction, being zoomed in and out to the first application widget, obtaining the second application window Mouthful；

Acquisition module, for working as the wide high proportion of background picture in first application widget equal to second application window During the wide high proportion of mouth, the display location of each functional area and the mesh of the background picture in second application widget are obtained Scaling is marked, the target scale ratio is used to zooming to the background picture into the ruler identical with second application widget It is very little；

Display module, for the display location of each functional area described in second application widget, according to institute It states target scale ratio and shows the corresponding picture block of each functional area described in the background picture.

On the one hand, provide a kind of terminal, the terminal includes processor and memory, be stored in the memory to Few an instruction, at least one section of program, code set or instruction set, at least one instruction, at least one section of program, code set or Instruction set is loaded as the processor and performed with the operation performed by realizing above-mentioned background picture display.

On the one hand, provide a kind of computer readable storage medium, be stored in the computer readable storage medium to Few an instruction, at least one section of program, code set or instruction set, at least one instruction, at least one section of program, code set or Instruction set is loaded as processor and is performed to realize the operation as performed by above-mentioned background picture display.

The advantageous effect that technical solution provided in an embodiment of the present invention is brought is：

The ratio scaled by after application widget is scaled, obtaining background picture needs, and then application window after scaling In mouthful on the display location of each functional area, the picture block in showing Background Picture according to the ratio, so as to fulfill scaling The background picture after equal proportion scaling is shown in application widget afterwards so that background picture can be adapted to the application window after scaling Mouthful, ensure completely show in the window of the subject element in background picture after scaling, improve background picture Display effect.

Description of the drawings

To describe the technical solutions in the embodiments of the present invention more clearly, make required in being described below to embodiment Attached drawing is briefly described, it should be apparent that, the accompanying drawings in the following description is only some embodiments of the present invention, for For those of ordinary skill in the art, without creative efforts, other are can also be obtained according to these attached drawings Attached drawing.

Fig. 1 is a kind of implementation environment schematic diagram of background picture display provided in an embodiment of the present invention；

Fig. 2 is a kind of flow chart of background picture display provided in an embodiment of the present invention；

Fig. 3 is a kind of flow chart of background picture display provided in an embodiment of the present invention；

Fig. 4 is a kind of schematic diagram of browser window provided in an embodiment of the present invention；

Fig. 5 is a kind of practical interface display figure of browser window provided in an embodiment of the present invention；

Fig. 6 is the schematic diagram of a kind of background picture and the second browser window provided in an embodiment of the present invention；

Fig. 7 is the practical interface display figure of a kind of background picture and the second browser window provided in an embodiment of the present invention；

Fig. 8 is the schematic diagram of a kind of background picture and the second browser window provided in an embodiment of the present invention；

Fig. 9 is the practical interface display figure of a kind of background picture and the second browser window provided in an embodiment of the present invention；

Figure 10 is a kind of flow chart of background picture display provided in an embodiment of the present invention；

Figure 11 is a kind of schematic diagram for changing the skin page provided in an embodiment of the present invention；

Figure 12 is a kind of practical interface display figure for changing the skin page provided in an embodiment of the present invention；

Figure 13 is the schematic diagram of a kind of browser wallpaper provided in the relevant technologies；

Figure 14 is a kind of practical interface display figure of the browser wallpaper provided in the relevant technologies；

Figure 15 is a kind of schematic diagram of the full frame wallpaper of browser provided in an embodiment of the present invention；

Figure 16 is a kind of practical interface display figure of the full frame wallpaper of browser provided in an embodiment of the present invention；

Figure 17 is the schematic diagram to show Background Picture in a kind of browser window after scaling provided in the relevant technologies；

Figure 18 is the practical boundary to show Background Picture in a kind of browser window after scaling provided in the relevant technologies Face display figure；

Figure 19 is the signal to show Background Picture in a kind of browser window after scaling provided in an embodiment of the present invention Figure；

Figure 20 is the reality to show Background Picture in a kind of browser window after scaling provided in an embodiment of the present invention Interface display figure；

Figure 21 is a kind of structure diagram of background picture display device provided in an embodiment of the present invention；

Figure 22 is a kind of structure diagram of background picture display device provided in an embodiment of the present invention；

Figure 23 is a kind of structure diagram of terminal 2300 provided in an embodiment of the present invention.

Specific embodiment

To make the object, technical solutions and advantages of the present invention clearer, below in conjunction with attached drawing to embodiment party of the present invention Formula is described in further detail.

Fig. 1 is a kind of implementation environment schematic diagram of background picture display provided in an embodiment of the present invention, referring to Fig. 1, It can include in the implementation environment：

At least one server 101 and at least one terminal 102.Wherein, server 101 is used to provide clothes for terminal 102 Business, such as web service, specifically, the application (such as browser) that server 101 can be installed by terminal 102 is carried to terminal For service.The terminal 102 is used for the application that runtime server 101 is provided, and realizes various functions based on application.It in addition, should At least one database, e.g., customer data base etc. can also be configured in server 101.The customer data base is used to store the clothes The personal data such as the user name of user, password and the customer relationship chain that business device 101 is serviced.

Fig. 2 is a kind of flow chart of background picture display provided in an embodiment of the present invention.This method is performed by terminal, Referring to Fig. 2, this method includes：

201st, when receiving scaling instruction, the first application widget is zoomed in and out, obtains the second application widget.

In the embodiment of the present invention, the first application widget and the second application widget are the windows of same application.First application Device window can be the maximized window of application or carry out the window obtained after the zoom operations of any scaling, Second application widget is the window obtained after the first application widget of terminal-pair zooms in and out.

Scaling instruction can be equal proportion scaling instruction, then terminal, can be with when receiving the instruction of such proportional zoom Equal proportion scaling is carried out to the first application widget, obtains second application widget identical with the wide high proportion of the first application widget.

Certainly, scaling instruction can also be width scaling instruction, then terminal, can when receiving width scaling instruction It is zoomed in and out with the width to the first application widget, obtains the second application widget of different size with the first application widget.It should Scaling instruction can also be height scaling instruction, then terminal, can be to the first application window when receiving height scaling instruction The height of mouth zooms in and out, and obtains second application widget different from the height of the first application widget.

202nd, when the wide high proportion of background picture in first application widget is equal to the wide high proportion of second application widget When, obtain the target scale ratio of the display location of each functional area and the background picture in second application widget, the mesh Mark scaling is used to zooming to the background picture into the size identical with second application widget.

Wherein, background picture is the picture that background is shown as in the entire application widget of application, when a pictures are set When being set to the background of application widget, it can be corresponded in each functional area of the application widget and show the corresponding of the background picture Part, the background picture can also be known as wallpaper.

In the embodiment of the present invention, application widget can be divided into multiple functional areas.The background shown in first application widget The dimension of picture of picture refers to the original size of the background picture, for example, terminal can be obtained from the configuration file being locally stored Take the attribute informations such as the background configuration information of application, the original size including background picture.

203rd, it in second application widget on the display location of each functional area, is shown according to the target scale ratio Show the corresponding picture block of each functional area of this in the background picture.

In the embodiment of the present invention, terminal can respectively paint in the second application widget on the display location in different function region Different picture blocks in background picture processed.

Method provided in an embodiment of the present invention, the ratio scaled by after application widget is scaled, obtaining background picture needs Example, and then in application widget after scaling on the display location of each functional area, in showing Background Picture according to the ratio Picture block, so as to fulfill shown in application widget after scaling equal proportion scaling after background picture so that background picture The application widget that can be adapted to after scaling ensures completely open up in the window of the subject element in background picture after scaling Reveal and, improve the display effect of background picture.

In a kind of possible realization method, the target scale ratio of the acquisition background picture, including：

The ratio of the height of second application widget and the height of the background picture is retrieved as the target scale ratio； Or,

The ratio of the width of second application widget and the width of the background picture is retrieved as the target scale ratio.

Method provided in an embodiment of the present invention, due to the wide high proportion of the second application widget and the wide high proportion of background picture It is identical, thus their height ratio can be both retrieved as to target scale ratio, their width ratio can also be obtained For target scale ratio, the realization method of two kinds of acquisition target scale ratios is provided.

In a kind of possible realization method, it is somebody's turn to do in second application widget on the display location of each functional area, The corresponding picture block of each functional area of this in the background picture is shown according to the target scale ratio, including：

According to the target scale ratio, the first apex coordinate of each functional area in second application widget is carried out Scaling obtains corresponding second apex coordinate of each functional area；

In the background picture, based on corresponding second apex coordinate of each functional area, each functional areas are determined The corresponding picture block in domain；

On the display location of each functional area, according to the target scale ratio, each functional area pair is drawn The picture block answered, to be shown.

Wherein, the ratio between the first apex coordinate and the second apex coordinate is target scale ratio.Each functional area Size and the corresponding picture block of each functional area size between ratio be target scale ratio.

Method provided in an embodiment of the present invention, it is true by the first apex coordinate according to scaling and each functional area Determine the corresponding picture block of each functional area, and then picture block is zoomed in and out in drawing process.Terminal is in the second application window All functional areas in mouthful have been drawn after corresponding picture block to get to the Background shown in the second application widget Piece provides a kind of mode to show Background Picture in the second application widget.

According to the target scale ratio, which is zoomed in and out, the background picture after being scaled；

In background picture after the scaling, the first apex coordinate based on each functional area determines each work( It can the corresponding picture block in region；

On the display location of each functional area, the corresponding picture block of each functional area is drawn, to be shown Show.

Method provided in an embodiment of the present invention, by first zooming in and out background picture so that the background picture after scaling After identical with the size of the second application widget, then the corresponding picture block of each functional area drawn, terminal should second To get to the background shown in the second application widget after corresponding picture block having been drawn with all functional areas in window Picture provides a kind of mode to show Background Picture in the second application widget.

In a kind of possible realization method, when should receive scaling instruction, the first application widget is zoomed in and out, is obtained After second application widget, this method further includes：

When the wide high proportion of background picture in first application widget is more than the wide high proportion of second application widget, from Determine first object region in the background picture, the height in the first object region it is identical with the height of the background picture and this The wide high proportion of one target area is identical with the wide high proportion of second application widget；

Performed based on the first object region target scale ratio that obtains display location and the first object region and Display process.

Method provided in an embodiment of the present invention, when application widget scales, if the width of the application widget after scaling When degree is less than the width of background picture, passes through and determine first object identical with the second application widget wide high proportion in background picture Region, and the first object region is shown in the second application widget, it is ensured that the subject element of background picture can be complete Show, improve display effect.

When the wide high proportion of background picture in first application widget is less than the wide high proportion of second application widget, from Determine the second target area in the background picture, the width of second target area and the of same size of the background picture and this The wide high proportion of two target areas is identical with the wide high proportion of second application widget；

Performed based on second target area target scale ratio that obtains display location and second target area and Display process.

Method provided in an embodiment of the present invention, by when application widget scales, if the application widget after scaling Height when being less than the height of background picture, by determining identical with the second application widget wide high proportion second in background picture Target area, and second target area is shown in the second application widget, it is ensured that the subject element of background picture can It completely shows, improves display effect.

The alternative embodiment that any combination forms the present invention may be used, herein no longer in above-mentioned all optional technical solutions It repeats one by one.

Below by application for browser, to be carried out specifically to background picture display provided in an embodiment of the present invention It is bright, wherein, the web browser for being used to browse webpage that browser refers to install in terminal, background picture is in the whole of browser The picture of background is shown as in a browser window, it, can be at this when a pictures are arranged to the background of browser window The corresponding corresponding portion for showing the background picture in each functional area of browser window.

Fig. 3 is a kind of flow chart of background picture display provided in an embodiment of the present invention.This method is performed by terminal, Referring to Fig. 3, this method includes：

301st, when receiving scaling instruction, the first browser window is zoomed in and out, obtains the second browser window.

Wherein, the first browser window can be the maximized window of browser or carry out any scaling Zoom operations after obtained window.

In the embodiment of the present invention, scaling instruction can be triggered by the operation of user, for example, showing the first browsing in terminal During device window, user can zoom in and out operation to the first browser window currently shown, and triggering terminal is to first The scaling instruction that browser window zooms in and out.Scaling instruction can be equal proportion scaling instruction, then terminal is receiving this During equal proportion scaling instruction, equal proportion scaling can be carried out to the first browser window, obtain the width with the first browser window The second identical browser window at high proportion.

Certainly, scaling instruction can also be width scaling instruction, then terminal, can when receiving width scaling instruction It is zoomed in and out with the width to the first browser window, obtains the second browser window of different size with the first browser window Mouthful.Scaling instruction can also be height scaling instruction, then terminal, can be clear to first when receiving height scaling instruction The height of device window of looking at zooms in and out, and obtains second browser window different from the height of the first browser window.

Since the first browser window of terminal-pair is scaled, the Background shown in the first browser window originally Piece cannot be adapted to the second browser window that scaling obtains, this cannot be adapted to the size for referring to background picture and browser window The size of mouth is different, causes background picture that cannot completely be shown in browser window.Thus, terminal is needed background picture weight It is newly adapted to the browser window after scaling, so that complete in the browser window that background picture can be after scaling It shows.

Correspondingly, terminal can obtain the dimension of picture of the background picture shown in the first browser window, the picture Size refers to the original size of the background picture, for example, terminal can obtain browser from the configuration file being locally stored The attribute informations such as background configuration information, the original size including background picture.For example, user selects in changing in the skin page for browser When selecting the background picture that the background picture is set as to browser window, terminal can be according to the URL of the background picture (Uniform Resource Locator, uniform resource locator) address gets the attribute information of the background picture, and will The attribute information of the background picture is stored in the configuration file.

In the embodiment of the present invention, terminal can be according to the wide high proportion of background picture and the ratio of width to height of the second browser window Relationship between example, takes corresponding adaptation scheme so that background picture has preferable display in the second browser window Effect.Specifically, when the wide high proportion of background picture is equal to the wide high proportion of the second browser window, take steps 302 Hes Scheme shown in step 303；When the wide high proportion of background picture is more than the wide high proportion of the second browser window；It takes steps 304 and step 305 shown in scheme, when background picture wide high proportion be less than the second browser window wide high proportion when, adopt Take step 306 and the scheme shown in step 307.

302nd, when the wide high proportion of background picture in first browser window is equal to the width height of second browser window During ratio, the target scale ratio of the display location of each functional area and the background picture in second browser window is obtained Example, the target scale ratio are used to zooming to the background picture into the size identical with second browser window.

In the embodiment of the present invention, the functional area of browser window can be divided into two classes, and one kind is the frame of browser window Frame region, the frame area can include at least one region, what the content shown by the frame area was accessed with browser Webpage is unrelated, is shown based on the configuration file in the browser installation file in terminal, and another kind of is the net of browser window Page region, the web page area are used to show the webpage that browser is accessed.

Referring to Fig. 4 and Fig. 5, Fig. 4 is a kind of schematic diagram of browser window provided in an embodiment of the present invention, and Fig. 5 is this hair A kind of practical interface display figure for browser window that bright embodiment provides, as shown in Fig. 4 or Fig. 5, browser window includes area Three pieces of regions such as domain 1, region 2 and region 3.Region 1 and region 2 belong to the frame part of browser, and region 3 belongs to webpage area Domain.The realization of full frame wallpaper depends on above-mentioned zone 1, region 2 and region 3, since this three pieces of regions belong to different functional areas Domain, in order to achieve the effect that integral seamless splices, terminal needs separately to handle this three pieces of regions, i.e., distinguishes in different regions Different picture blocks in rendering context picture.The embodiment of the present invention only includes region 1 shown in Fig. 3, region 2 with browser window It is illustrated with for region 3, in fact, browser window can also have other dividing modes, the embodiment of the present invention is to this It does not limit.

If the wide high proportion of background picture is equal to the wide high proportion of the second browser window, in this case, equal proportion The background picture that zooms in or out can keep original ratio, the subject element in background picture will not deform.Therefore, eventually End only need to draw corresponding picture block according to target scale ratio in the second browser window on the display location of each region .Therefore, terminal needs first to obtain the display location of each region and the target scale ratio.

In a kind of possible realization method, terminal can position the work(by the first apex coordinate of each functional area It can display location of the region in the second browser window.The first vertex of each functional area is sat in second browser window Mark can obtain in the following manner：Terminal is determined according to the size and layout of functional area each in the second browser window First apex coordinate of each functional area.The size of each functional area includes the width and height of each functional area, respectively The layout of a functional area refers to the relative position of each functional area.

First apex coordinate of any one functional area can include four apex coordinates of the functional area, be used to indicate Display location of the functional area in the second browser window.Certainly, the first apex coordinate can also only include the functional areas The left upper apex coordinate in domain and bottom right vertex coordinate, since the formed diagonal of the two points can indicate a region, because This, the left upper apex coordinate and bottom right vertex coordinate can serve to indicate that display of the functional area in the second browser window Position.The embodiment of the present invention is not specifically limited first apex coordinate, as long as energy positioning function region is in the second browser Display location in window, this mode positioned using apex coordinate is actually a kind of side of absolute coordinate positioning Formula so that terminal can clearly know the display location of each functional area in the second browser window.

The origin of the corresponding coordinate system of first apex coordinate can be the left upper apex of the second browser window, with the first top For point coordinates includes the left upper apex coordinate of functional area and bottom right vertex coordinate, as shown in figure 4, the left upper apex in region 1 It can be (s, h) that coordinate, which can be (0,0), bottom right vertex coordinate, and the width for representing region 1 is s, is highly h；The left side in region 2 Upper apex coordinate can be able to be (w, r) for (s, 0), bottom right vertex coordinate, and the width for representing region 2 is w-s, is highly r；Area It can be (w, h) that the left upper apex coordinate in domain 3, which can be (s, r), bottom right vertex coordinate, and the width for representing region 3 is w-s, high It spends for h-r.

The size of dimension of picture and the second browser window due to background picture may be different, terminal is second In browser window during rendering context picture, it is also necessary to a scaling parameter ratio.This parameter ratio represents background The ratio of required scaling when picture is drawn.In a kind of possible realization method, terminal obtains the target contracting of the background picture Ratio is put, including：The ratio of the height of second browser window and the height of the background picture is retrieved as the target scale Ratio；Or, the ratio of the width of second browser window and the width of the background picture is retrieved as the target scale by terminal Ratio.For example, ratio=width/image_w=height/image_h.Wherein, width and height represent second respectively The width and height of browser window, image_w and image_h represent the width and height of background picture respectively.

For example, if the dimension of picture of background picture is 200*200, the size of the second browser window is 100*100, this When ratio be exactly 1/2, then represent to need to reduce background picture twice and draw.If the dimension of picture of background picture is 100*200, the size of browser window is 200*400, and ratio is exactly 2 at this time, then representing needs to amplify background picture twice To draw.

303rd, in second browser window on the display location of each functional area, according to the target scale ratio Show the corresponding picture block of each functional area of this in the background picture.

In the embodiment of the present invention, terminal can be distinguished in the second browser window on the display location in different function region Different picture blocks in rendering context picture, since the dimension of picture of background picture is different from the size of the second browser window, Therefore, terminal can by background picture scale be drawn in the second browser window namely in the second browser window it is each On the display location of functional area, the corresponding picture block of each functional area is zoomed in and out into drafting.

For the situation that scaling is drawn, terminal shows each functional area pair on the display location of each functional area The process for the picture block answered can include：Terminal is according to the target scale ratio, to each work(in second browser window Can first apex coordinate in region zoom in and out, obtain corresponding second apex coordinate of each functional area；In the Background In piece, based on corresponding second apex coordinate of each functional area, the corresponding picture block of each functional area is determined；At this On the display location of each functional area, according to the target scale ratio, the corresponding picture block of each functional area is drawn, with It is shown.

Wherein, the ratio between the first apex coordinate and the second apex coordinate is target scale ratio.It is sat with the first vertex For mark includes the left upper apex coordinate of functional area and bottom right vertex coordinate, then the second apex coordinate includes the upper left of picture block Apex coordinate and bottom right vertex coordinate.

Correspondingly, terminal determines that the process of the corresponding picture block of each functional area can include：For the second browser Each functional area in window, terminal can determine in background picture according to the left upper apex coordinate of the functional area One pixel point coordinates, the ratio between the left upper apex coordinate of the functional area and the first pixel point coordinates are target scale ratio Example；According to the bottom right vertex coordinate of the functional area, the second pixel point coordinates in background picture, the right side of the functional area are determined Ratio between lower apex coordinate and the second pixel point coordinates is target scale ratio, and then, terminal can be by background picture In be retrieved as using the first pixel point coordinates as left upper apex coordinate, using the picture block of second pixel as bottom right vertex coordinate The corresponding picture block of the functional area.In this way, the ruler of the size of each functional area picture block corresponding with each functional area Ratio between very little is target scale ratio, and terminal needs the picture block scaling in background picture being drawn on corresponding functional areas In domain.

Wherein, the left upper apex coordinate of picture block is used to indicate display of the left upper apex of picture block in the background picture Position, the bottom right vertex coordinate of picture block are used to indicate display location of the bottom right vertex of picture block in the background picture.With The left upper apex of entire background picture is coordinate origin, and pixel is positioned entire using the coordinate of pixel in background picture Position in background picture, actually a kind of mode positioned using absolute coordinate so that terminal can clearly know to carry on the back The display location of each picture block in scape picture.

By taking the region 1 in Fig. 4 or Fig. 5 as an example, if target scale ratio is 1/2, the left upper apex coordinate in region 1 is (0,0), bottom right vertex coordinate are (10,100), then left upper apex coordinate is (0,0) in the correspondence of region 1 background picture, bottom right is pushed up Point coordinates is the picture block of (20,200).

By taking any one functional area as an example, terminal, according to target scale ratio, is painted on the display location of the functional area Making the process of the corresponding picture block of the functional area can include：Terminal can be with calling system function, by the ruler of the functional area It is very little as scaling draw obtained target size, using the size of the picture block as scaling drafting before size, inputting this is System function so that picture block scaling is drawn in corresponding functional area by the system function.Wherein, which can be with It is constructed based on interpolation algorithm, appointed for example, the interpolation algorithm can be bilinear interpolation, bicubic interpolation and leggy interpolation etc. One is used to zoom in and out in picture the algorithm of drafting.

The situation is that terminal directly determines each function according to the first apex coordinate of scaling and each functional area The corresponding picture block in region, and then picture block is zoomed in and out in drawing process, for example, amplifying twice to draw or scale two It draws again.All functional areas of the terminal in the second browser window drawn after corresponding picture block to get to The background picture shown in second browser window.

In fact, terminal can also first zoom in and out background picture so that background picture and the second browsing after scaling After the size of device window is identical, then the corresponding picture block of each functional area drawn.

For situation about drawing afterwards is first scaled, terminal shows each functional areas on the display location of each functional area The process of the corresponding picture block in domain can include：According to the target scale ratio, which is zoomed in and out, is scaled Background picture afterwards；In background picture after the scaling, the first apex coordinate based on each functional area determines that this is each The corresponding picture block of a functional area；On the display location of each functional area, it is corresponding to draw each functional area Picture block, to be shown.

In this case, terminal again may be by the mode of calling system function and realize the scaling of background picture, scaling The size of background picture afterwards is identical with the size of the second browser window.Include the upper left of functional area with the first apex coordinate For apex coordinate and bottom right vertex coordinate, terminal determines that the process of the corresponding picture block of each functional area can include：It is right Each functional area in the second browser window, terminal can determine the back of the body according to the left upper apex coordinate of the functional area The first pixel point coordinates in scape picture, the left upper apex coordinate of the functional area is identical with the first pixel point coordinates, according to The bottom right vertex coordinate of the functional area determines the second pixel point coordinates in background picture, the bottom right vertex of the functional area Coordinate is identical with the second pixel point coordinates, and then, terminal can by background picture using the first pixel point coordinates as upper left Apex coordinate is retrieved as the corresponding picture of the functional area using the picture block of the second pixel point coordinates as bottom right vertex coordinate Block.In this way, the size of the size of each functional area picture block corresponding with each functional area is identical, terminal can be by background Picture block in picture is directly drawn in corresponding functional area, without being zoomed in and out in drawing process.

By taking the region 1 in Fig. 4 or Fig. 5 as an example, if target scale ratio is 1/2, terminal can be first by background picture It reduces twice, if the left upper apex coordinate in region 1 is (0,0), bottom right vertex coordinate is (10,100), then region 1 corresponds to the back of the body The picture block that left upper apex coordinate is (0,0) in scape picture, bottom right vertex coordinate is (10,100).Due to the Background after scaling Piece is identical with the size of the second browser window, thus, the first apex coordinate of each functional area in the second browser window It can be corresponded with the pixel point coordinates of picture block each in background picture so that each functional area can be corresponding by its Picture block is drawn according to one-to-one coordinate.

When terminal draws corresponding picture block in each functional area, terminal can be first from the second browser window (0,0) position starts 1 corresponding picture block of drawing area, and (s, h) is the bottom right vertex coordinate in region 1, that is, represents this region Width be s, height is h.Then the region 2 of the second browser window is drawn, due to domain of the existence 1, terminal needs connect The rightmost for region 1 starts to draw, i.e., starts 2 corresponding picture of drawing area from (s, 0) position of the second browser window Block, the bottom right vertex coordinate in region 2 is (w, r), and the width for representing this region is w-s, and height is r.It is finally drafting second The region 3 of browser window, since region 3 deviates the width of left upper apex s of the second browser window and the height of r, because This, terminal can 3 corresponding picture block of drawing area, (w, h) be the right sides in region 3 since (s, r) position of browser window Lower apex coordinate, that is, the width for representing this region are w-s, and height is h-r.

When browser window scales, if the browser window size after scaling is smaller, pass through the contracting of equal proportion Put background picture, the wide high proportion that can keep background picture is constant, though so as to reach browser window how to amplify or It reduces, under arbitrary length-width ratio, indeformable, complete background picture can be shown in browser window, ensure that background The theme of picture can completely be shown.

It should be noted that since the web page area in the second browser window is not in the control range of browser, because This, after terminal needs server (server for providing web service) to return to the related data of the web page area to terminal, terminal Could web page contents and image content be shown in the web page area according to the related data.The related data includes web data The image data of (such as web page source code) and the picture block shown in the web page area.And in order to allow the clear and definite webpage of server Region needs picture block to be shown, and terminal can be by browser by the service of informing of the relevant information of second browser window Device, the relevant information can include the dimension information and scaling of the dimension information of the second browser window, each functional area Percent information so that server can determine display position of the web page area in second browser window according to the relevant information It puts and position of the corresponding picture block of web page area in background picture, and then obtains web data and the figure of corresponding picture block Sheet data.Certainly, which can also only include the corresponding picture block of web page area the position in background picture so that Server can directly acquire web data and the image data of corresponding picture block.

For example, browser can be by JavaScript expansion interfaces, using the mode of Json character strings by relevant information Server is supplied to, the form of Json character strings is as follows：

{“sidebar_width”:s,”width”:w,”height”:h,”rebar_height”:r}

Wherein, what sidebar_width was represented is the width in region 1, and width and height represent entire browser respectively The width and height of window, what rebar_height was represented is the height in region 2.

In addition to the width of above-mentioned zone 1, the width of entire browser window and height and the height in region 2 etc., also need Other two parameter image_w and image_h is wanted, wherein, image_w represents the width of background picture, and image_h represents background The height of picture.Since browser forms (i.e. the frame area of browser) and web page area use the Background of same format Piece, and server can get the width and height of background picture, for example, server can be according to the URL of background picture Address obtains the attribute information of background picture, width and height including background picture.Therefore, the two parameters can be not required to Browser is wanted to pass through JavaScript expansion interface notification servers.Certainly, due to the size of background picture and browser window Size it is different, thus, in order to which server can accurately determine the corresponding picture block of web page area in background picture, terminal also needs Target scale ratio is supplied to by server by browser.

Browser is by above-mentioned relevant information (width including region 1, the width of entire browser window and height, region 2 Height and target scale ratio) be synchronized to server after, server can determine that web page area exists according to the relevant information The corresponding picture block of web page area in display location and background picture in second browser window, specific determination process with it is upper It states terminal and determines the process of display location and picture block similarly.

Certainly, terminal can also pass through position of the browser directly by the corresponding picture block of web page area in background picture It is supplied to server so that server can directly acquire the image data of the corresponding picture block of the web page area, and by the figure The web data of sheet data and the web page area returns to terminal so that terminal can be directly according to the image data and webpage number According to being rendered or drawn in the web page area, obtain the picture block shown in the web page area and web page contents.

Above-mentioned steps 302 to step 303 is the ratio of width to height of the wide high proportion and background picture for the second browser window The identical situation of example, terminal can show Background Picture in the second browser window.In this case, the left side due to background picture Upper apex coordinate be (0,0), thus terminal be in the second browser window from background picture (0,0) position start draw and Displaying.In fact, the wide high proportion of the second browser window after scaling may also be different with the wide high proportion of background picture, this In the case of kind, terminal can not scale the size that background picture is zoomed to browser window by equal proportion, if non-equal proportion Background picture is scaled, then background picture can be caused to deform, thus terminal needs to determine wide high proportion and second from background picture The identical target area of the wide high proportion of browser window, draws the target area.Detailed process is referring to subsequent step 304 to step 305 or step 306 to step 307.

304th, when the wide high proportion of background picture in first browser window is more than the width height of second browser window During ratio, first object region, the height in the first object region and the height of the background picture are determined from the background picture Identical and the first object region wide high proportion is identical with the wide high proportion of second browser window.

Referring to Fig. 6 and Fig. 7, Fig. 6 is showing for a kind of background picture and the second browser window provided in an embodiment of the present invention It is intended to, Fig. 7 is the practical interface display figure of a kind of background picture and the second browser window provided in an embodiment of the present invention, is such as schemed Shown in 6 or Fig. 7, image_w/image_h>Width/height shows that background picture is too wide relative to the second browser window, Terminal is it needs to be determined that first object region identical with the wide high proportion of the second browser window in background picture.

The first object region can be the left margin certain distance x that left margin deviates background picture in background picture, right Deviate the region of the right margin same distance x of background picture in boundary.In this case, the determination process of the x can include：With the back of the body The width of scape picture is image_w, is highly image_h, and the width of the second browser window is width, is highly height For, the width in first object region is image_w-2x, is highly height, according to the wide high proportion in first object region etc. In the wide high proportion of the second browser window, then there are relationship below：(image_w-2x)/image_h=width/ Height, can be in the hope of x=(height*image_w-width*image_h)/2*height.Wherein, " * " is multiplying.

It should be noted that may not be the middle in background picture in view of the subject element in background picture, But it is partial to the left or right side of background picture, in order to as allow subject element complete in the second browser window as possible Whole display, the left margin and right margin in first object region can also be respectively offset from left margin in background picture and right margin not Same distance, for example, it is x1 that the first object region, which can be the distance that left margin deviates background picture left margin in background picture, The value of the region that the distance that right margin deviates background picture right margin is x2, the x1 and x2 can be all higher than 0, can also be wherein One is equal to 0, another is more than 0.

It is equal to the wide high proportion of the second browser window according to the wide high proportion in first object region, then there are following relationships Formula：(image_w-x1-x2)/image_h=width/height, can be in the hope of x1+x2=(height*image_w- width*image_h)/*height.In this case, terminal can utilize picture recognition technology, to the theme in background picture Element is identified, and obtains the width and height of subject element region, so that it is determined that the specific value of distance x1 and x2, So that not only width ratio is identical with the second browser window in first object region, background can also be included in first object region Complete subject element in picture ensures that the subject element in background picture can be finally complete in the second browser window It shows, improves the display effect of background picture.

305th, the target scale ratio for obtaining display location and the first object region is performed based on the first object region And display process.

In the embodiment of the present invention, due to the wide high proportion in first object region in background picture and the second browser window Wide high proportion is identical, has returned to the processing mode for the same ratio that above-mentioned steps 302 are mentioned in this way, then terminal continue according to The processing mode of same ratio is handled, and processing procedure includes：Obtain each functional area in second browser window Display location and the target scale ratio in the first object region, the target scale ratio are used for the first object area zoom To the size identical with second browser window；The display location of each functional area in second browser window On, show the corresponding picture block of each functional area of this in the first object region according to the target scale ratio.

By being based on first object region, perform display location that each functional area is obtained in step 302 and this first The process of each picture block in first object region is shown in the target scale ratio and step 303 of target area, you can reach To slitless connection so that shown completely in the browser window that first object region can be after scaling, and first will not be made Subject element deformation in target area.

It should be noted that scaling ratio=width/image_w=height/image_h in step 302, But now due to the width in first object region actually drawn in background picture has occurred compared to the width of background picture Variation, and the height in first object region does not change compared to the height of background picture, therefore, terminal can use Scalings of the ratio=height/image_h as background picture.

Above-mentioned steps 304 and step 305 are to be directed to width height of the wide high proportion more than the second browser window of background picture The situation of ratio, terminal can show Background Picture in the second browser window in first object region.In this case, by Left upper apex coordinate in first object region is (x, 0), is somebody's turn to do (x, 0) and refers to the left upper apex in first object region in Background Display location in piece is (x, 0), thus terminal starts to draw in the second browser window from (x, 0) position of background picture And displaying.When browser window scales, if the width of the browser window after scaling is less than the width of background picture When, pass through above-mentioned technological means, it is ensured that the subject element of background picture can completely be shown, and improve display effect Fruit.

306th, when the wide high proportion of background picture in first browser window is less than the width height of second browser window During ratio, the second target area, the width of second target area and the width of the background picture are determined from the background picture Identical and second target area wide high proportion is identical with the wide high proportion of second browser window.

Referring to Fig. 8 and Fig. 9, Fig. 8 is showing for a kind of background picture and the second browser window provided in an embodiment of the present invention It is intended to, Fig. 9 is the practical interface display figure of a kind of background picture and the second browser window provided in an embodiment of the present invention, is such as schemed Shown in 8 or Fig. 9, image_w/image_h ＜ width/height show background picture relative to the second browser window too Height, terminal is it needs to be determined that the second target area identical with the wide high proportion of the second browser window in background picture.

Second target area can be the coboundary certain distance y that background picture is deviateed in coboundary in background picture, under Deviate the region of the lower boundary same distance y of background picture in boundary.In this case, the determination process of the y can include：With the back of the body The width of scape picture is image_w, is highly image_h, and the width of the second browser window is width, is highly height For, the width of the second target area is image_w, is highly height-2y, according to wide high proportion of the second target area etc. In the wide high proportion of the second browser window, then image_w/ (image_h-2y)=width/height can be in the hope of y= (w*image_h-height,*image_w)/2width。

It should be noted that may not be the middle in background picture in view of the subject element in background picture, But it is partial to the upside or downside of background picture, in order to as allow subject element complete in the second browser window as possible Whole display, the coboundary of the second target area and lower boundary can also be respectively offset from coboundary in background picture and lower boundary not Same distance, for example, it is y1 that second target area, which can be the distance that background picture coboundary is deviateed in coboundary in background picture, The value of the region that the distance that lower boundary deviates background picture lower boundary is y2, the y1 and y2 can be all higher than 0, can also be wherein One is equal to 0, another is more than 0.

It is equal to the wide high proportion of the second browser window according to the wide high proportion of the second target area, then image_w/ (image_h-y1-y2)=width/height, can in the hope of y1+y2=(w*image_h-height, * image_w)/ width.In this case, terminal can utilize picture recognition technology, and the subject element in background picture is identified, is obtained The width and height of subject element region, so that it is determined that the specific value of distance y 1 and y 2 so that the second target area Not only width ratio is identical with the second browser window in domain, can also include in the second target area and completely be led in background picture Element is inscribed, ensures that the subject element in background picture finally can completely be shown in the second browser window, improves The display effect of background picture.

307th, the target scale ratio for obtaining display location and second target area is performed based on second target area And display process.

In the embodiment of the present invention, due to the wide high proportion of the second target area in background picture and the second browser window Wide high proportion is identical, has returned to the processing mode for the same ratio that above-mentioned steps 302 are mentioned in this way, then terminal continue according to The processing mode of same ratio is handled, and processing procedure includes：Obtain each functional area in second browser window Display location and the target scale ratio of second target area, the target scale ratio are used to scale second target area To the size identical with second browser window；The display location of each functional area in second browser window On, show the corresponding picture block of each functional area of this in second target area according to the target scale ratio.

By being based on the second target area, perform display location that each functional area is obtained in step 302 and this second The process of each picture block in the second target area is shown in the target scale ratio and step 303 of target area, you can reach To slitless connection so that shown completely in the browser window that the second target area can be after scaling, and second will not be made Subject element deformation in target area.

It should be noted that scaling ratio=width/image_w=height/image_h in step 302, But now due to the height of the second target area actually drawn in background picture has occurred compared to the height of background picture Variation, and the width of the second target area does not change compared to the width of background picture, therefore, terminal can use Scalings of the ratio=width/image_w as background picture.

Above-mentioned steps 306 and step 307 are to be directed to width height of the wide high proportion less than the second browser window of background picture The situation of ratio, terminal can show Background Picture in the second browser window in the second target area.In this case, by Left upper apex coordinate in the second target area is (0, y), is somebody's turn to do (0, y) and refers to the left upper apex of the second target area in Background Display location in piece is (0, y), thus terminal starts to draw in the second browser window from (0, y) position of background picture And displaying.

When browser window scales, if the height of the browser window after scaling is less than the height of background picture Degree, passes through above-mentioned technological means, it is ensured that the subject element of background picture can completely be shown, and improve display effect Fruit.

Referring to Figure 10, Figure 10 is a kind of flow chart of background picture display provided in an embodiment of the present invention, such as Figure 10 Shown, terminal can first judge whether the wide high proportion of the second browser window is equal to the wide high proportion of background picture, if so, Then terminal can obtain the display location of each functional area, rendering context picture, which corresponds to above-mentioned steps 302 to step 303.If it is not, then terminal judgement needs first object region or the second target area in rendering context picture.

Since the left upper apex coordinate in first object region is (x, 0), thus terminal is drawn in the second browser window First object region that is to say (x, the 0) position for being displaced to background picture, with (x, the 0) position to draw starting point, then draw First object region.Since the left upper apex coordinate of the second target area is (0, y), thus terminal is in the second browser window It draws the second target area and that is to say (0, the y) position for being displaced to background picture, with (0, the y) position to draw starting point, then Draw the second target area.Therefore, terminal judgement needs the first object region in rendering context picture or the second target Region, that is to say judgement is offset width or height.If it is determined that the first object region in rendering context picture, that is to say Offset width is then displaced to (x, 0) position of background picture, then draws, which corresponds to above-mentioned steps 304 to step 305； If it is determined that the second target area in rendering context picture, that is to say offset height, then (0, y) position of background picture is displaced to It puts, then draws, which corresponds to above-mentioned steps 306 to step 307.

Terminal draws background picture using above-mentioned technical proposal in browser frames region and web page area, you can Achieve the effect that slitless connection, no matter browser window scaling in any proportion, can find in background picture with after scaling The identical target area of browser window wide high proportion, that is, corresponding deviation post is found, so as to show the master of background picture Part is inscribed, realizes the effect of full frame wallpaper.Solve the problems, such as that multizone shares how a wallpaper is aligned in a browser, together When will not deform background picture when browser is stretched, the relative position for making background picture subject element is constant.No matter Browser window changes in any proportion, and the adapted in real time of background picture can be carried out according to the variation of browser window, real Existing indeformable effect, improves display effect of the background picture in browser window.

Enumerate a kind of example of practical application scene below, the wallpaper in the example is background picture, with more intuitively The effect that background picture displaying scheme provided in an embodiment of the present invention is brought is embodied, in the browser that the program is installed in terminal It uses.

Before browser window scaling, user can set the wallpaper in browser window, for example, user can be in terminal On browser is operated, triggering terminal shows that browser changes the skin page.Referring to Figure 11 and Figure 12, Figure 11 is of the invention real A kind of schematic diagram for changing the skin page of example offer is applied, Figure 12 is a kind of practical interface for changing the skin page provided in an embodiment of the present invention Display figure, as seen in figures 11 or 12, this, which is changed in the skin page, can show multiple wallpaper skins, these wallpaper skins can Background picture as browser window.When user is when skin page layout switch full frame wallpaper is changed, corresponding wall can be switched to In leatheroid skin.For example, user can choose a wallpaper skin therein, triggering terminal sets the wallpaper skin that user chooses The wallpaper of browser window is set to, after setting up, the browser window of terminal can show the effect of full frame wallpaper.

Referring to Figure 13 to Figure 16, Figure 13 is the schematic diagram of a kind of browser wallpaper provided in the relevant technologies, and Figure 14 is phase A kind of practical interface display figure of the browser wallpaper provided in the technology of pass, Figure 15 are a kind of browsings provided in an embodiment of the present invention The schematic diagram of the full frame wallpaper of device, Figure 16 are a kind of practical interface displays of the full frame wallpaper of browser provided in an embodiment of the present invention Figure.As it can be seen that compared to only wallpaper is shown in the frame area of browser window in Figure 13 or Figure 14, it is full frame in Figure 15 or Figure 16 Wallpaper is to be paved with browser window using one whole wallpaper, gives people stronger visual impact.This frame in browser window Region and web page area show the full frame wallpaper display mode of wallpaper, can not only replace the skin wall inside browser frames Paper, and web page area is also using a similary wallpaper, and web page area can be caused no longer to seem thin cavity.Meanwhile if The full frame wallpaper put can all be IP (Intellectual Property, intellectual property) relevant picture, these pictures are used for The element for having cooperative relationship with browser is transmitted, for example, the heat represented star, belong to same operator with browser of browser Door game etc. makes element content preferably be passed to user in this way, deepens user's impression, user is made more to like This functional characteristic of browser.

After browser window scaling, browser window size is smaller, can also by the scaling background picture of equal proportion Ensureing the theme of background picture can completely show.Referring to Figure 17 to Figure 20, Figure 17 is one provided in the relevant technologies The schematic diagram to show Background Picture in the browser window of kind after scaling, Figure 18 are that the one kind provided in the relevant technologies is scaling The practical interface display figure to show Background Picture in browser window afterwards, Figure 19 are that one kind provided in an embodiment of the present invention is contracting The schematic diagram to show Background Picture in browser window after putting, Figure 20 be it is provided in an embodiment of the present invention it is a kind of after scaling The practical interface display figure to show Background Picture in browser window, it is seen then that technological means provided in an embodiment of the present invention, well The theme part for presenting background picture, relative to the scheme in the relevant technologies, effect is good very much.

Method provided in an embodiment of the present invention needs what is scaled by after browser window is scaled, obtaining background picture Ratio, and then in browser window after scaling on the display location of each functional area, according to the ratio display background figure Picture block in piece, so as to fulfill the background picture shown in browser window after scaling after equal proportion scaling so that the back of the body Scape picture can be adapted to the browser window after scaling, and ensureing can in the window of subject element after scaling in background picture It completely shows, improves the display effect of background picture.

Figure 21 is a kind of structure diagram of background picture display device provided in an embodiment of the present invention.It, should with reference to Figure 21 Device includes：

Zoom module 2101, for when receiving scaling instruction, being zoomed in and out to the first application widget, obtaining second should Use window；

Acquisition module 2102, should equal to described second for working as the wide high proportion of background picture in first application widget During with the wide high proportion of window, the display location of each functional area and the background picture in second application widget are obtained Target scale ratio, the target scale ratio for the background picture is zoomed to it is identical with second application widget Size；

Display module 2103 for the display location of each functional area described in second application widget, is pressed The corresponding picture block of each functional area described in the background picture is shown according to the target scale ratio.

Optionally, the acquisition module 2102, for by the height of second application widget and the background picture The ratio of height is retrieved as the target scale ratio；Or,

The acquisition module 2102, for by the ratio of the width of second application widget and the width of the background picture Example is retrieved as the target scale ratio.

Optionally, the display module 2103, for according to the target scale ratio, in second application widget First apex coordinate of each functional area zooms in and out, and obtains corresponding second vertex of each functional area and sits Mark；In the background picture, based on corresponding second apex coordinate of each functional area, each functional areas are determined The corresponding picture block in domain；On the display location of each functional area, according to the target scale ratio, draw described each The corresponding picture block of a functional area, to be shown.

Optionally, the display module 2103, for according to the target scale ratio, contracting to the background picture It puts, the background picture after being scaled；In background picture after the scaling, the first top based on each functional area Point coordinates determines the corresponding picture block of each functional area；On the display location of each functional area, institute is drawn The corresponding picture block of each functional area is stated, to be shown.

Optionally, referring to Figure 22, described device further includes：

Determining module 2104, should more than described second for working as the wide high proportion of background picture in first application widget During with the wide high proportion of window, determine first object region from the background picture, the height in the first object region with The height of the background picture is identical and the wide high proportion in the first object region and the ratio of width to height of second application widget Example is identical；

The acquisition module 2102 is additionally operable to perform acquisition display location and described first based on the first object region The process of the target scale ratio of target area；

The display module 2103 is additionally operable to perform display process based on the first object region.

Optionally, the determining module 2104 is additionally operable to when the wide high proportion of background picture in first application widget Less than second application widget wide high proportion when, from the background picture determine the second target area, second mesh The wide high proportion for marking the width in region and the second target area of same size and described of the background picture should with described second It is identical with the wide high proportion of window；

The acquisition module 2102 is additionally operable to perform acquisition display location and described second based on second target area The process of the target scale ratio of target area；

Device provided in an embodiment of the present invention, the ratio scaled by after application widget is scaled, obtaining background picture needs Example, and then in application widget after scaling on the display location of each functional area, in showing Background Picture according to the ratio Picture block, so as to fulfill shown in application widget after scaling equal proportion scaling after background picture so that background picture The application widget that can be adapted to after scaling ensures completely open up in the window of the subject element in background picture after scaling Reveal and, improve the display effect of background picture.

It should be noted that：Above-described embodiment provide background picture display device when showing Background Picture, only more than The division progress of each function module is stated for example, in practical application, it can be as needed and by above-mentioned function distribution by difference Function module complete, i.e., the internal structure of equipment is divided into different function modules, with complete it is described above whole or Person's partial function.In addition, the background picture display device that above-described embodiment provides belongs to background picture display embodiment Same design, specific implementation process refer to embodiment of the method, and which is not described herein again.

Figure 23 is a kind of structure diagram of terminal 2300 provided in an embodiment of the present invention.The terminal 2300 can be：Intelligence It can mobile phone, tablet computer, MP3 player (Moving Picture Experts Group AudioLayer III, dynamic shadow As expert's compression standard audio level 3), MP4 (Moving Picture Experts Group Audio Layer IV, dynamic Image expert's compression standard audio level 4) player, laptop or desktop computer.Terminal 2300 is also possible to be referred to as using Other titles such as family equipment, portable terminal, laptop terminal, terminal console.

In general, terminal 2300 includes：Processor 2301 and memory 2302.

Processor 2301 can include one or more processing cores, such as 4 core processors, 8 core processors etc..Place DSP (Digital Signal Processing, Digital Signal Processing), FPGA (Field- may be used in reason device 2301 Programmable Gate Array, field programmable gate array), PLA (Programmable Logic Array, may be programmed Logic array) at least one of example, in hardware realize.Processor 2301 can also include primary processor and coprocessor, main Processor is the processor for being handled data in the awake state, also referred to as CPU (Central Processing Unit, central processing unit)；Coprocessor is the low power processor for being handled data in the standby state. In some embodiments, processor 2301 can be integrated with GPU (Graphics Processing Unit, image processor), GPU is used to be responsible for the rendering and drafting of content to be shown needed for display screen.In some embodiments, processor 2301 can also wrap AI (Artificial Intelligence, artificial intelligence) processor is included, which is used to handle related machine learning Calculating operation.

Memory 2302 can include one or more computer readable storage mediums, which can To be non-transient.Memory 2302 may also include high-speed random access memory and nonvolatile memory, such as one Or multiple disk storage equipments, flash memory device.In some embodiments, the non-transient computer in memory 2302 can Storage medium is read for storing at least one instruction, at least one instruction is for performed to realize this Shen by processor 2301 Please in embodiment of the method provide background picture display.

In some embodiments, terminal 2300 is also optional includes：Peripheral device interface 2303 and at least one periphery are set It is standby.It can be connected between processor 2301, memory 2302 and peripheral device interface 2303 by bus or signal wire.It is each outer Peripheral equipment can be connected by bus, signal wire or circuit board with peripheral device interface 2303.Specifically, peripheral equipment includes： In radio circuit 2304, display screen 2305, camera 2306, voicefrequency circuit 2307, positioning component 2308 and power supply 2309 extremely Few one kind.

Peripheral device interface 2303 can be used for I/O (Input/Output, input/output) is relevant at least one outer Peripheral equipment is connected to processor 2301 and memory 2302.In some embodiments, processor 2301, memory 2302 and periphery Equipment interface 2303 is integrated on same chip or circuit board；In some other embodiments, processor 2301, memory 2302 and peripheral device interface 2303 in any one or two can be realized on individual chip or circuit board, this implementation Example is not limited this.

Radio circuit 2304 is used to receive and emit RF (Radio Frequency, radio frequency) signal, also referred to as electromagnetic signal. Radio circuit 2304 is communicated by electromagnetic signal with communication network and other communication equipments.Radio circuit 2304 is by telecommunications Number being converted to electromagnetic signal is sent, alternatively, the electromagnetic signal received is converted to electric signal.Optionally, radio circuit 2304 include：Antenna system, one or more amplifiers, tuner, oscillator, digital signal processor, compiles solution at RF transceivers Code chipset, user identity module card etc..Radio circuit 2304 can by least one wireless communication protocol come with it is other Terminal communicates.The wireless communication protocol includes but not limited to：Metropolitan Area Network (MAN), each third generation mobile communication network (2G, 3G, 4G and 5G), WLAN and/or WiFi (Wireless Fidelity, Wireless Fidelity) network.In some embodiments, radio frequency electrical Road 2304 can also include the related circuits of NFC (Near Field Communication, wireless near field communication), the application This is not limited.

Display screen 2305 is used to show UI (UserInterface, user interface).The UI can include figure, text, figure Mark, video and its their arbitrary combination.When display screen 2305 is touch display screen, display screen 2305 also has acquisition aobvious The surface of display screen 2305 or the ability of the touch signal of surface.The touch signal can be used as control signal to be input to processing Device 2301 is handled.At this point, display screen 2305 can be also used for providing virtual push button and/or dummy keyboard, also referred to as soft button And/or soft keyboard.In some embodiments, display screen 2305 can be one, set the front panel of terminal 2300；At other In embodiment, display screen 2305 can be at least two, be separately positioned on the different surfaces of terminal 2300 or in foldover design； In still other embodiments, display screen 2305 can be flexible display screen, be arranged on the curved surface of terminal 2300 or fold plane On.Even, display screen 2305 can also be arranged to non-rectangle irregular figure namely abnormity screen.Display screen 2305 can be adopted With LCD (Liquid Crystal Display, liquid crystal display), (Organic Light-Emitting Diode, have OLED Machine light emitting diode) etc. materials prepare.

CCD camera assembly 2306 is used to acquire image or video.Optionally, CCD camera assembly 2306 includes front camera And rear camera.In general, front camera is arranged on the front panel of terminal, rear camera is arranged on the back side of terminal. In some embodiments, rear camera at least two is that main camera, depth of field camera, wide-angle camera, focal length are taken the photograph respectively As any one in head, to realize main camera and background blurring function, main camera and wide are realized in the fusion of depth of field camera Pan-shot and VR (Virtual Reality, virtual reality) shooting functions or other fusions are realized in angle camera fusion Shooting function.In some embodiments, CCD camera assembly 2306 can also include flash lamp.Flash lamp can be monochromatic temperature flash of light Lamp or double-colored temperature flash lamp.Double-colored temperature flash lamp refers to the combination of warm light flash lamp and cold light flash lamp, can be used for Light compensation under different-colour.

Voicefrequency circuit 2307 can include microphone and loud speaker.Microphone is used to acquire the sound wave of user and environment, and It converts sound waves into electric signal and is input to processor 2301 and handled or be input to radio circuit 2304 to realize that voice leads to Letter.For stereo acquisition or the purpose of noise reduction, microphone can be multiple, be separately positioned on the different parts of terminal 2300. Microphone can also be array microphone or omnidirectional's acquisition type microphone.Loud speaker is then used to that processor 2301 or radio frequency will to be come from The electric signal of circuit 2304 is converted to sound wave.Loud speaker can be traditional wafer speaker or piezoelectric ceramics is raised one's voice Device.When loud speaker is piezoelectric ceramic loudspeaker, the audible sound wave of the mankind can be not only converted electrical signals to, can also be incited somebody to action Electric signal is converted to the sound wave that the mankind do not hear to carry out the purposes such as ranging.In some embodiments, voicefrequency circuit 2307 may be used also To include earphone jack.

Positioning component 2308 is used for the current geographic position of positioning terminal 2300, to realize navigation or LBS (Location Based Service, location based service).Positioning component 2308 can be the GPS (Global based on the U.S. Positioning System, global positioning system), the dipper system of China, Russia Gray receive this system or European Union The positioning component of Galileo system.

Power supply 2309 is used to be powered for the various components in terminal 2300.Power supply 2309 can be alternating current, direct current Electricity, disposable battery or rechargeable battery.When power supply 2309 includes rechargeable battery, which can support wired Charging or wireless charging.The rechargeable battery can be also used for supporting fast charge technology.

In some embodiments, terminal 2300 further include there are one or multiple sensors 2310.The one or more senses Device 2310 includes but not limited to：Acceleration transducer 2311, gyro sensor 2312, pressure sensor 2313, fingerprint sensing Device 2314, optical sensor 2315 and proximity sensor 2316.

Acceleration transducer 2311 can detect the acceleration in three reference axis of the coordinate system established with terminal 2300 Size.For example, acceleration transducer 2311 can be used for detecting component of the acceleration of gravity in three reference axis.Processor The 2301 acceleration of gravity signals that can be acquired according to acceleration transducer 2311, control touch display screen 2305 is with transverse views Or longitudinal view carries out the display of user interface.Acceleration transducer 2311 can be also used for game or the exercise data of user Acquisition.

Gyro sensor 2312 can be with the body direction of detection terminal 2300 and rotational angle, gyro sensor 2312 Acquisition user can be cooperateed with to act the 3D of terminal 2300 with acceleration transducer 2311.Processor 2301 is according to gyro sensors The data that device 2312 acquires, can implement function such as：Action induction (for example changing UI according to the tilt operation of user) is clapped Image stabilization, game control and inertial navigation when taking the photograph.

Pressure sensor 2313 can be arranged on the side frame of terminal 2300 and/or the lower floor of touch display screen 2305.When When pressure sensor 2313 is arranged on the side frame of terminal 2300, gripping signal of the user to terminal 2300 can be detected, by Reason device 2301 carries out right-hand man's identification or prompt operation according to the gripping signal that pressure sensor 2313 acquires.Work as pressure sensor 2313 when being arranged on the lower floor of touch display screen 2305, and the pressure of touch display screen 2305 is grasped according to user by processor 2301 Make, realize and the operability control on UI interfaces is controlled.Operability control include button control, scroll bar control, At least one of icon control, menu control.

Fingerprint sensor 2314 is used to acquire the fingerprint of user, is collected by processor 2301 according to fingerprint sensor 2314 Fingerprint recognition user identity, alternatively, by fingerprint sensor 2314 according to the identity of collected fingerprint recognition user.Knowing When the identity for not going out user is trusted identity, the user is authorized to perform relevant sensitive operation, sensitivity behaviour by processor 2301 Work includes solving lock screen, checks encryption information, downloads software, payment and change setting etc..Fingerprint sensor 2314 can be set Put the front, the back side or side of terminal 2300.When being provided with physical button or manufacturer Logo in terminal 2300, fingerprint sensor 2314 can integrate with physical button or manufacturer Logo.

Optical sensor 2315 is used to acquire ambient light intensity.In one embodiment, processor 2301 can be according to light The ambient light intensity that sensor 2315 acquires is learned, controls the display brightness of touch display screen 2305.Specifically, work as ambient light intensity When higher, the display brightness of touch display screen 2305 is turned up；When ambient light intensity is relatively low, the aobvious of touch display screen 2305 is turned down Show brightness.In another embodiment, the ambient light intensity that processor 2301 can also be acquired according to optical sensor 2315, is moved State adjusts the acquisition parameters of CCD camera assembly 2306.

Proximity sensor 2316, also referred to as range sensor are generally arranged at the front panel of terminal 2300.Proximity sensor 2316 are used to acquire the distance between user and front of terminal 2300.In one embodiment, when proximity sensor 2316 is examined When the distance between front for measuring user and terminal 2300 tapers into, by processor 2301 control touch display screen 2305 from Bright screen state is switched to breath screen state；When proximity sensor 2316 detect the distance between front of user and terminal 2300 by When gradual change is big, touch display screen 2305 is controlled to be switched to bright screen state from breath screen state by processor 2301.

It, can be with it will be understood by those skilled in the art that the restriction of the structure shown in Figure 23 not structure paired terminal 2300 Including either combining certain components or using different component arrangements than illustrating more or fewer components.

In the exemplary embodiment, a kind of computer readable storage medium is additionally provided, such as instructed including at least one, At least memory of one section of program, code set or instruction set, above-mentioned at least one instruction or refer at least one section of program, code set Enable collection that can be loaded and performed to complete the background picture display in the corresponding embodiments of above-mentioned Fig. 2 or Fig. 3 by processor.Example Such as, computer readable storage medium can be read-only memory (Read-Only Memory, ROM), random access memory (Random-Access Memory, RAM), CD-ROM (Compact Disc Read-Only Memory, CD-ROM), magnetic Band, floppy disk and optical data storage devices etc..

One of ordinary skill in the art will appreciate that hardware can be passed through by realizing all or part of step of above-described embodiment It completes, relevant hardware can also be instructed to complete by program, which can be stored in a kind of computer-readable storage In medium, storage medium mentioned above can be read-only memory, disk or CD etc..

The foregoing is merely a prefered embodiment of the invention, is not intended to limit the invention, all in the spirit and principles in the present invention Within, any modification, equivalent replacement, improvement and so on should all be included in the protection scope of the present invention.

Claims

1. a kind of background picture display, which is characterized in that the method includes：

When the wide high proportion of background picture in first application widget is equal to the wide high proportion of second application widget, obtain Take the target scale ratio of the display location of each functional area and the background picture in second application widget, the mesh Mark scaling is used to zooming to the background picture into the size identical with second application widget；

Described in second application widget on the display location of each functional area, shown according to the target scale ratio The corresponding picture block of each functional area described in the background picture.

2. according to the method described in claim 1, it is characterized in that, the target scale ratio for obtaining the background picture, Including：

3. according to the method described in claim 1, it is characterized in that, each function described in second application widget On the display location in region, show that each functional area described in the background picture is corresponding according to the target scale ratio Picture block, including：

According to the target scale ratio, to the first apex coordinate of each functional area described in second application widget into Row scaling, obtains corresponding second apex coordinate of each functional area；

In the background picture, based on corresponding second apex coordinate of each functional area, each function is determined The corresponding picture block in region；

On the display location of each functional area, according to the target scale ratio, each functional area is drawn Corresponding picture block, to be shown.

4. according to the method described in claim 1, it is characterized in that, each function described in second application widget On the display location in region, show that each functional area described in the background picture is corresponding according to the target scale ratio Picture block, including：

According to the target scale ratio, the background picture is zoomed in and out, the background picture after being scaled；

In background picture after the scaling, based on the first apex coordinate of each functional area, determine described each The corresponding picture block of functional area；

5. according to the method described in claim 1, it is characterized in that, it is described when receive scaling instruction when, to the first application window Mouth zooms in and out, and after obtaining the second application widget, the method further includes：

When the wide high proportion of background picture in first application widget is more than the wide high proportion of second application widget, from First object region is determined in the background picture, the height in the first object region is identical with the height of the background picture And the wide high proportion in the first object region is identical with the wide high proportion of second application widget；

6. according to the method described in claim 1, it is characterized in that, it is described when receive scaling instruction when, to the first application window Mouth zooms in and out, and after obtaining the second application widget, the method further includes：

When the wide high proportion of background picture in first application widget is less than the wide high proportion of second application widget, from The second target area is determined in the background picture, the width of second target area is of same size with the background picture And the wide high proportion of second target area is identical with the wide high proportion of second application widget；

7. a kind of background picture display device, which is characterized in that described device includes：

Zoom module, for when receiving scaling instruction, being zoomed in and out to the first application widget, obtaining the second application widget；

Acquisition module, for working as the wide high proportion of background picture in first application widget equal to second application widget During wide high proportion, the target of the display location of each functional area and background picture contracting in second application widget is obtained Ratio is put, the target scale ratio is used to zooming to the background picture into the size identical with second application widget；

Display module, for the display location of each functional area described in second application widget, according to the mesh Mark scaling shows the corresponding picture block of each functional area described in the background picture.

8. device according to claim 7, which is characterized in that the acquisition module, for by second application widget Height and the ratio of height of the background picture be retrieved as the target scale ratio；Or,

The acquisition module, for the ratio of the width of second application widget and the width of the background picture to be retrieved as The target scale ratio.

9. device according to claim 7, which is characterized in that the display module, for according to the target scale ratio Example, zooms in and out the first apex coordinate of each functional area described in second application widget, obtains each work( It can corresponding second apex coordinate in region；In the background picture, based on corresponding second vertex of each functional area Coordinate determines the corresponding picture block of each functional area；On the display location of each functional area, according to described Target scale ratio draws the corresponding picture block of each functional area, to be shown.

10. device according to claim 7, which is characterized in that the display module, for according to the target scale ratio Example, zooms in and out the background picture, the background picture after being scaled；In background picture after the scaling, it is based on First apex coordinate of each functional area determines the corresponding picture block of each functional area；In each work( On the display location in energy region, the corresponding picture block of each functional area is drawn, to be shown.

11. device according to claim 7, which is characterized in that described device further includes：

Determining module, for working as the wide high proportion of background picture in first application widget more than second application widget During wide high proportion, first object region, height and the background in the first object region are determined from the background picture The height of picture is identical and the wide high proportion in the first object region is identical with the wide high proportion of second application widget；

The acquisition module is additionally operable to perform acquisition display location and the first object region based on the first object region Target scale ratio process；

The display module is additionally operable to perform display process based on the first object region.

12. device according to claim 7, which is characterized in that

The determining module is additionally operable to be less than the described second application when the wide high proportion of background picture in first application widget During the wide high proportion of window, the second target area, the width of second target area and institute are determined from the background picture State the wide high proportion of the second target area of same size and described of background picture and the wide high proportion of second application widget It is identical；

The acquisition module is additionally operable to perform acquisition display location and second target area based on second target area Target scale ratio process；

13. a kind of terminal, which is characterized in that the terminal includes processor and memory, is stored at least in the memory One instruction, at least one section of program, code set or instruction set, at least one instruction, at least one section of program, code set or refer to Collection is enabled to be loaded by the processor and performed to realize such as claim 1 to 6 any one of them background picture display.

14. a kind of computer readable storage medium, which is characterized in that at least one is stored in the computer readable storage medium Item instruction, at least one section of program, code set or instruction set, at least one instruction, at least one section of program, code set or instruction Collection is loaded by processor and is performed to realize such as claim 1 to 6 any one of them background picture display.