Vehicle model image drawing method, device and storage medium based on vehicle status

Abstract

The present application provides a method, device and storage medium for drawing a car model image based on the vehicle state. The method includes: obtaining vehicle state data from a server, wherein the vehicle state data includes state information of each vehicle part; setting a drawing area according to a predetermined drawing requirement; calling a system function to create a drawing context according to the drawing area, wherein the drawing context is used to return a car model image; according to the vehicle state data, taking out the corresponding part images from a pre-stored cut-image set in sequence, and drawing the part images in sequence in the drawing context in a predetermined drawing order to generate a car model image; loading the generated car model image into an image display control for display, wherein the properties of the image display control are set to scale proportionally. The present application simplifies the drawing process, reduces computational complexity, and can more efficiently replace local images in different states, thereby improving the accuracy of vehicle visualization and user experience.

Description

Technical Field

[0001] The present application relates to the field of new energy vehicle technology, and in particular to a method, device and storage medium for drawing a vehicle model image based on a vehicle state. Background Art

[0002] In the visualization of cars, it is often necessary to update the status diagrams of different parts of the car in real time according to user operations (such as opening and closing doors, etc.). To achieve this effect, the traditional technical method is to cut the overall image of the car into multiple small images and splice these small images according to different states to display different car states.

[0003] In the prior art, a solution of partial cutting and then splicing is adopted. The specific implementation of this technical solution is as follows: First, the image of the whole vehicle is cut into multiple small images. Each small image represents a part of the car, such as a window, a door, a front hood, etc. Each small image has its corresponding coordinates and size. When showing different states of the car (such as opening and closing the door), it is necessary to replace the corresponding small image according to different states.

[0004] However, this partial image cutting and stitching solution still has the following problems: Due to the different sizes of mobile devices, it is necessary to formulate and design the image scaling ratio for different sizes. This means that each device needs to be uniquely adapted, which increases the complexity of development and maintenance. The coordinates and size of each small image need to be recalculated, and must be accurately matched when stitching, otherwise it is easy to make mistakes. If you are not careful, it will cause image stitching errors, affecting the user experience. In different states (such as opening and closing the car door), the corresponding partial images need to be replaced. In order to ensure the effect, the cutting of these partial images must be very precise. Any deviation will lead to inconsistent image display, which increases the difficulty of implementation. Summary of the invention

[0005] In view of this, the present application provides a method, device and storage medium for drawing a vehicle model image based on the vehicle state, so as to solve the problems existing in the prior art such as complex implementation process, high difficulty in coordinate and layout calculation, and difficulty in replacing local images in different states.

[0006] In a first aspect of the present application, a method for drawing a car model image based on a vehicle state is provided, comprising: obtaining vehicle state data from a server, wherein the vehicle state data includes state information of each vehicle part; setting a drawing area according to a predetermined drawing requirement, wherein the size of the drawing area is consistent with the size of an actual display area; calling a system function to create a drawing context according to the drawing area, wherein the drawing context is used to return a car model image; according to the vehicle state data, taking out corresponding part images from a pre-stored cut-image set in sequence, and drawing the part images in sequence in the drawing context in a predetermined drawing order to generate a car model image; loading the generated car model image into an image display control for display, wherein the properties of the image display control are set to be scaled proportionally.

[0007] In a second aspect of the present application, a vehicle model image drawing device based on vehicle status is provided, comprising: an acquisition module, configured to acquire vehicle status data from a server, wherein the vehicle status data includes status information of each vehicle part; a setting module, configured to set a drawing area according to a predetermined drawing requirement, wherein the size of the drawing area is consistent with the size of the actual display area; a creation module, configured to call a system function to create a drawing context according to the drawing area, wherein the drawing context is used to return a vehicle model image; a drawing module, configured to sequentially take out corresponding part images from a pre-stored cutting set according to the vehicle status data, and sequentially draw the part images in the drawing context according to a predetermined drawing order to generate a vehicle model image; a loading module, configured to load the generated vehicle model image into an image display control for display, wherein the property of the image display control is set to be scaled proportionally.

[0008] According to a third aspect of the present application, an electronic device is provided, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements the steps of the above method when executing the computer program.

[0009] According to a fourth aspect of the present application, a computer-readable storage medium is provided, wherein the computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the steps of the above method are implemented.

[0010] At least one of the above technical solutions adopted in this application can achieve the following beneficial effects:

[0011] By obtaining vehicle status data from a server, wherein the vehicle status data includes status information of each vehicle part; setting a drawing area according to a predetermined drawing requirement, wherein the size of the drawing area is consistent with the size of the actual display area; calling a system function to create a drawing context according to the drawing area, wherein the drawing context is used to return a vehicle model image; according to the vehicle status data, taking out corresponding part images from a pre-stored cut-image set in sequence, and drawing the part images in sequence in the drawing context in a predetermined drawing order to generate a vehicle model image; loading the generated vehicle model image into an image display control for display, wherein the properties of the image display control are set to scale proportionally. This application simplifies the drawing process, reduces computational complexity, and can more efficiently replace local images in different states, thereby improving the accuracy of vehicle visualization and user experience. BRIEF DESCRIPTION OF THE DRAWINGS

[0012] In order to more clearly illustrate the technical solutions in the embodiments of the present application, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative work.

[0013] Figure 1 It is a flow chart of a method for drawing a vehicle model image based on vehicle status provided in an embodiment of the present application;

[0014] Figure 2 is a schematic diagram of a whole vehicle image after removing the vehicle doors in an actual scenario provided by an embodiment of the present application;

[0015] Figure 3 is a schematic diagram of a left front door image in an actual scenario provided by an embodiment of the present application;

[0016] Figure 4 is a schematic diagram of a car model image generated in an actual scene provided in an embodiment of the present application;

[0017] Figure 5 It is a structural schematic diagram of a vehicle model image drawing device based on vehicle status provided in an embodiment of the present application;

