CN113628295A

CN113628295A - Method for drawing poster

Info

Publication number: CN113628295A
Application number: CN202110879201.3A
Authority: CN
Inventors: 陈文昊
Original assignee: Inspur Software Co Ltd
Current assignee: Inspur Software Co Ltd
Priority date: 2021-08-02
Filing date: 2021-08-02
Publication date: 2021-11-09

Abstract

The invention relates to the field of internet front ends, and particularly provides a poster drawing method, which is realized on the basis of a canvas interface provided by a browser, adjusts canvas elements and a canvas background, ensures that one physical pixel corresponds to one CSS pixel, and simultaneously zooms and zooms equipment. Compared with the prior art, the method can solve the problem of compatibility of the existing plug-in when the webpage is drawn and converted into the canvas; and the problem of drawing distortion existing in a basic interface and an original drawing method during drawing the canvas by hand can be solved. The problems of equipment adaptation and precision optimization can be realized only by calling the packaging code.

Description

Method for drawing poster

Technical Field

The invention relates to the field of internet front ends, and particularly provides a poster drawing method.

Background

Today, the popularization of internet products becomes an important means for each internet company to seize the market, and it is a common means to draw new users by sharing personalized posters with existing customers. The prior art approaches mainly include conversion of the rendering of a webpage into a canvas to derive a picture and rendering directly through the canvas to derive the picture. Although there are various implementation plug-ins for the method of drawing a canvas through a web page, there are more or less compatibility problems. The method of drawing directly through the canvas also has certain distortion problems.

Disclosure of Invention

The invention provides a poster drawing method with strong practicability aiming at the defects of the prior art.

The technical scheme adopted by the invention for solving the technical problems is as follows:

a method for drawing posters is realized on the basis of a canvas interface provided by a browser, canvas elements and a canvas background are adjusted, it is ensured that one physical pixel corresponds to one CSS pixel, and the size of equipment is zoomed at the same time.

Further, a fixed height and a fixed width are given to the canvas elements, and a device pixel ratio and a size multiplied by the fixed height and the fixed width are set for the canvas background, namely, the canvas is drawn on a piece of enlarged canvas with the size multiplied by the device pixel ratio.

Furthermore, after drawing on a canvas with the enlarged pixel ratio multiple size of the equipment, reducing the pixel ratio multiple of the equipment, and then placing the canvas in a canvas frame with the original size.

Further, according to the canvas rendering mechanism, the canvas may expand from the centerline to both sides when rendering the pixel width, i.e., the width of one side may become half.

Further, in the rendering mechanism, the pixels cannot be decimal, so the pixels can be rounded, and the loss of the approximation can be reduced by firstly enlarging and drawing the canvas and then reducing the canvas.

Preferably, one physical pixel is guaranteed to correspond to one CSS pixel, and the ratio of CSS pixels to physical pixels is the device pixel ratio.

Further, the canvas background is enlarged, all the elements of the positions and the sizes of the drawn images need to be enlarged in the same proportion, and therefore a zooming interface of the canvas needs to be called, and all the images on the background are drawn and enlarged in the proportion at one time.

Further, in scaling the device size, referring to the minimum of the width scaling ratio and the height scaling ratio, both the canvas element size setting and the canvas background size setting and the canvas scaling ratio should be multiplied by this minimum scaling ratio.

Compared with the prior art, the method for drawing the poster has the following outstanding advantages:

the invention can solve the compatibility problem of the existing plug-in when the webpage is drawn and converted into canvas; and the problem of drawing distortion existing in a basic interface and an original drawing method during drawing the canvas by hand can be solved. The problems of equipment adaptation and precision optimization can be realized only by calling the packaging code.

Drawings

In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below, and it is obvious that the drawings in the following description are some embodiments of the present invention, and for those skilled in the art, other drawings can be obtained according to these drawings without creative efforts.

Fig. 1 is a schematic diagram of the conversion of physical pixels to CSS pixels in a method of drawing a poster.

Detailed Description

The present invention will be described in further detail with reference to specific embodiments in order to better understand the technical solutions of the present invention. It is to be understood that the described embodiments are merely exemplary of the invention, and not restrictive of the full scope of the invention. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present invention.

A preferred embodiment is given below:

as shown in fig. 1, the method for drawing a poster in this embodiment is implemented on the basis of a canvas-canvas interface provided by a browser, and because the canvas interface is an interface that must be implemented by each large browser, the problem of mobile phone system compatibility can be avoided.

As for the problem of drawing distortion, a fixed height and a fixed width are given to drawing elements, then the size of multiplying the device pixel ratio by the fixed height and the fixed width is set for a canvas background, and therefore the method is equivalent to that after drawing is finished on a canvas with the size of amplifying the device pixel ratio by multiple, the canvas is placed in a canvas frame with the original size after the device pixel ratio by multiple is reduced.

But it is reasonable to say that there is no difference between zooming in and zooming out, why there is a difference between this, which is actually caused by the canvas rendering mechanism.

The canvas expands from the middle line to two sides when the width of the pixel is rendered, so that the width of a single side can become half, however, the pixel cannot be a decimal number, so the pixel can be rounded off, and the loss of the drawing is reduced when the canvas is enlarged and drawn and then reduced.

As for the reason that the magnification factor is selected by adopting the device pixel ratio, it is more obvious that if the precision is improved to the maximum extent, one physical pixel is ensured to correspond to one CSS pixel, and the ratio of the CSS pixel to the physical pixel is the device pixel ratio. Similarly, the background is enlarged, all elements such as the position and the size of the image of the drawing are enlarged in the same scale, and at the moment, a zooming interface of the canvas can be called, so that all the images on the background can be enlarged in the scale at one time.

In addition, the size of the canvas element does not vary with the size of the device, so we should also consider the scaling of the device size when setting the canvas element size and the canvas background size.

The device scaling for the common elements is only based on width scaling, but since the size of the poster does not exceed the current screen, the minimum value of the width scaling ratio and the height scaling ratio should be referred to here to ensure that no single side exceeds the screen. The canvas element size setting and the canvas background size setting, as well as the canvas scaling ratio, should both be multiplied by this minimum scaling ratio. This ensures that the poster size fits with the device.

As shown in FIG. 1, the CSS pixel is larger than the physical pixel, but the canvas with multiple pixel ratio of the device is drawn, so that the number of unit pixels is increased, and the CSS pixel occupies one physical pixel by reducing.

The above embodiments are only specific ones of the present invention, and the scope of the present invention includes but is not limited to the above embodiments, and any appropriate changes or substitutions according to the claims of a method of drawing a poster according to the present invention and by any person skilled in the art should fall within the scope of the present invention.

Although embodiments of the present invention have been shown and described, it will be appreciated by those skilled in the art that changes, modifications, substitutions and alterations can be made in these embodiments without departing from the principles and spirit of the invention, the scope of which is defined in the appended claims and their equivalents.

Claims

1. A method for drawing posters is characterized in that the method is realized on the basis of a canvas interface provided by a browser, canvas elements and a canvas background are adjusted, one physical pixel is ensured to correspond to one CSS pixel, and the equipment size is zoomed at the same time.

2. A method of rendering a poster as claimed in claim 1, characterised in that the canvas elements are given a fixed height and width and the canvas background is set to a device pixel ratio multiplied by the fixed height and width, i.e. rendered on an enlarged canvas of a multiple of the device pixel ratio.

3. A method of rendering a poster according to claim 2, wherein after rendering on a canvas of an enlarged device pixel ratio multiple size, the device pixel ratio multiple is reduced and then placed in a canvas frame of the original size.

4. A method of drawing a poster according to claim 3, wherein the canvas expands from mid-line to both sides when rendering the pixel width, i.e. the width of a single side becomes half, according to the canvas rendering mechanism.

5. A method of rendering a poster as claimed in claim 4, wherein in the rendering mechanism, the pixels cannot be fractional and so are rounded, and the penalty is reduced by the canvas being enlarged and then reduced.

6. A method of drawing a poster according to claim 5, wherein it is ensured that one physical pixel corresponds to one CSS pixel, the ratio of CSS pixels to physical pixels being the device pixel ratio.

7. A method of drawing a poster of claim 6, wherein the canvas background is enlarged and all of the rendered image position size elements are enlarged to the same scale, which calls the canvas zoom interface to enlarge all of the image rendering on all of the background at once.

8. A method of drawing a poster of claim 7, wherein in scaling of the device size, the canvas element size setting and the canvas background size setting and the canvas scaling ratio should all be multiplied by the minimum of the width scaling ratio and the height scaling ratio.