Adaptive method and device for drawing pictures on a vehicle, electronic equipment and medium

Abstract

The application relates to the technical field of canvas adaptation, in particular to a self-adaption method and device for drawing a picture on a vehicle, electronic equipment and a medium, wherein the method comprises the following steps: obtaining the screen resolution of a vehicle terminal and the resolution of a drawing picture; calculating a target conversion ratio according to the screen resolution and the resolution, and generating a packaging function according to all layers of the drawing picture and the target conversion ratio; and obtaining a first picture capable of being displayed on the vehicle terminal based on the packaging function and the drawing picture in the case that the screen resolution meets preset self-adaption conditions. Thus, the problem of canvas graphic multi-end adaptation is solved, and canvas graphic self-adaption is realized.

Description

Technical Field

[0001] This application relates to the field of canvas adaptation technology, and in particular to an adaptive method, device, electronic device, and medium for drawing images on a vehicle. Background Technology

[0002] The technology for implementing 2D images using canvas is quite mature, but there are still various problems with canvas adaptation. Canvas graphics cannot yet be adapted to various devices, which urgently needs to be solved. Summary of the Invention

[0003] This application provides an adaptive method, apparatus, electronic device, and medium for drawing images on a vehicle to solve the problem of multi-platform adaptation of canvas graphics.

[0004] The first aspect of this application provides an adaptive method for drawing an image on a vehicle, comprising the following steps: obtaining the screen resolution of the vehicle terminal and the resolution of the drawn image; calculating a target conversion ratio based on the screen resolution and the resolution, and generating an encapsulation function based on all layers of the drawn image and the target conversion ratio; and obtaining a first image that can be displayed on the vehicle terminal based on the encapsulation function and the drawn image when the screen resolution meets preset adaptive conditions.

[0005] Optionally, the encapsulation function is a canvas function, wherein generating the encapsulation function based on all layers of the drawn image and the target conversion ratio includes: multiplying the dimensions of all layers of the drawn image by the target conversion ratio to obtain the canvas function.

[0006] Optionally, calculating the target conversion ratio based on the screen resolution and the resolution includes: obtaining the target conversion ratio based on the ratio between the screen resolution of the vehicle terminal and the resolution of the drawn image.

[0007] Optionally, after obtaining the first image that can be displayed on the vehicle terminal based on the encapsulation function and the drawn image, the method further includes: detecting whether the screen resolution of the vehicle terminal has changed; if the screen resolution change is detected, obtaining the new screen resolution of the vehicle terminal; and obtaining the second image that can be displayed on the vehicle terminal again based on the new screen resolution and the resolution of the drawn image.

[0008] Optionally, the above-described adaptive method for drawing images on a vehicle further includes: displaying the first image on the vehicle terminal.

[0009] Optionally, before displaying the first image, the method further includes: receiving a display instruction from a user; and allowing the vehicle terminal to display the image based on the display instruction.

[0010] A second aspect of this application provides an adaptive device for drawing images on a vehicle, comprising: an acquisition module for acquiring the screen resolution of a vehicle terminal and the resolution of the drawn image; a generation module for calculating a target conversion ratio based on the screen resolution and the resolution, and generating an encapsulation function based on all layers of the drawn image and the target conversion ratio; and a display module for obtaining a first image that can be displayed on the vehicle terminal based on the encapsulation function and the drawn image, provided that the screen resolution meets preset adaptive conditions.

[0011] Optionally, the encapsulation function is a canvas function, and the generation module is further configured to: multiply the dimensions of all layers of the drawn image by the target conversion ratio to obtain the canvas function.

[0012] Optionally, the generation module is further configured to: obtain the target conversion ratio based on the ratio between the screen resolution of the vehicle terminal and the resolution of the drawn image.

[0013] Optionally, after obtaining the first image that can be displayed on the vehicle terminal based on the encapsulation function and the drawn image, the display module is further configured to: detect whether the screen resolution of the vehicle terminal has changed; if the screen resolution change is detected, re-acquire the new screen resolution of the vehicle terminal; and re-acquire the second image that can be displayed on the vehicle terminal based on the new screen resolution and the resolution of the drawn image.

[0014] Optionally, the above-described adaptive device for drawing images on a vehicle further includes: displaying the first image on the vehicle terminal.

[0015] Optionally, before displaying the first image, the method further includes: receiving a display instruction from a user; and allowing the vehicle terminal to display the image based on the display instruction.

[0016] A third aspect of this application provides an electronic device, including: a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the program to implement the adaptive method for drawing images on a vehicle as described in the above embodiments.