[0018] Figure 6 It is a schematic diagram of the structure of an electronic device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0019] In the following description, specific details such as specific system structures, technologies, etc. are provided for the purpose of illustration rather than limitation, so as to provide a thorough understanding of the embodiments of the present application. However, it should be clear to those skilled in the art that the present application may also be implemented in other embodiments without these specific details. In other cases, detailed descriptions of well-known systems, devices, circuits, and methods are omitted to prevent unnecessary details from obstructing the description of the present application.

[0020] In the visualization of cars, it is often necessary to update the status diagrams of different parts of the car in real time according to user operations (such as opening and closing doors, etc.). To achieve this effect, the traditional technical method is to cut the overall image of the car into multiple small images and splice these small images according to different states to display different car states.

[0021] In the prior art, a solution of partial cutting and then splicing is adopted. The specific implementation process of this technical solution is as follows: First, the image of the whole vehicle is cut into multiple small images. Each small image represents a part of the car, such as a window, a door, a front hood, etc. Each small image has its corresponding coordinates and size. For example, the coordinates of the front hood image start from (0,0) and the size is 480×390 pixels. When showing different states of the car (such as opening and closing the door), it is necessary to replace the corresponding small images according to different states. For example, when the door is closed, the small image of the closed state is used; when the door is open, the small image of the open state is used.

[0022] However, this local cutting and splicing solution still has the following problems:

[0023] 1. The implementation process is complex: Since the sizes of mobile devices vary, it is necessary to formulate and design the scaling ratio of the graphics for different sizes. This means that each device needs to be uniquely adapted, which increases the complexity of development and maintenance.

[0024] 2. Complicated calculation of coordinates and layout: The coordinates and size of each small image need to be recalculated and must be accurately matched when stitching, otherwise it is easy to make mistakes. If you are not careful, it will lead to image stitching errors and affect the user experience.

[0025] 3. Difficulty in replacing state images: In different states (such as opening and closing the door), the corresponding partial images need to be replaced. In order to ensure the effect, the cutting of these partial images must be very precise. Any slight deviation will lead to inconsistent image display, which increases the difficulty of implementation.

[0026] Although the existing local cutting and stitching technology can realize the visualization of different states of the car, it needs to be adapted to different devices and needs to accurately replace the local image when the state is switched, which makes the implementation process very complicated and prone to errors. Therefore, it is necessary to propose a simpler and more accurate technical solution to solve these problems.

[0027] In view of the problems existing in the prior art, the present application proposes a method for drawing a car model image based on the vehicle status, which can efficiently and accurately display the different states of the car. First, the server returns the data of all vehicle statuses according to business requirements, which include vehicle color, model and status information of each vehicle component. The client sets the drawing area according to the predetermined drawing requirements to ensure that the size of the area is consistent with the size of the actual display area. Then, the client calls the system function to create a drawing context for generating a car model image. The drawing context acts as a canvas, and generates a complete car model image by taking out the corresponding part images from the pre-stored image suite in sequence, and drawing these part images in the drawing context in sequence according to the predetermined drawing order.

[0028] In the specific implementation process, the technical solution of the present application includes a series of optimization steps to improve efficiency and accuracy. First, the client determines whether it is the first time to draw the car model image. If it is the first time to draw, the car model image is directly generated according to the vehicle status data and assigned to the image display control on the page. If it is not the first time to draw, the vehicle status data currently returned by the server is compared with the previous data. When the comparison results are consistent, the drawing is stopped; when the comparison results are inconsistent, the car model image is regenerated and the image display control is updated. In order to achieve efficient image management, the method adopts a cache mechanism. When taking out a part image from a pre-stored cutting set, first use the set cache key to check whether the corresponding image exists in the cache. If there is no such image in the cache, load the entire set of images from the hard disk into the memory, and then obtain the specific part image according to the part cache key. When subsequently acquiring, read the image data directly from the cache to reduce the frequency of hard disk access and improve performance.

[0029] In terms of image cutting, all part images are cut out from the whole vehicle image and kept at their original coordinates on the whole vehicle image. According to business needs, the system pre-marks the areas that need to be cut, uses code to hide the parts outside each area, and obtains the required part images. These part images are stored in sets, each set contains the status of all parts, and can be distinguished by color or vehicle model. The client stores at least one set of cut images as a backup, and all cut image sets are stored in the server. The client downloads the corresponding set of images from the server when needed and caches them locally.

[0030] In the display phase, the generated car model image is loaded into the image display control, and the control property is set to scaleAspectFit to ensure that the image is scaled proportionally and fully displayed in the control. The size of the control is freely laid out according to business needs and will not exceed the control boundary. Since the image is a vector image generated by drawing the context, it will not be distorted or blurred during the scaling process, ensuring consistent display effects on different devices and screen sizes. Through the above method, the present application provides a technical solution that simplifies the implementation process, improves display accuracy and user experience.

[0031] The contents of the technical solution of the present application are described in detail below with reference to the accompanying drawings and specific embodiments.

[0032] Figure 1 It is a flow chart of a method for drawing a vehicle model image based on vehicle status provided in an embodiment of the present application. Figure 1 The vehicle model image drawing method based on vehicle status can be executed by a vehicle visualization display program. Figure 1 As shown, the vehicle model image drawing method based on the vehicle state may specifically include:

[0033] S101, obtaining vehicle status data from a server, wherein the vehicle status data includes status information of each vehicle part;

[0034] S102, setting a drawing area according to a predetermined drawing requirement, wherein the size of the drawing area is consistent with the size of the actual display area;

[0035] S103, calling a system function to create a drawing context according to the drawing area, wherein the drawing context is used to return the car model image;

[0036] S104, according to the vehicle state data, taking out corresponding part images from the pre-stored cut-image set in sequence, and drawing the part images in sequence in the drawing context in a predetermined drawing order, so as to generate a vehicle model image;

[0037] S105, loading the generated car model image into an image display control for display, wherein the property of the image display control is set to scale in proportion.

[0038] In some embodiments, after obtaining the vehicle status data from the server, the method further includes:

[0039] Determine whether it is the first time to draw the car model image. If it is the first time to draw, call the car model image drawing method to generate the car model image according to the vehicle status data, and assign the car model image to the image display control on the client page;

[0040] When it is determined that it is not the first drawing, the vehicle status data currently returned by the server is compared with the vehicle status data returned last time;

[0041] Among them, when the comparison result is consistent, the drawing of the car model image is stopped. When the comparison result is inconsistent, the car model image drawing method is called according to the vehicle status data to generate the car model image, and the car model image is assigned to the image display control on the client page.

[0042] Specifically, first, the system determines whether it is the first time to draw the car model image. If it is the first time to draw, the car model image drawing method is called to generate the car model image according to the obtained vehicle status data, and the car model image is assigned to the image display control on the client page. For example, the system will directly "draw the car model" according to the vehicle status data, obtain a 2D car model image, and load the image into the image control on the page, and then the function returns without performing other operations.

[0043] Furthermore, if it is determined that it is not the first drawing, the system needs to compare the vehicle status data currently returned by the server with the vehicle status data returned last time. The specific comparison process includes the following aspects:

[0044] Compare the values ​​of each state to see if they are consistent: Check the status information of each vehicle component, such as the switch status of doors and windows, to determine whether these states are consistent with the previous data.

[0045] Compare the color of the vehicle: Check whether the color of the vehicle is consistent with the previous data.

[0046] Compare the vehicle model: Check whether the vehicle model is consistent with the previous data.

[0047] Only when the above three are consistent, the current state data is considered consistent with the previous data. If the comparison results are consistent, the system stops drawing the car model image, the function returns, and no operation is performed. This method reduces the number of calls to the "method for drawing car models", thereby maximizing efficiency and performance, because the most performance-consuming operation in the entire solution is drawing the car model image.

[0048] Furthermore, if the comparison result is inconsistent, the system will re-call the car model image drawing method to generate a new car model image according to the vehicle status data, and assign the new car model image to the image display control on the client page. Specifically, the system will re-"draw the car model" according to the new vehicle status data to obtain a new 2D car model image, and load the image into the image control on the page, and then the function returns.

[0049] Through the above judgment and comparison process, unnecessary redrawing operations can be significantly reduced, thereby improving the performance and efficiency of the client. When the vehicle status data has not changed, no operation is performed; the vehicle model is redrawn only when the data changes, ensuring that the displayed vehicle status is always synchronized with the server. This not only optimizes the use of system resources, but also improves the user experience.

[0050] In some embodiments, before calling a system function to create a drawing context according to the drawing area, the method further includes:

[0051] Cut all part images from the whole vehicle image and keep the original coordinate positions of the part images on the whole vehicle image;

[0052] According to the predetermined vehicle type, the cut parts images are divided into different cut image sets, wherein each cut image set contains the states of all parts;

[0053] storing at least one image cutting set in the client and storing all image cutting sets in the server;

[0054] In response to a request to obtain a picture cutting set in the server, the picture cutting set in the server is downloaded to the client, and the picture cutting set downloaded for the first time is stored in a cache of the client.

[0055] Specifically, all part images are first cut out from the whole vehicle image, and the original coordinate positions of the part images on the whole vehicle image are maintained. Specifically, the image cutting method is not the traditional local image cutting, but all part images are cut out from a whole vehicle image. During the cutting process, the coordinates of the part images maintain their original positions on the whole vehicle image to ensure that the part images can be accurately matched during subsequent splicing.

[0056] Then, according to the predetermined vehicle type, the cut-out part images are divided into different cut-out sets. Each cut-out set contains the states of all parts. Cut-out sets can be distinguished by color, for example, the cut-outs of red cars are one set, and the cut-outs of blue cars are another set; they can also be distinguished by different car models, for example, the cut-outs of car model A are one set, and the cut-outs of car model B are another set.

[0057] Furthermore, in order to improve the efficiency and performance of the system, the client should store at least one set of cutouts locally as a backup. All the sets of cutouts are stored in the server. The client does not store all the sets of cutouts in advance, because this will make the client package too large and unreasonable. Most users will only buy one or two cars and will not own all models and colors of cars, so storing all the sets of cutouts in the client is a waste of resources.

[0058] In actual applications, the server will provide the required set of car images for the client to download according to the current user's needs. After the first download, the client will store the downloaded cut-out set in the local cache. The specific cache method can include but is not limited to sandbox, memory, hard disk, etc. The stored cut-out set is not permanently saved, and the client has its own cache cleaning logic.

[0059] In an example, the logic for clearing the cache may include the following two methods:

[0060] 1) Scheduled deletion: Set a scheduled task to regularly clean up the cache, free up storage space, and ensure that the data in the cache is always up to date.

[0061] 2) Compare the vehicle images sent by the server: The server can provide an update flag to mark whether the current set of images has been updated. This method is faster to update, and the client only needs to check the flag to decide whether to clear the cache and download the latest set of images. Of course, you can also compare the image data directly, but this method is slower and not recommended.

[0062] Once an update is found, the client will clear the currently stored vehicle image cache, download the latest image, and update the corresponding cache key and other subsequent operations to ensure that the client always displays the latest vehicle status.

[0063] Through the above method of this embodiment, this embodiment provides an efficient vehicle parts image cutting and storage method, which can update the vehicle model image in real time according to the change of the vehicle state, while avoiding resource waste and repeated downloading, and improving the overall performance of the system and user experience. Through the above cache strategy, the client can efficiently manage the cutting image, ensure the rapid display of the vehicle model in different states, and save storage space and improve performance.

[0064] In some embodiments, all the part images are cut out from the whole vehicle image, including:

[0065] Acquire the whole vehicle image and determine the area to be cut, wherein the area includes the replacement area corresponding to the part whose state can change;

[0066] An area is marked on the whole vehicle image, and the part of the whole vehicle image other than the marked area is hidden, or the part other than the marked area is set to be transparent, so as to retain the part part in the whole vehicle image and obtain the part image.

[0067] Specifically, firstly, the whole vehicle image is acquired and the areas to be cut are determined, including replacement areas corresponding to parts whose states can change, such as areas of vehicle doors, windows, sunroofs and other parts.