[0017] A fourth aspect of this application provides a computer-readable storage medium having a computer program stored thereon, which is executed by a processor to implement the adaptive method for drawing images on a vehicle as described in the above embodiments.

[0018] This application obtains the screen resolution of the vehicle terminal and the resolution of the drawn image, calculates the target conversion ratio based on the screen resolution and the target conversion ratio, and generates a wrapper function based on all layers of the drawn image and the target conversion ratio. When the screen resolution meets preset adaptive conditions, a first image that can be displayed on the vehicle terminal is obtained based on the wrapper function and the drawn image. This solves the problem of multi-platform adaptation of canvas graphics and achieves canvas graphics self-adaptation.

[0019] Additional aspects and advantages of this application will be set forth in part in the description which follows, and in part will be obvious from the description, or may be learned by practice of this application. Attached Figure Description

[0020] The above and / or additional aspects and advantages of this application will become apparent and readily understood from the following description of the embodiments taken in conjunction with the accompanying drawings, wherein:

[0021] Figure 1 This is a flowchart of an adaptive method for drawing images on a vehicle according to an embodiment of this application;

[0022] Figure 2 This is a flowchart of an adaptive method for drawing images on a vehicle according to an embodiment of this application;

[0023] Figure 3 This is a block diagram of an adaptive device on a vehicle according to an embodiment of this application;

[0024] Figure 4 This is a schematic diagram of the structure of an electronic device according to an embodiment of this application. Detailed Implementation

[0025] The embodiments of this application are described in detail below. Examples of these embodiments are shown in the accompanying drawings, wherein the same or similar reference numerals denote the same or similar elements or elements having the same or similar functions throughout. The embodiments described below with reference to the accompanying drawings are exemplary and intended to explain this application, and should not be construed as limiting this application.

[0026] The following description, with reference to the accompanying drawings, describes an adaptive method, apparatus, electronic device, and medium for drawing images on a vehicle according to embodiments of this application. Addressing the multi-platform adaptation problem of canvas graphics mentioned in the background section, this application provides an adaptive method for drawing images on a vehicle. In this method, the screen resolution of the vehicle terminal and the resolution of the drawn image are obtained; a target conversion ratio is calculated based on the screen resolution and the target conversion ratio; and an encapsulation function is generated based on all layers of the drawn image and the target conversion ratio. When the screen resolution meets preset adaptive conditions, a first image that can be displayed on the vehicle terminal is obtained based on the encapsulation function and the drawn image. Thus, the multi-platform adaptation problem of canvas graphics is solved, achieving canvas graphics self-adaptation.

[0027] Specifically, Figure 1 This is a flowchart illustrating an adaptive method for drawing images on a vehicle, as provided in an embodiment of this application.

[0028] like Figure 1 As shown, the adaptive method for drawing images on a vehicle includes the following steps:

[0029] In step S101, the screen resolution of the vehicle terminal and the resolution of the drawn image are obtained.

[0030] Specifically, in this embodiment of the application, the screen resolution of the current vehicle terminal and the resolution of the drawn image are obtained through JavaScript, including the screen resolution width of the vehicle terminal and the resolution width of the drawn image.

[0031] In step S101, the target conversion ratio is calculated based on the screen resolution and the resolution, and an encapsulation function is generated based on all layers of the drawn image and the target conversion ratio.

[0032] Optionally, in some embodiments, calculating the target conversion ratio based on the screen resolution and the resolution includes: obtaining the target conversion ratio based on the ratio between the screen resolution of the vehicle terminal and the resolution of the drawn image.

[0033] Specifically, in this application embodiment, the target conversion ratio is obtained by the ratio of the screen resolution of the vehicle terminal to the resolution of the drawn image. For example, if the screen resolution width of the drawn image is 750px, the target conversion ratio S = width of the vehicle terminal screen resolution / 750; when the size of the drawn image is 360px, the target conversion ratio S = width of the vehicle terminal screen resolution / 360. Similarly, when drawing the graphic size using an expression, the actual size of the drawn image is also used.

[0034] Furthermore, in some embodiments, the encapsulation function is a canvas function, wherein generating the encapsulation function based on all layers of the drawn image and the target conversion ratio includes: multiplying the dimensions of all layers of the drawn image by the target conversion ratio to obtain the canvas function.

[0035] Since canvas draws images by merging layers, each layer has canvas drawing commands, and each command contains a size expression, the size value is multiplied by the target conversion ratio S, and the commands that implement the graphic step by step are encapsulated into a newly named function, which is the canvas function. As long as the canvas function is executed, the image can be drawn.

[0036] In step S101, if the screen resolution meets the preset adaptive conditions, a first image that can be displayed on the vehicle terminal is obtained based on the encapsulation function and the drawn image.

[0037] Optionally, in some embodiments, the above-described adaptive method for drawing images on a vehicle further includes: displaying a first image on a vehicle terminal.

[0038] The preset adaptive condition can be understood as re-executing the canvas function to obtain the first image that can be displayed on the vehicle terminal when the screen resolution of the vehicle terminal changes, and then displaying it on the vehicle terminal.

[0039] Optionally, in some embodiments, before displaying the first image, the method further includes: receiving a display instruction from a user; and allowing the vehicle terminal to display the image based on the display instruction.

[0040] Understandably, users can set whether to display the first image on the vehicle terminal. If a user issues a command to display the first image, the vehicle terminal will allow the display of the first image based on the command.

[0041] Furthermore, in some embodiments, after obtaining a first image that can be displayed on the vehicle terminal based on the encapsulation function and the drawn image, the method further includes: detecting whether the screen resolution of the vehicle terminal has changed; if a change in screen resolution is detected, obtaining a new screen resolution of the vehicle terminal; and obtaining a second image that can be displayed on the vehicle terminal based on the new screen resolution and the resolution of the drawn image.

[0042] Specifically, in this embodiment, JavaScript is used to monitor the vehicle terminal screen resolution in real time to detect whether the vehicle terminal screen resolution changes. If the vehicle terminal screen resolution changes, the target conversion ratio is recalculated and the canvas function is executed again to obtain a second image that can be displayed on the vehicle terminal.

[0043] To enable those skilled in the art to further understand the adaptive method for rendering images on a vehicle according to the embodiments of this application, the following detailed description is provided in conjunction with specific embodiments, such as... Figure 2 As shown.

[0044] In step S201, the screen resolution width of the vehicle terminal is obtained.

[0045] In step S202, the target conversion ratio S is calculated based on the resolution and width of the drawn image.

[0046] In step S203, the dimensions of all layers of the drawn image are multiplied by S.

[0047] In step S204, the encapsulation function f is obtained.

[0048] In step S205, the encapsulation function f is executed.

[0049] In step S206, it is determined whether the resolution of the vehicle terminal screen has changed. If it has changed, step S201 is executed again.

[0050] The adaptive method for drawing images on a vehicle, as proposed in this application, obtains the screen resolution of the vehicle terminal and the resolution of the drawn image. A target conversion ratio is calculated based on the screen resolution and the target conversion ratio. An encapsulation function is generated based on all layers of the drawn image and the target conversion ratio. When the screen resolution meets preset adaptive conditions, a first image that can be displayed on the vehicle terminal is obtained based on the encapsulation function and the drawn image. This solves the problem of multi-platform adaptation of canvas graphics and achieves adaptive canvas graphics.

[0051] Next, referring to the accompanying drawings, we describe the adaptive device for drawing images on a vehicle according to an embodiment of this application.

[0052] Figure 3 This is a block diagram of an adaptive device on a vehicle, representing a drawing of an embodiment of this application.

[0053] like Figure 3 As shown, the adaptive device 10 for drawing images on a vehicle includes: an acquisition module 100, a generation module 200, and a display module 300.

[0054] The acquisition module 100 is used to acquire the screen resolution of the vehicle terminal and the resolution of the drawn image; the generation module 200 is used to calculate the target conversion ratio based on the screen resolution and the target conversion ratio, and generate an encapsulation function based on all layers of the drawn image and the target conversion ratio; the display module 300 is used to obtain a first image that can be displayed on the vehicle terminal based on the encapsulation function and the drawn image, provided that the screen resolution meets the preset adaptive conditions.

[0055] Optionally, in some embodiments, the encapsulation function is a canvas function, and the generation module 200 is further used to: multiply the size of all layers of the drawn image by the target transformation ratio to obtain the canvas function.

[0056] Optionally, in some embodiments, the generation module 200 is further configured to: obtain the target conversion ratio based on the ratio between the screen resolution of the vehicle terminal and the resolution of the drawn image.

[0057] Optionally, in some embodiments, after obtaining a first image that can be displayed on the vehicle terminal based on the encapsulation function and the drawn image, the display module 300 is further configured to: detect whether the screen resolution of the vehicle terminal has changed; if a change in screen resolution is detected, re-acquire the new screen resolution of the vehicle terminal; and re-acquire a second image that can be displayed on the vehicle terminal based on the new screen resolution and the resolution of the drawn image.

[0058] Optionally, in some embodiments, the adaptive device 10 for drawing images on a vehicle described above further includes: displaying a first image on a vehicle terminal.