[0068] Furthermore, a complete image of the entire vehicle is obtained, which shows all the parts of the vehicle in detail. The areas that need to be cut are determined based on business needs and the requirements of vehicle status changes. The areas that need to be cut are replacement areas corresponding to parts whose status may change, such as door switches, window switches, sunroof switches, etc.

[0069] Furthermore, the above-determined area is marked on the whole vehicle image. The image can be processed using image processing software or a program. The part of the whole vehicle image other than the marked area is hidden, or the part other than the marked area is set to be transparent to retain the part of the part in the marked area. After such processing, a separate image of each part can be obtained.

[0070] In practical applications, the image cutting method of this embodiment can be done manually or automatically through a computer program. Since this image cutting method is very simple to implement with a program, it is only necessary to determine the area to be cut (i.e., the area to be replaced) according to the predetermined business requirements of the whole vehicle image, and then use the code to hide the part outside each marked area to obtain the part image. For example, it can be achieved by setting the non-marked area to be transparent or directly hiding it.

[0071] For the sake of illustration, suppose there are 3 states, each state includes two conditions: on and off. Then 3*2+1 images need to be generated, one of which is the base image (the whole vehicle background image without any parts). In this way, each part image maintains its original coordinates and position in the whole vehicle image, without considering complex coordinates, positions, scaling or replacing partial images.

[0072] For example, Figure 2 and Figure 3 The image cutting method of this embodiment is described by taking the vehicle and parts images shown in the figure as an example. Figure 2 is a schematic diagram of a whole vehicle image after removing the vehicle doors in an actual scenario provided by an embodiment of the present application, Figure 3 This is a schematic diagram of the left front door image in the actual scene provided by the embodiment of the present application. Assuming there is a car, it is necessary to display the switch status of the door and window. Then the specific process of cutting the image is as follows:

[0073] First, obtain the whole vehicle image and determine the door area. Mark the door area on the image, hide or set the part other than the door to be transparent, and obtain the door image.

[0074] Secondly, for the door switch state, images of the door open and closed are generated respectively. Similarly, the area of ​​the window is determined.

[0075] Then, the window area is marked on the image, and the part outside the window is hidden or set to be transparent to obtain the window image. For the window switch state, the window open and closed images are generated respectively.

[0076] In addition, the whole vehicle image is obtained, and all parts are partially hidden or set to be transparent to obtain a base image containing only the vehicle background.

[0077] Finally, the processed part images are overlapped to synthesize a complete vehicle image. This method simplifies the implementation process, does not need to consider the coordinates and positions of each part image, and does not require complex scaling or replacement operations.

[0078] The image cutting strategy of the present embodiment described above simplifies the image processing process, and there is no need to consider complex issues such as coordinates, position, scaling and replacement of local images, thereby making the entire process simpler and more efficient, and suitable for real-time update display of various vehicle states.

[0079] In some embodiments, the corresponding part images are sequentially retrieved from the pre-stored cutting set, including:

[0080] When the cutting set is first obtained, the cutting set is loaded from the hard disk into the memory, and the required part image is obtained from the memory according to the part cache identifier corresponding to the part;

[0081] When the cutting set is subsequently obtained, the set cache identifier corresponding to the cutting set and the part cache identifier corresponding to the part are used to read the required part image from the cache.

[0082] Specifically, the size of the drawing area in this embodiment can be kept consistent with the size of the actual drawing area as much as possible, and does not need to be precise. Figure 4 As shown, Figure 4 This is a schematic diagram of a car model image generated in an actual scene provided by an embodiment of the present application. Figure 4 In the car model design shown, the area of ​​the 2D car model is approximately the same width as the screen, and the height is the width multiplied by the aspect ratio of a cut image.

[0083] Furthermore, according to the size of the "drawing area", the system function is called to create a drawing context. The return value of the context is the image we need. The specific drawing process is written in the context callback function. The drawing process may include the following:

[0084] First, according to the established order, based on the status data obtained by the client from the server, "the corresponding part image is taken from the set of images" to draw each vehicle part image.

[0085] Secondly, the established order should be paid attention to. For example, first draw the base of the car, then the left rear door + window, then the left front door + window to prevent the left rear from covering the left front. The order of the right side and the back does not matter. For another example, except for drawing the base of the car first, the order of the rest does not matter.

[0086] In actual application, it is assumed that the order is to draw the base map first, then draw the backup door, then draw the left rear door + left rear window, then draw the left front door + left front window, then draw the right front door + right front window, then draw the right rear door + right rear window... The specific method of drawing is to call the system function open func draw(in rect: CGRect), and the above system function parameter passes in the rectangle corresponding to the "drawing area".

[0087] It should be noted that when the image set is first obtained, the system first loads the entire image set from the hard disk (such as the sandbox storage) into the memory. Since reading data from the hard disk is relatively slow, the entire set of images needs to be pre-loaded into the memory when loading for the first time to increase the speed of subsequent access.

[0088] Furthermore, each part image has its corresponding part cache identifier, for example, the cache identifier of the left front window is "left front window" and the cache identifier of the right rear door is "right rear door". According to these part cache identifiers, the required specific part image is obtained from the memory to avoid reading from the hard disk every time.

[0089] Furthermore, in the subsequent process of obtaining the cut-out set, the system uses the set cache identifier corresponding to the cut-out set and the part cache identifier corresponding to the part to directly read the required part image from the cache. The set cache key uniquely identifies a set of images, such as a combination of color and vehicle type (such as red vehicle type A). The part cache key uniquely identifies a specific part, such as the left front window, right rear door, etc.

[0090] Furthermore, this embodiment also provides a read cache mechanism: first, use the set of images cache key to check whether the set of images exists in the cache. If the set of images does not exist in the cache, load the entire set of images from the hard disk into the memory. Then, according to the part cache key of the specific part, obtain the required part image from the memory. If the set of images already exists in the cache, directly use the set of images cache key and the part cache key to read the corresponding part image from the cache, avoiding repeated access to the hard disk and improving the access speed.

[0091] In the above method, you may encounter abnormal situations such as hard disk access failure or failure to download pictures from the server. To deal with these situations, the system will use the backup vehicle picture pre-stored by the client as a temporary substitute. The specific implementation method is as follows:

[0092] The client pre-stores a set of backup vehicle images, which also have their corresponding cache keys. When hard disk access fails or image download from the server fails, the system will use this set of backup vehicle images as a temporary replacement to ensure the normal display of vehicle images.

[0093] The backup vehicle map can be updated, replaced or cleared at any time. The client has corresponding logic to manage these caches, including regularly deleting old caches and comparing whether the vehicle map sent by the server has been updated.

[0094] The server can provide an update flag to quickly determine whether the cache needs to be updated. If there is an update, the current cache is cleared, the latest set of images is downloaded, and the cache key is updated.

[0095] After the above steps, this embodiment implements a strategy of reading pictures from the cache as much as possible, "using cache technology to reduce the throughput of resources on the hard disk and improve performance"; and, by globally using the drawing context, multiple pictures are placed in the drawing context, and only one picture is generated in the end, achieving the effect of "minimizing layers, making the view simple, and improving performance". Because there is a very likely practice on the market: each picture is directly loaded into the picture control UIImageView, and then the controls are stacked layer by layer according to a predetermined order. This approach can certainly achieve the purpose, but it is obviously not as good as the effect provided by this application, because the more layers there are, the more complex the system's view tree is, and each drawing consumes more resources and performance, while this application obtains a picture, so the layers are greatly reduced, and the effect is obvious.

[0096] Through the method of the above embodiment, the system can efficiently obtain the required part images from the pre-stored cutting set to achieve rapid display of the vehicle status. At the same time, it optimizes performance through the cache mechanism, reduces the frequency of hard disk access, and ensures stable operation even under abnormal circumstances.

[0097] In some embodiments, drawing the part images in sequence in the drawing context according to a predetermined drawing order to generate a vehicle model image includes:

[0098] According to the drawing order corresponding to the part images, the vehicle status data is obtained from the server, and the corresponding part images are taken out from the cutting set;

[0099] According to the drawing order, the predetermined system function is called to draw each part image in the drawing context in sequence;

[0100] Among them, the rectangle corresponding to the drawing area is passed into the system function as a parameter, so that the system function automatically draws the part image in the drawing context.

[0101] Specifically, the vehicle status data is obtained from the server, and the data includes the vehicle color, model, and status information of each component (such as the switch status of doors and windows, etc.). For example, in one example, the vehicle status data shown below can be obtained:

[0102] Vehicle color: red

[0103] Model: SF5

[0104] Left front door: Close

[0105] Left rear door: Close

[0106] Right front door: Close

[0107] Right rear door: open

[0108] Left front window: Close

[0109] Left rear window: Close

[0110] Right front window: Close

[0111] Right rear window: open

[0112] Left headlight: On

[0113] …

[0114] The level of detail of the above vehicle status data is set according to the slice map, so the granularity can be coarse or fine, and the granularity of the slice map is determined by business needs.

[0115] Furthermore, according to the part status in the vehicle status data, the corresponding part image is taken out from the pre-stored cut-image set. The part image is obtained through the part cache key, which uniquely identifies each part image.

[0116] Furthermore, if it is the first acquisition, the cut image set is loaded from the hard disk into the memory, and then the required part image is obtained from the memory according to the part cache key. In subsequent acquisitions, the required part image is directly read from the cache using the set cache key and the part cache key.

[0117] Furthermore, the part image is drawn according to the predetermined drawing order. First, the drawing area is set according to the predetermined drawing requirements to ensure that the size of the drawing area is consistent with the size of the actual display area. Next, the system function is called to create a drawing context as a canvas for drawing the car model image. The parameters of the system function include a rectangle corresponding to the drawing area. Then, according to the vehicle status data and the established drawing order, the corresponding part image is taken out from the cut set. Finally, the predetermined system function open func draw(in rect: CGRect) is called, in which the incoming parameter is the rectangle corresponding to the drawing area, so that the system function automatically draws the part image in the drawing context.

[0118] For example, in one example, the specific drawing process of the car model image of the present application is as follows:

[0119] First, draw the base map of the vehicle, making sure the base map is displayed at the bottom.

[0120] Then, the images of the various parts of the vehicle are drawn in sequence according to the predetermined drawing order. For example, the trunk door is drawn first, then the left rear door and window, then the left front door and window, then the right front door and window, and finally the right rear door and window.

[0121] Next, when drawing each part image, the system function will ensure that the image is accurately drawn at the specified position based on the passed in drawing area rectangle parameters, keeping the relative position and proportion of each part image consistent.

[0122] In the drawing process, the specific drawing operation is implemented by calling the system function open func draw(in rect: CGRect). The input parameter of the system function is the rectangle corresponding to the drawing area. The system function will take out the corresponding part image from the cut-image set according to the vehicle status data, and draw each vehicle part image in sequence according to the established order.

[0123] Through the above method of this embodiment, this embodiment provides an efficient method for drawing a car model image, which can update the car model image in real time according to the change of the vehicle state and ensure the accuracy and consistency of the image. The use of system functions simplifies the drawing process, optimizes the drawing performance, and improves the user experience of vehicle visualization display.

[0124] In some embodiments, the generated car model image is loaded into an image display control for display, wherein the properties of the image display control are set to be scaled proportionally, including:

[0125] Set the content display mode property in the image display control to scale proportionally so that the car model image can adapt to the size of the image display control;

[0126] According to business requirements and design drafts, the position and size of the image display control are laid out, and the automatic constraint layout provided by the system is used to automatically adjust the size of the image display control according to changes in the client page. Among them, the car model image is a vector image generated using the drawing context.

[0127] Specifically, set the content display mode property of the image display control (such as UIImageView) to scale proportionally. Specifically, set the control's property contentMode to scaleAspectFit, which means that the image will be scaled proportionally to fit the size of the image display control and ensure that the image content is fully displayed within the control. This setting ensures that the car model image will not be stretched or deformed, and can be fully displayed in display controls of different sizes.

[0128] Furthermore, the position and size of the image display control are laid out according to business requirements and design drafts. The layout can be adjusted freely, as long as it is roughly appropriate. Since the car model image is a vector image generated using the drawing context, the image will adjust with the size of the control without distortion or blurring. This is because vector images have the characteristic of maintaining high quality while being arbitrarily scaled.