[0059] Optionally, in some embodiments, before displaying the first image, the method further includes: receiving a display instruction from a user; and allowing the vehicle terminal to display the image based on the display instruction.

[0060] It should be noted that the foregoing explanation of the adaptive method embodiment for drawing images on a vehicle also applies to the adaptive device for drawing images on a vehicle in this embodiment, and will not be repeated here.

[0061] The adaptive device for drawing images on a vehicle according to the embodiments of this application obtains the screen resolution of the vehicle terminal and the resolution of the drawn image, calculates the target conversion ratio based on the screen resolution and the target conversion ratio, and generates an encapsulation function based on all layers of the drawn image and the target conversion ratio. When the screen resolution meets preset adaptive conditions, a first image that can be displayed on the vehicle terminal is obtained based on the encapsulation function and the drawn image. This solves the problem of multi-terminal adaptation of canvas graphics and achieves canvas graphics self-adaptation.

[0062] Figure 4 A schematic diagram of the structure of an electronic device provided in an embodiment of this application. The electronic device may include:

[0063] The memory 401, the processor 402, and the computer program stored on the memory 401 and capable of running on the processor 402.

[0064] When processor 402 executes the program, it implements the adaptive method for drawing images on vehicles provided in the above embodiments.

[0065] Furthermore, electronic devices also include:

[0066] Communication interface 403 is used for communication between memory 401 and processor 402.

[0067] The memory 401 is used to store computer programs that can run on the processor 402.

[0068] The memory 401 may include high-speed RAM memory, and may also include non-volatile memory, such as at least one disk storage device.

[0069] If the memory 401, processor 402, and communication interface 403 are implemented independently, then the communication interface 403, memory 401, and processor 402 can be interconnected via a bus to complete communication between them. The bus can be an Industry Standard Architecture (ISA) bus, a Peripheral Component Interconnect (PCI) bus, or an Extended Industry Standard Architecture (EISA) bus, etc. Buses can be divided into address buses, data buses, control buses, etc. For ease of representation, Figure 4 The bus is represented by a single thick line, but this does not mean that there is only one bus or one type of bus.

[0070] Optionally, in a specific implementation, if the memory 401, processor 402, and communication interface 403 are integrated on a single chip, then the memory 401, processor 402, and communication interface 403 can communicate with each other through an internal interface.

[0071] Processor 402 may be a central processing unit (CPU), an application specific integrated circuit (ASIC), or one or more integrated circuits configured to implement the embodiments of this application.

[0072] This application also provides a computer-readable storage medium storing a computer program that, when executed by a processor, implements the above-described adaptive method for drawing images on a vehicle.

[0073] In the description of this specification, the references to terms such as "one embodiment," "some embodiments," "example," "specific example," or "some examples," etc., indicate that a specific feature, structure, material, or characteristic described in connection with that embodiment or example is included in at least one embodiment or example of this application. In this specification, the illustrative expressions of the above terms do not necessarily refer to the same embodiment or example. Furthermore, the specific features, structures, materials, or characteristics described may be combined in any suitable manner in one or more embodiments or examples. Moreover, without contradiction, those skilled in the art can combine and integrate the different embodiments or examples described in this specification, as well as the features of different embodiments or examples.

[0074] Furthermore, the terms "first" and "second" are used for descriptive purposes only and should not be construed as indicating or implying relative importance or implicitly specifying the number of technical features indicated. Thus, a feature defined as "first" or "second" may explicitly or implicitly include at least one of that feature. In the description of this application, "N" means at least two, such as two, three, etc., unless otherwise explicitly specified.

[0075] Any process or method described in the flowchart or otherwise herein can be understood as representing a module, segment, or portion of code comprising one or more N executable instructions for implementing custom logic functions or processes, and the scope of the preferred embodiments of this application includes additional implementations in which functions may be performed not in the order shown or discussed, including substantially simultaneously or in reverse order depending on the functions involved, as should be understood by those skilled in the art to which embodiments of this application pertain.

[0076] The logic and / or steps represented in the flowchart or otherwise described herein, for example, can be considered as a sequenced list of executable instructions for implementing logical functions, and can be embodied in any computer-readable medium for use by, or in conjunction with, an instruction execution system, apparatus, or device (such as a computer-based system, a processor-included system, or other system that can fetch and execute instructions from, an instruction execution system, apparatus, or device). For the purposes of this specification, "computer-readable medium" can be any means that can contain, store, communicate, propagate, or transmit programs for use by, or in conjunction with, an instruction execution system, apparatus, or device. More specific examples (a non-exhaustive list) of computer-readable media include: an electrical connection having one or more wires (electronic device), a portable computer disk drive (magnetic device), random access memory (RAM), read-only memory (ROM), erasable and editable read-only memory (EPROM or flash memory), fiber optic devices, and portable optical disc read-only memory (CDROM). Alternatively, the computer-readable medium may be paper or other suitable media on which the program can be printed, since the program can be obtained electronically, for example, by optically scanning the paper or other medium, followed by editing, interpreting, or otherwise processing as necessary, and then stored in a computer memory.

[0077] It should be understood that the various parts of this application can be implemented using hardware, software, firmware, or a combination thereof. In the above embodiments, the N steps or methods can be implemented using software or firmware stored in memory and executed by a suitable instruction execution system. For example, if implemented in hardware as in another embodiment, it can be implemented using any one or a combination of the following techniques known in the art: discrete logic circuits having logic gates for implementing logical functions on data signals, application-specific integrated circuits (ASICs) having suitable combinational logic gates, programmable gate arrays (PGAs), field-programmable gate arrays (FPGAs), etc.

[0078] Those skilled in the art will understand that all or part of the steps of the methods described in the above embodiments can be implemented by a program instructing related hardware. The program can be stored in a computer-readable storage medium, and when executed, it includes one or a combination of the steps of the method embodiments.

[0079] Furthermore, the functional units in the various embodiments of this application can be integrated into a processing module, or each unit can exist physically separately, or two or more units can be integrated into a module. The integrated module can be implemented in hardware or as a software functional module. If the integrated module is implemented as a software functional module and sold or used as an independent product, it can also be stored in a computer-readable storage medium.

[0080] The storage medium mentioned above can be a read-only memory, a disk, or an optical disk, etc. Although embodiments of this application have been shown and described above, it is understood that the above embodiments are exemplary and should not be construed as limiting this application. Those skilled in the art can make changes, modifications, substitutions, and variations to the above embodiments within the scope of this application.

Claims

1. An adaptive method for rendering images on a vehicle, characterized in that, Includes the following steps: Obtain the screen resolution of the vehicle terminal and the resolution of the image being drawn; Calculate the target conversion ratio based on the screen resolution and the resolution, and generate a wrapper function based on all layers of the drawn image and the target conversion ratio; When the screen resolution meets the preset adaptive conditions, a first image that can be displayed on the vehicle terminal is obtained based on the encapsulation function and the drawn image. The encapsulation function is a canvas function, wherein generating the encapsulation function based on all layers of the drawn image and the target conversion ratio includes: multiplying the size of all layers of the drawn image by the target conversion ratio to obtain the canvas function; The step of calculating the target conversion ratio based on the screen resolution and the resolution includes: obtaining the target conversion ratio based on the ratio between the screen resolution of the vehicle terminal and the resolution of the drawn image.

2. The method according to claim 1, characterized in that, After obtaining the first image that can be displayed on the vehicle terminal based on the encapsulation function and the drawn image, the method further includes: Detect whether the screen resolution of the vehicle terminal has changed; If the screen resolution change is detected, the new screen resolution of the vehicle terminal is reacquired. The second image that can be displayed on the vehicle terminal is obtained again based on the new screen resolution and the resolution of the drawn image.

3. The method according to claim 1, characterized in that, Also includes: The first image is displayed on the vehicle terminal.

4. The method according to claim 1, characterized in that, Before displaying the first image, the following is also included: Receive display instructions from the user; The vehicle terminal is allowed to display information based on the display command.

5. An adaptive device for plotting images on a vehicle, characterized in that, include: The acquisition module is used to acquire the screen resolution of the vehicle terminal and the resolution of the image being drawn. A generation module is used to calculate the target conversion ratio based on the screen resolution and the resolution, and to generate a wrapper function based on all layers of the drawn image and the target conversion ratio; The display module is used to obtain a first image that can be displayed on the vehicle terminal based on the encapsulation function and the drawn image, provided that the screen resolution meets the preset adaptive conditions. The encapsulated function is a canvas function, and the generation module is further configured to: multiply the dimensions of all layers of the drawn image by the target conversion ratio to obtain the canvas function; The generation module is further configured to: obtain the target conversion ratio based on the ratio between the screen resolution of the vehicle terminal and the resolution of the drawn image.

6. An electronic device, characterized in that, Including memory and processor; The processor reads executable program code stored in the memory to run a program corresponding to the executable program code, so as to implement the adaptive method for drawing images on a vehicle as described in any one of claims 1-4.

7. A computer-readable storage medium storing a computer program, characterized in that, When executed by the processor, the program implements the adaptive method for drawing images on a vehicle as described in any one of claims 1-4.

Images