[0129] Furthermore, the system provides the Auto Layout function, which enables the image display control to automatically adjust its size according to the changes of the client page. This automatic constraint layout mechanism ensures that the image display control can adapt to layout changes on different devices and screen sizes, maintaining the integrity and aesthetics of the image display.

[0130] For example, in one example, in iOS development, UIImageView is usually used to carry and display pictures. In a specific embodiment of the present application, the following steps describe in detail how to set and use UIImageView to display a car model image:

[0131] First, create a UIImageView instance: Create a UIImageView instance to display the generated car model image.

[0132] Second, set the contentMode property: Set the contentMode property of UIImageView to scaleAspectFit to scale the image proportionally to ensure that the image is fully displayed in the control.

[0133] Next, layout the UIImageView: layout the position and size of the UIImageView according to business requirements and design drafts. Use Auto Layout to set constraints so that the UIImageView can automatically adjust its size according to the page layout.

[0134] Then, load and display the car model image: assign the generated car model image to the image property of UIImageView to ensure that the image is displayed in the control.

[0135] Through the above method of this embodiment, this embodiment describes in detail how to set the properties and layout of the image display control, so that the generated car model image can be scaled and displayed on different devices and screen sizes to ensure the integrity and clarity of the image. Such settings simplify the use of the control and improve the user experience.

[0136] According to the technical solution provided in the embodiment of the present application, the embodiment of the present application has the following advantages:

[0137] The technical solution of this application cuts the whole vehicle image into multiple part images and keeps the original coordinates and positions of the part images when drawing, eliminating the need for developers to consider complex issues such as coordinates, positions, scaling, and replacement of partial images during the drawing process. The preprocessing and automatic processing of each part image greatly simplifies the workload of development and maintenance, making the operation of using this technical solution to display vehicle status very simple and intuitive.

[0138] The technical solution of this application introduces a cache mechanism, which effectively reduces the frequent access to the hard disk during image processing and display. Specifically, the entire set of images is loaded into the memory when the image is first acquired, and subsequent accesses are directly read from the cache. This cache technology significantly reduces the throughput of resources on the hard disk and greatly improves system performance. The cached image data management and update mechanism ensures the timeliness and accuracy of the displayed content, while avoiding unnecessary repeated loading of data, further optimizing the system response speed.

[0139] The technical solution of this application generates a complete car model image by drawing each part image in the same drawing context in a predetermined order, rather than loading each part image into multiple layer controls separately. This method minimizes the view hierarchy, making the view structure simpler and clearer, reducing the system's overhead in layer management and rendering, and improving overall performance. The single image drawing method avoids the system complexity and resource consumption problems caused by the superposition of multiple layers in traditional methods, ensuring that users can get a consistent and smooth experience on different devices and screen sizes.

[0140] Therefore, in summary, the technical solution of the present application provides an efficient and reliable solution for real-time display of vehicle status by simplifying operations, optimizing performance and simplifying view hierarchy, which significantly improves the maintainability of the system and user experience.

[0141] The following is an embodiment of the device of the present application, which can be used to execute the embodiment of the method of the present application. For details not disclosed in the embodiment of the device of the present application, please refer to the embodiment of the method of the present application.

[0142] Figure 5 FIG. 1 is a schematic diagram of the structure of a vehicle model image drawing device based on vehicle status provided in an embodiment of the present application. Figure 5 As shown, the vehicle model image drawing device based on the vehicle state includes:

[0143] The acquisition module 501 is configured to acquire vehicle status data from a server, wherein the vehicle status data includes status information of each vehicle part;

[0144] A setting module 502 is configured to set a drawing area according to a predetermined drawing requirement, wherein the size of the drawing area is consistent with the size of the actual display area;

[0145] The creation module 503 is configured to call a system function to create a drawing context according to the drawing area, wherein the drawing context is used to return the car model image;

[0146] The drawing module 504 is configured to sequentially retrieve corresponding part images from the pre-stored cut-image set according to the vehicle state data, and sequentially draw the part images in the drawing context according to a predetermined drawing order to generate a vehicle model image;

[0147] The loading module 505 is configured to load the generated car model image into the image display control for display, wherein the property of the image display control is set to scale proportionally.

[0148] In some embodiments, Figure 5 After obtaining the vehicle status data from the server, the judgment module 506 judges whether it is the first time to draw the vehicle model image. When it is judged to be the first time to draw, the vehicle model image drawing method is called according to the vehicle status data to generate the vehicle model image, and the vehicle model image is assigned to the image display control on the client page; when it is judged to be not the first time to draw, the vehicle status data currently returned by the server is compared with the vehicle status data returned last time; when the comparison result is consistent, the drawing of the vehicle model image is stopped, and when the comparison result is inconsistent, the vehicle model image drawing method is called according to the vehicle status data to generate the vehicle model image, and the car model image is assigned to the image display control on the client page.

[0149] In some embodiments, Figure 5The cutting module 507 cuts all the part images from the whole vehicle image and maintains the original coordinate positions of the part images on the whole vehicle image before calling the system function to create a drawing context according to the drawing area; divides the cut part images into different cutting sets according to the predetermined vehicle type, wherein each cutting set contains the status of all parts; stores at least one cutting set in the client, and stores all the cutting sets in the server; in response to a request to obtain the cutting set in the server, downloads the cutting set in the server to the client, and stores the first downloaded cutting set in the cache of the client.

[0150] In some embodiments, Figure 5 The image cutting module 507 obtains the whole vehicle image and determines the area to be cut, wherein the area includes the replacement area corresponding to the part whose state can change; marks the area on the whole vehicle image, and hides the part of the whole vehicle image except the marked area, or sets the part outside the marked area to be transparent to retain the part part in the whole vehicle image, and obtains the part image.

[0151] In some embodiments, Figure 5 When the drawing module 504 obtains the cutting set for the first time, it loads the cutting set from the hard disk into the memory, and obtains the required part image from the memory according to the part cache identifier corresponding to the part; when the cutting set is obtained subsequently, the required part image is read from the cache using the set cache identifier corresponding to the cutting set and the part cache identifier corresponding to the part.

[0152] In some embodiments, Figure 5 The drawing module 504 obtains the vehicle status data from the server according to the drawing order corresponding to the part images, and takes out the corresponding part images from the cutting set; calls the predetermined system function according to the drawing order, and draws each part image in the drawing context in turn; wherein the rectangle corresponding to the drawing area is passed into the system function as a parameter so that the system function automatically draws the part image in the drawing context.

[0153] In some embodiments, Figure 5 The loading module 505 sets the content display mode attribute in the image display control to proportional scaling so that the car model image can adapt to the size of the image display control; the position and size of the image display control are laid out according to business needs and design drafts, and the automatic constraint layout provided by the system is used to automatically adjust the size of the image display control according to changes in the client page, wherein the car model image is a vector image generated using a drawing context.

[0154] It should be understood that the size of the serial numbers of the steps in the above embodiments does not mean the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of the present application.

[0155] Figure 6 Schematic diagram of the structure of the electronic device 6 provided in the embodiment of the present application. Figure 6 As shown, the electronic device 6 of this embodiment includes: a processor 601, a memory 602, and a computer program 603 stored in the memory 602 and executable on the processor 601. When the processor 601 executes the computer program 603, the steps in the above-mentioned various method embodiments are implemented. Alternatively, when the processor 601 executes the computer program 603, the functions of each module / unit in the above-mentioned various device embodiments are implemented.

[0156] Exemplarily, the computer program 603 may be divided into one or more modules / units, which are stored in the memory 602 and executed by the processor 601 to complete the present application. The one or more modules / units may be a series of computer program instruction segments capable of completing specific functions, which are used to describe the execution process of the computer program 603 in the electronic device 6.

[0157] The electronic device 6 may be a desktop computer, a notebook, a PDA, a cloud server, or other electronic device. The electronic device 6 may include, but is not limited to, a processor 601 and a memory 602. Those skilled in the art will appreciate that Figure 6 It is only an example of the electronic device 6 and does not constitute a limitation of the electronic device 6. It may include more or fewer components than shown in the figure, or a combination of certain components, or different components. For example, the electronic device may also include input and output devices, network access devices, buses, etc.

[0158] The processor 601 may be a central processing unit (CPU), or other general-purpose processors, digital signal processors (DSP), application-specific integrated circuits (ASIC), field-programmable gate arrays (FPGA), or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. A general-purpose processor may be a microprocessor or the processor may be any conventional processor, etc.

[0159] The memory 602 may be an internal storage unit of the electronic device 6, for example, a hard disk or memory of the electronic device 6. The memory 602 may also be an external storage device of the electronic device 6, for example, a plug-in hard disk, a smart media card (SMC), a secure digital (SD) card, a flash card, etc. equipped on the electronic device 6. Further, the memory 602 may also include both an internal storage unit and an external storage device of the electronic device 6. The memory 602 is used to store computer programs and other programs and data required by the electronic device. The memory 602 may also be used to temporarily store data that has been output or is to be output.

[0160] The technicians in the relevant field can clearly understand that for the convenience and simplicity of description, only the division of the above-mentioned functional units and modules is used as an example for illustration. In practical applications, the above-mentioned function allocation can be completed by different functional units and modules as needed, that is, the internal structure of the device can be divided into different functional units or modules to complete all or part of the functions described above. The functional units and modules in the embodiment can be integrated in a processing unit, or each unit can exist physically separately, or two or more units can be integrated in one unit. The above-mentioned integrated unit can be implemented in the form of hardware or in the form of software functional units. In addition, the specific names of the functional units and modules are only for the convenience of distinguishing each other, and are not used to limit the scope of protection of this application. The specific working process of the units and modules in the above-mentioned system can refer to the corresponding process in the aforementioned method embodiment, which will not be repeated here.

[0161] In the above embodiments, the description of each embodiment has its own emphasis. For parts that are not described or recorded in detail in a certain embodiment, reference can be made to the relevant descriptions of other embodiments.

[0162] Those of ordinary skill in the art will appreciate that the units and algorithm steps of each example described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, or a combination of computer software and electronic hardware. Whether these functions are performed in hardware or software depends on the specific application and design constraints of the technical solution. Professional and technical personnel can use different methods to implement the described functions for each specific application, but such implementation should not be considered to be beyond the scope of this application.

[0163] In the embodiments provided in the present application, it should be understood that the disclosed devices / computer equipment and methods can be implemented in other ways. For example, the device / computer equipment embodiments described above are only schematic. For example, the division of modules or units is only a logical function division. There may be other division methods in actual implementation. Multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be through some interfaces, indirect coupling or communication connection of devices or units, which can be electrical, mechanical or other forms.

[0164] The units described as separate components may or may not be physically separated, and the components shown as units may or may not be physical units, that is, they may be located in one place or distributed on multiple network units. Some or all of the units may be selected according to actual needs to achieve the purpose of the solution of this embodiment.

[0165] In addition, each functional unit in each embodiment of the present application may be integrated into one processing unit, or each unit may exist physically separately, or two or more units may be integrated into one unit. The above-mentioned integrated unit may be implemented in the form of hardware or in the form of software functional units.

[0166] If the integrated module / unit is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the present application implements all or part of the processes in the above-mentioned embodiment method, and can also be completed by instructing the relevant hardware through a computer program. The computer program can be stored in a computer-readable storage medium, and the computer program can implement the steps of the above-mentioned various method embodiments when executed by the processor. The computer program may include computer program code, which may be in source code form, object code form, executable file or some intermediate form. The computer-readable medium may include: any entity or device capable of carrying computer program code, recording medium, U disk, mobile hard disk, disk, optical disk, computer memory, read-only memory (ROM), random access memory (RAM), electric carrier signal, telecommunication signal and software distribution medium, etc.

[0167] The above embodiments are only used to illustrate the technical solutions of the present application, rather than to limit them. Although the present application has been described in detail with reference to the aforementioned embodiments, those skilled in the art should understand that they can still modify the technical solutions described in the aforementioned embodiments, or make equivalent replacements for some of the technical features therein. These modifications or replacements do not deviate the essence of the corresponding technical solutions from the spirit and scope of the technical solutions of the embodiments of the present application, and should all be included in the protection scope of the present application.

Claims

1. A method for drawing a vehicle model image based on vehicle status, characterized in that: include: Acquire vehicle status data from a server, wherein the vehicle status data includes status information of each vehicle part; Setting a drawing area according to a predetermined drawing requirement, wherein the size of the drawing area is consistent with the size of the actual display area; According to the drawing area, calling a system function to create a drawing context, wherein the drawing context is used to return the car model image; According to the vehicle state data, corresponding part images are sequentially taken out from a pre-stored cut-image set, and the part images are sequentially drawn in the drawing context according to a predetermined drawing order to generate a vehicle model image; Loading the generated car model image into an image display control for display, wherein the property of the image display control is set to be scaled in proportion; The step of sequentially drawing the part images in the drawing context according to a predetermined drawing order to generate a vehicle model image includes: According to the drawing order corresponding to the part images, the vehicle status data is obtained from the server, and the corresponding part images are taken out from the cutting set; According to the drawing order, calling a predetermined system function, and drawing each part image in the drawing context in sequence; wherein the rectangle corresponding to the drawing area is passed into the system function as a parameter so that the system function automatically draws the part image in the drawing context; The step of loading the generated car model image into an image display control for display, wherein the property of the image display control is set to be scaled in proportion, comprises: Setting the content display mode attribute in the image display control to proportional scaling, so that the car model image is adjusted to adapt to the size of the image display control; According to business requirements and design drafts, the position and size of the image display control are laid out, and the automatic constraint layout provided by the system is used to automatically adjust the size of the image display control according to changes in the client page, wherein the car model image is a vector image generated using the drawing context; Before calling a system function to create a drawing context according to the drawing area, the method further includes: Acquire the whole vehicle image and determine the area to be cut, wherein the area includes the replacement area corresponding to the part whose state can change; The area is marked on the whole vehicle image, and the portion of the whole vehicle image other than the marked area is hidden, or the portion other than the marked area is set to be transparent, so as to retain the part portion in the whole vehicle image and obtain the part image.

2. The method according to claim 1, characterized in that After acquiring the vehicle status data from the server, the method further includes: Determine whether it is the first time to draw the car model image. If it is determined to be the first time to draw, call the car model image drawing method to generate the car model image according to the vehicle state data, and assign the car model image to the image display control on the client page; When it is determined that it is not the first drawing, comparing the vehicle status data currently returned by the server with the vehicle status data returned last time; Among them, when the comparison result is consistent, the drawing of the car model image is stopped. When the comparison result is inconsistent, the car model image drawing method is called according to the vehicle status data to generate the car model image, and the car model image is assigned to the image display control on the client page.

3. The method according to claim 1, characterized in that Before calling a system function to create a drawing context according to the drawing area, the method further includes: Cutting all part images from the whole vehicle image and keeping the original coordinate positions of the part images on the whole vehicle image; According to the predetermined vehicle type, the cut-out part images are divided into different cut-out sets, wherein each of the cut-out sets contains the states of all parts; storing at least one of the image cutting sets in the client, and storing all the image cutting sets in the server; In response to a request for obtaining the picture cutting set in the server, the picture cutting set in the server is downloaded to the client, and the picture cutting set downloaded for the first time is stored in the cache of the client.

4. The method according to claim 1, characterized in that The step of sequentially taking out corresponding part images from the pre-stored cutting set includes: When the cutting set is first obtained, the cutting set is loaded from the hard disk into the memory, and the required part image is obtained from the memory according to the part cache identifier corresponding to the part; When the image cutting set is subsequently acquired, the required part image is read from the cache using the set cache identifier corresponding to the image cutting set and the part cache identifier corresponding to the part.

5. A vehicle model image drawing device based on vehicle status, characterized in that: include: An acquisition module is configured to acquire vehicle status data from a server, wherein the vehicle status data includes status information of each vehicle part; A setting module, configured to set a drawing area according to a predetermined drawing requirement, wherein the size of the drawing area is consistent with the size of the actual display area; A creation module is configured to call a system function to create a drawing context according to the drawing area, wherein the drawing context is used to return a car model image; A drawing module is configured to sequentially take out corresponding part images from a pre-stored cut-image set according to the vehicle state data, and sequentially draw the part images in the drawing context according to a predetermined drawing order to generate a vehicle model image; A loading module is configured to load the generated car model image into an image display control for display, wherein a property of the image display control is set to be scaled in proportion; The drawing module is used to obtain the vehicle status data from the server according to the drawing order corresponding to the part images, and to take out the corresponding part images from the cutting set; according to the drawing order, a predetermined system function is called to draw each part image in the drawing context in sequence; the rectangle corresponding to the drawing area is passed into the system function as a parameter, so that the system function automatically draws the part image in the drawing context; The loading module is used to set the content display mode attribute in the image display control to proportional scaling, so that the car model image is adaptively adjusted according to the size of the image display control; layout the position and size of the image display control according to business requirements and design drafts, and use the automatic constraint layout provided by the system to automatically adjust the size of the image display control according to changes in the client page, wherein the car model image is a vector diagram generated using the drawing context; It also includes a cutting module, which is used to obtain the whole vehicle image and determine the area to be cut before calling the system function to create a drawing context according to the drawing area, wherein the area includes a replacement area corresponding to a part whose state can change; mark the area on the whole vehicle image, and hide the part of the whole vehicle image except the marked area, or set the part outside the marked area to transparent, so as to retain the part part in the whole vehicle image and obtain the part image.

6. An electronic device comprising a memory, a processor and a computer program stored in the memory and executable on the processor, characterized in that: When the processor executes the computer program, the steps of the method according to any one of claims 1 to 4 are implemented.

7. A computer-readable storage medium storing a computer program, characterized in that: When the computer program is executed by a processor, the steps of the method according to any one of claims 1 to 4 are implemented.

Images