Method and device for processing sketch graphic file, electronic equipment and storage medium

Abstract

Embodiments of the present application provide a sketch graphic file processing method and device, electronic equipment and storage medium, and relate to the technical field of information processing. The method comprises: displaying a sketch graphic file to be processed; in response to a selection operation on one or more target identifiers in a palette identifier, displaying a palette corresponding to the target identifier; and in response to a trigger operation on an export control, generating a processed sketch graphic file according to the palette corresponding to the selected target identifier. The embodiments of the present application lay a foundation for subsequent user demand for selectively displaying part of the palette in the local sketch graphic file, overcoming the drawbacks of the prior art that can only browse the layers in the sketch graphic file through a webpage after uploading the sketch graphic file to the cloud and cannot edit, and can only obtain the complete sketch file and cannot remove the part not intended to be displayed.

Description

Technical Field

[0001] This application relates to the field of information processing technology, and more specifically, to a method, apparatus, electronic device, and storage medium for processing sketch graphic files. Background Technology

[0002] After designers complete the creation of multiple canvases using the Sketch graphics processing program, they save them as Sketch graphic files. By uploading the entire Sketch graphic file, others can view the image version of the canvas through a webpage.

[0003] Existing technical solutions cannot remove unwanted parts of a sketch graphic file and share the file. They can only be viewed through a webpage after uploading to the cloud, but cannot obtain the sketch graphic file itself, or can only obtain the complete sketch graphic file without removing unwanted parts. Summary of the Invention

[0004] The present invention provides a method, apparatus, electronic device, and storage medium for processing sketch graphic files to overcome or at least partially solve the above problems.

[0005] Firstly, a method for processing sketch graphic files is provided, which includes:

[0006] Display the sketch file to be processed, which includes page identifiers for one or more pages, and each page identifier includes artboard identifiers for one or more artboards;

[0007] In response to a selection operation on one or more target icons in the canvas icons, display the canvas corresponding to the target icon;

[0008] In response to a trigger operation on the export control, a processed sketch file is generated based on the artboard corresponding to the selected target identifier.

[0009] In one possible implementation, the sketch file to be processed is displayed, including:

[0010] The first interface displays the sketch file to be processed;

[0011] In response to a triggering operation on the export control on the first interface, create a second interface;

[0012] The second interface is displayed, and page identifiers of one or more pages of the sketch graphic file to be processed are shown in the second interface. Each page identifier includes artboard identifiers of one or more artboards.

[0013] The second interface displays an export control.

[0014] In one possible implementation, generating the processed sketch file includes:

[0015] Unzip the sketch file to be processed to obtain the original metadata and page folder of the sketch file;

[0016] Modify the original metadata and page folder based on the selected artboard, and obtain the modified metadata and page folder;

[0017] Compress the modified metadata and page folder to obtain the processed sketch file;

[0018] The original metadata includes the correspondence between pages and artboards in the sketch graphics file to be processed. The original page folder includes style information for one or more pages. The style information includes the unique identifier of the page, the page name, and the artboard data of the artboard in the page. The artboard data includes the unique identifier of the artboard, the artboard name, the artboard type, and the layer parameters in the artboard.

[0019] The modified metadata includes the correspondence between the target artboard and the page where the target artboard is located. The modified page folder includes the style information of the page where the target artboard is located. The target artboard includes the artboard corresponding to the selected target identifier and the artboard type is control type.

[0020] In one possible implementation, the original metadata and page folder are modified based on the selected artboard to obtain the modified metadata and page folder, including:

[0021] Based on the page folder and the selection operation, obtain the unique identifier of one or more pages, the page name, and the unique identifier and artboard name of the target artboard in each page, so as to generate artboard selection information and page artboard information;

[0022] Modify the original metadata based on the page canvas information to obtain the modified metadata;

[0023] Modify the original page folder based on the canvas selection information to obtain the modified page folder;

[0024] The page canvas information includes the unique identifier and page name of each page in one or more pages, as well as the correspondence between the first correspondence information and the unique identifier and canvas name of the target canvas in each page.

[0025] The artboard selection information includes the correspondence between the unique identifier of each page in one or more pages and the unique identifier of the target artboard in each page.

[0026] In one possible implementation, to generate artboard selection information and page artboard information, the following is also included beforehand:

[0027] For each page in one or more pages, generate corresponding page data and canvas update data based on the page folder and the selection operation. The page data includes the page name and unique identifier of the page, and the canvas update data includes the canvas name, unique identifier, canvas type and whether it is selected for all canvases in the page.

[0028] Based on the canvas update data, determine the canvas corresponding to the selected target identifier, and store the unique identifier of the canvas corresponding to the selected target identifier and the canvas update data into the page data;

[0029] Generate artboard selection information and page artboard information, including:

[0030] Generate canvas selection information and page canvas information based on page data from one or more pages.

[0031] In one possible implementation, generating page canvas information includes:

[0032] For each of one or more pages, determine the unique identifier and artboard name of the target artboard on each page, and obtain the first correspondence information of the page;

[0033] Based on the unique identifier, page name, and first correspondence information of each page, the second correspondence information of each page is obtained. The second correspondence information includes the unique identifier, page name, and correspondence between the first correspondence information of each page.

[0034] Based on the second correspondence information of one or more pages, obtain the page canvas information.

[0035] In one possible implementation, the canvas selection information is generated, including:

[0036] For each of one or more pages, determine the target artboard and its unique identifier for each page;

[0037] Obtain the unique identifier of each page and the unique identifier of the target artboard in each page, and obtain the third correspondence information of each page from the correspondence between the unique identifier of each page and the unique identifier of the target artboard in each page;

[0038] Based on the third correspondence information of one or more pages, obtain the canvas selection information.

[0039] In one possible implementation, the canvas type is a control-type canvas, which is one or more layers in the canvas of the sketch graphic file to be processed that are pre-set as common components.

[0040] In one possible implementation, the canvas corresponding to the target identifier is displayed, including:

[0041] Display one or more of the text descriptions and thumbnails of the canvas corresponding to the target identifier.

[0042] In one possible implementation, the method further includes one or more of the following steps:

[0043] The message indicates that the processed sketch file was successfully exported.

[0044] Upload the processed sketch file to the cloud;

[0045] The message indicates that the processed sketch file was successfully uploaded.

[0046] In one possible implementation, the method further includes one or more of the following steps:

[0047] Preview the processed sketch file;

[0048] Share the processed sketch file;

[0049] Share the processed sketch files, including:

[0050] Copy the page link containing the processed sketch file and share that page link.

[0051] Secondly, a device for processing sketch graphic files is provided, including:

[0052] The file display module is used to display the sketch graphic file to be processed. The sketch graphic file to be processed includes page identifiers of one or more pages, and each page identifier includes artboard identifiers of one or more artboards.

[0053] The canvas selection module is used to respond to the selection operation of one or more target icons in the canvas identifiers and display the canvas corresponding to the target icon;

[0054] The file processing module is used to respond to the trigger operation of the export control and generate the processed sketch graphic file according to the canvas corresponding to the selected target identifier.

[0055] In one possible implementation, the file display module includes:

[0056] The first interface display submodule is used to display the sketch graphic file to be processed on the first interface;

[0057] The second interface creates a submodule to respond to trigger operations on the exported controls on the first interface and create the second interface.

[0058] The second interface display submodule is used to display the second interface and show page identifiers of one or more pages of the sketch graphic file to be processed in the second interface. Each page identifier includes one or more artboard identifiers.

[0059] The second interface displays an export control.

[0060] In one possible implementation, the file processing module includes:

[0061] The decompression submodule is used to decompress the sketch graphic file to be processed, and obtain the original metadata and page folder of the sketch graphic file to be processed;

[0062] The delete submodule is used to modify the original metadata and page folder based on the selected artboard, and obtain the modified metadata and page folder.

[0063] The compression submodule is used to compress the modified metadata and page folder to obtain the processed sketch file;

[0064] The original metadata includes the correspondence between pages and artboards in the sketch graphics file to be processed. The original page folder includes style information for one or more pages. The style information includes the unique identifier of the page, the page name, and the artboard data of the artboard in the page. The artboard data includes the unique identifier of the artboard, the artboard name, the artboard type, and the layer parameters in the artboard.

[0065] The modified metadata includes the correspondence between the target artboard and the page where the target artboard is located. The modified page folder includes the style information of the page where the target artboard is located. The target artboard includes the artboard corresponding to the selected target identifier and the artboard type is control type.

[0066] Deleting submodules includes:

[0067] The information generation unit is used to obtain the unique identifier of one or more pages, the page name, and the unique identifier and artboard name of the target artboard in each page, based on the page folder and the selection operation, so as to generate artboard selection information and page artboard information.

[0068] The metadata update unit is used to modify the original metadata based on the page canvas information and obtain the modified metadata.

[0069] The page folder update unit is used to modify the original page folder based on the canvas selection information and obtain the modified page folder.

[0070] The page canvas information includes the unique identifier and page name of each page in one or more pages, as well as the correspondence between the first correspondence information and the unique identifier and canvas name of the target canvas in each page.

[0071] The artboard selection information includes the correspondence between the unique identifier of each page in one or more pages and the unique identifier of the target artboard in each page.

[0072] In one possible implementation, the device for processing sketch graphics files also includes:

[0073] The data generation module is used to generate corresponding page data and canvas update data for each page in one or more pages, based on the page folder and the selection operation. The page data includes the page name and unique identifier of the page, and the canvas update data includes the canvas name, unique identifier, canvas type and whether it is selected for all canvases in the page.

[0074] The page data editing module is used to determine the canvas corresponding to the selected target identifier based on the canvas update data, and to store the unique identifier of the canvas corresponding to the selected target identifier and the canvas update data into the page data.

[0075] The information generation unit is specifically used to generate canvas selection information and page canvas information based on page data of one or more pages.

[0076] In one possible implementation, the information generation unit includes a canvas information generation subunit for generating page canvas information, the canvas information generation subunit including:

[0077] The first correspondence subunit is used to determine the unique identifier and canvas name of the target canvas in each of one or more pages, and to obtain the first correspondence information of the page.

[0078] The second correspondence subunit is used to obtain the second correspondence information of each page based on the unique identifier, page name and first correspondence information of each page. The second correspondence information includes the unique identifier, page name and correspondence between the first correspondence information of each page.

[0079] The first aggregation subunit is used to obtain page canvas information based on the second correspondence information of one or more pages.

[0080] In one possible implementation, the information generation unit includes a canvas selection generation subunit for generating canvas selection information, the canvas selection generation subunit comprising:

[0081] The identifier determines the sub-unit, which is used to determine the target artboard and its unique identifier for each page in one or more pages;

[0082] The third correspondence subunit is used to obtain the unique identifier of each page and the unique identifier of the target canvas in each page, and to obtain the third correspondence information of each page from the correspondence between the unique identifier of each page and the unique identifier of the target canvas in each page;

[0083] The second summary sub-unit is used to obtain canvas selection information based on the third correspondence information of one or more pages.

[0084] In one possible implementation, the canvas type is a control-type canvas, which is one or more layers in the canvas of the sketch graphic file to be processed that are pre-set as common components.

[0085] In one possible implementation, the canvas selection module includes a canvas display module for displaying the canvas corresponding to the target identifier. Specifically, the canvas display module is used to display one or more of the text descriptions and thumbnails of the canvas corresponding to the target identifier.

[0086] In one possible implementation, the sketch graphic file processing device may further include one or more of the following modules: an export success display module, used to display information that the processed sketch graphic file has been successfully exported;

[0087] The upload module is used to upload the processed sketch graphics files to the cloud.

[0088] The "Upload Successful Display" module displays information indicating that the processed sketch graphic file has been successfully uploaded.

[0089] In one possible implementation, the ketch graphic file processing device may further include one or more of the following modules:

[0090] The preview module is used to preview the processed sketch graphic file;

[0091] The sharing module is used to share processed sketch graphic files;

[0092] The sharing module is specifically used for:

[0093] Copy the page link containing the processed sketch file and share that page link.

[0094] Thirdly, embodiments of the present invention provide 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 steps of the method provided in the first aspect.

[0095] Fourthly, embodiments of the present invention provide a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the steps of the method provided in the first aspect.

[0096] Fifthly, embodiments of the present invention provide a computer program including computer instructions stored in a computer-readable storage medium. When a processor of a computer device reads the computer instructions from the computer-readable storage medium, the processor executes the computer instructions, causing the computer device to perform steps implementing the method provided in the first aspect.

[0097] The sketch graphic file processing method, apparatus, electronic device, and storage medium provided in this invention display a sketch graphic file to be processed, which includes page identifiers for one or more pages, and each page identifier includes one or more canvas identifiers, allowing the user to select a target identifier from the canvas identifiers. This facilitates the user's confirmation of the canvas that can be displayed. By responding to a trigger operation on the export control, a processed (simplified) sketch graphic file is generated based on the canvas corresponding to the selected target identifier. This application embodiment can lay the foundation for meeting the user's need to selectively display (share) some canvases in a local sketch graphic file. It overcomes the shortcomings of the prior art, which only allows browsing the drawing layers in the sketch graphic file through a webpage after the sketch graphic file is uploaded to the cloud and cannot be edited, and the shortcomings of only being able to obtain the complete sketch file and not being able to remove the parts that are not wanted to be displayed. Attached Figure Description

[0098] To more clearly illustrate the technical solutions in the embodiments of this application, the accompanying drawings used in the description of the embodiments of this application will be briefly introduced below.

[0099] Figure 1 A schematic diagram illustrating a scenario for a method of processing sketch graphics files provided in an embodiment of this application;

[0100] Figure 2a A schematic diagram of the display interface of the Sketch graphics processing program provided in the embodiments of this application.

[0101] Figure 2b This is a schematic diagram of the initial selection canvas interface of the Sketch graphics processing program provided in the embodiments of this application.

[0102] Figure 2c This is a schematic diagram of the canvas selection interface of the Sketch graphics processing program provided in this embodiment of the application;

[0103] Figure 2d This is a schematic diagram of the canvas selection interface of the Sketch graphics processing program provided in this embodiment of the application after selecting a canvas.

[0104] Figure 2e This is a schematic diagram of the export completion interface of the Sketch graphics processing program provided in the embodiments of this application;

[0105] Figure 2f A schematic diagram of the interface of a graphical editing program for a web-based user login provided in this application embodiment;

[0106] Figure 3A flowchart illustrating the method for processing sketch graphic files provided in this application embodiment;

[0107] Figure 4 An interactive schematic diagram illustrating the sketch graphic file processing process provided in this application embodiment;

[0108] Figure 5 This is a schematic diagram of the structure of a sketch graphic file processing device provided in an embodiment of this application;

[0109] Figure 6 This is a schematic diagram of the structure of an electronic device provided in an embodiment of this application. Detailed Implementation

[0110] The embodiments of this application are described in detail below. Examples of the 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 are only used to explain this application, and should not be construed as limiting the invention.

[0111] Those skilled in the art will understand that, unless explicitly stated otherwise, the singular forms “a,” “an,” and “the” used herein may also include the plural forms. It should be further understood that the term “comprising” as used in the specification of this application means the presence of features, integers, steps, operations, elements, and / or components, but does not exclude the presence or addition of one or more other features, integers, steps, operations, elements, components, and / or groups thereof. It should be understood that when we say an element is “connected” or “coupled” to another element, it can be directly connected or coupled to the other element, or there may be intermediate elements. Furthermore, “connected” or “coupled” as used herein can include wireless connections or wireless coupling. The term “and / or” as used herein includes all or any units and all combinations of one or more associated listed items.

[0112] The methods, apparatus, electronic devices, and storage media for processing sketch graphic files provided in this application are intended to solve the above-mentioned technical problems of the prior art.

[0113] The method for processing sketch graphics files in this application can be implemented as a plugin, applicable to the processing of sketch graphics files displayed on a sketch graphics processing program. A plugin (also known as an addin, etc.) is a program written according to a certain application programming interface specification. It can only run on the system platform specified by the program (it may support multiple platforms simultaneously) and cannot run independently of the specified platform.

[0114] The Sketch plugin can be located on the user's computer device, such as a Sketch graphics processing program (e.g., XSHOW image editing software) with the plugin installed. This allows users to perform simplified editing of Sketch graphic files before uploading them to the server. Simplified editing refers to saving only a portion of the Sketch graphic file or a portion of the artboard and generating a simplified Sketch document.

[0115] The Sketch plugin can also be located within a network-side service system such as a server or cloud platform. Based on this, users can access the server or cloud platform where the Sketch plugin is located using their terminal to perform simplified editing and upload of Sketch graphic files to the server based on the online Sketch plugin provided by the server or cloud platform.

[0116] To make the objectives, technical solutions, and advantages of this application clearer, the embodiments of this application will be described in further detail below with reference to the accompanying drawings.

[0117] The technical solution of this application and how the technical solution of this application solves the above-mentioned technical problems are described in detail below with specific embodiments. These specific embodiments can be combined with each other, and the same or similar concepts or processes may not be described again in some embodiments. The embodiments of this application will now be described with reference to the accompanying drawings.

[0118] To facilitate understanding, the following example uses a cloud platform with the Sketch plugin installed as an illustration, illustrating one scenario applicable to the solution in this application. Figure 1 As shown, it exemplarily illustrates a scenario diagram of a method for processing sketch graphic files according to an embodiment of this application.

[0119] Depend on Figure 1 As can be seen, this scenario includes: cloud platform 10, which may include multiple cloud servers 101.

[0120] A cloud platform, also known as a cloud computing platform, is a network platform built on cloud technology. Cloud technology refers to a hosting technology that unifies hardware, software, and network resources within a wide area network (WAN) or local area network (LAN) to enable data computation, storage, processing, and sharing.

[0121] Cloud technology is a collective term for network technologies, information technologies, integration technologies, management platform technologies, and application technologies applied based on the cloud computing business model. It can form resource pools, providing flexible and convenient on-demand access. The backend services of cloud computing systems require substantial computing and storage resources, such as image storage and encoding. With the rapid development and application of the internet industry, every item may eventually possess its own identification mark, requiring transmission to a backend system for logical processing. Data at different levels will be processed separately, and various industry data will all require robust system support, which can only be achieved through cloud computing.

[0122] Cloud computing is a computing model that distributes computing tasks across a resource pool composed of a large number of computers, enabling various application systems to access computing power, storage space, and information services as needed. The network providing these resources is called the "cloud." From the user's perspective, the resources in the "cloud" are infinitely scalable, readily available, on-demand, expandable, and pay-as-you-go.

[0123] As a provider of fundamental cloud computing capabilities, a cloud resource pool (referred to as a cloud platform, generally called an IaaS (Infrastructure as a Service) platform) is established. Various types of virtual resources are deployed in the resource pool for external customers to choose from. The cloud resource pool mainly includes: computing devices (virtualized machines containing operating systems), storage devices, and network devices.

[0124] like Figure 1 As shown, the cloud platform in this application runs a Sketch plugin.

[0125] exist Figure 1 The scenario also includes multiple terminals 20, each running a Sketch graphics processing program. Terminals 20 can access Sketch plugins in the cloud platform through the Sketch graphics processing program to achieve simplified editing of Sketch graphics files.

[0126] Understandable Figure 1 This example demonstrates simplified editing of Sketch image files using a cloud-based Sketch plugin. However, the process for simplified editing of Sketch image files using a server or server cluster-based Sketch plugin is similar and will not be elaborated upon here.

[0127] Of course, in practical applications, if users use the Sketch plugin on personal computers or other computer devices to perform simplified editing of Sketch graphic files, they only need to open the Sketch plugin or a Sketch graphic processing program with the Sketch plugin to see the interface of the editing area containing the Sketch plugin, and then perform simplified editing of the Sketch graphic file in the editing area.

[0128] Please see Figures 2a-2f This is a schematic diagram of an interface for processing sketch graphic files provided in an embodiment of this application.

[0129] Figure 2a A schematic diagram showing the display interface of the sketch graphics processing program according to an embodiment of this application is shown, such as... Figure 2a As shown in sub-interface 10a, when displaying a Sketch graphic file, the Sketch graphics processing program displays a page bar and a canvas bar. The page bar displays the identifiers of pages and controls in the Sketch graphic file. In this embodiment, the page identifier is the page name, such as Page 1 and Page 2. A control is a special type of page, and the canvas in the control is a layer that is pre-set as a common component. In this embodiment, a component is a layer, and a common component refers to a layer that can be referenced.

[0130] In this embodiment, when a user draws on a canvas, any layer included in the control can be used as a layer on the canvas that can cover or be covered by other layers. For example, if the control has a layer with a triangle pattern drawn on it (referred to as the triangle layer), when the user draws on the canvas, clicking on the triangle layer in the control will make it a layer (layer 1) on the canvas. When drawing other patterns on the canvas, the layer containing the drawn other patterns (layer 2) will be on top of layer 2, thus layer 2 covers layer 1. Of course, layer 1 can also be placed on top of layer 2, thus layer 1 covers layer 2. In other words, layers in the canvas can be referenced from the control.

[0131] Layers in a control can be pre-defined by the user from the artboards in the sketch file. Any number of layers from an artboard can be added to the control class; for example, all layers from an artboard can be added to the control class. For instance, a sketch file may have two pages, Page 1 and Page 2. Page 1 includes Artboard 1 and Artboard 2, and Page 2 includes Artboard 3. Each artboard contains at least one layer. The user can add one or more layers from Artboard 1 to Artboard 3 to the control as a common component. It's important to note that once a layer is designated as a control type, that layer is also considered a artboard.

[0132] The canvas bar displays the name of the canvas on the page the user clicked. In sub-interface 10a, the user clicked on page 1, so the canvas bar displays canvas identifiers: canvas 1 and canvas 2. Each canvas further displays the name of the layer within that canvas. Sub-interface 10b displays the specific patterns drawn in the layers of canvas 1 and canvas 2 on page 1. Canvas 1 has only one layer, which depicts a circular pattern. Canvas 2 has two layers, each containing two rectangles of different shapes. The user can click the export control in sub-interface 10c to enter a simplified editing process for the sketch graphic file.

[0133] Figure 2b This diagram illustrates the initial state of the canvas selection interface of the Sketch graphics processing program according to an embodiment of this application. When the user clicks... Figure 2a After the sub-interface 10c in the middle, it will jump to Figure 2b The artboard selection interface has sub-interface 10d displaying the file name of the sketch graphic file to be processed: test-sketch.sketch. Sub-interface 10e displays a clickable artboard selection control. Since the user has not selected an artboard at this time, the selected artboard in sub-interface 10f is empty.

[0134] Figure 2c This illustration shows a schematic diagram of the canvas selection interface of the Sketch graphics processing program according to an embodiment of this application. When the user clicks... Figure 2b After selecting a canvas using the canvas selection control in sub-interface 10e, sub-interface 10g displays icons for selectable canvases. In this embodiment, the canvas icon includes the canvas name and a thumbnail. When a user clicks on a canvas, that canvas is identified as the canvas corresponding to the selected target icon. Visual differences can be set between the selected and unselected canvases to remind the user which canvases are selected. An outline 10h is added to the edge of the canvas corresponding to the selected target icon. In practical applications, the color or thickness of the outline 10h can be adjusted to help the user visually identify the canvas corresponding to the selected target icon. After selection, the user can click the export control in sub-interface 10i.

[0135] Figure 2d This illustration shows a schematic diagram of the canvas selection interface of the Sketch graphics processing program according to an embodiment of this application after selecting a canvas. When the user clicks... Figure 2cAfter the export control is executed in sub-interface 10i, sub-interface 10e displays the name of the selected artboard and the page where the artboard is located. Simultaneously, sub-interface 10f displays the identifier information of the selected artboard, and sub-interface 10j displays the export progress. It is important to note that... Figures 2a-2d The export controls shown can be the same export control or different export controls; this application embodiment does not impose specific limitations.

[0136] Figure 2e This diagram illustrates the export completion interface of the Sketch graphics processing program according to an embodiment of this application. As shown, once the simplified Sketch graphic file is exported, it means that the simplified Sketch graphic file has been successfully uploaded to the server, and other users can download, view, and edit the simplified and edited Sketch graphic file on the server. Sub-interface 10k displays the upload completion information, and sub-interface 10L displays a clickable preview control. When the user clicks the preview control, they can view the simplified and edited Sketch graphic file. Sub-interface 10m displays a clickable copy link control. When the user clicks the copy link control, the Sketch graphics processing program can copy the link of the simplified and edited Sketch graphic file from the server, thereby helping the user to paste the link into chat software, blogs, memos, etc., for themselves or others to view.

[0137] Figure 2f The diagram illustrates the interface of a web-based graphic editing program for other users, according to an embodiment of this application. This graphic editing program can be a third-party application that can also edit sketch graphic files. This application interacts with the server to obtain the sketch graphic files uploaded to the server. Other users can obtain links to the simplified, edited sketch graphic files provided by the user through various means such as chat software and blogs, and thus log in to the web-based graphic editing program. As shown in the diagram, sub-interface 10n displays the names of the pages and canvases of the simplified sketch graphic file, while sub-interface 10p displays canvas 2 on page 1 and canvas 3 on page 2. Clearly, the sketch graphic file downloaded by the other user only contains the canvases selected by the uploader.

[0138] Figure 3 This is a flowchart illustrating the method for processing sketch graphics files according to an embodiment of this application, as shown below. Figure 3 As shown, the method includes:

[0139] S101. Display the sketch graphic file to be processed; the sketch graphic file to be processed includes page identifiers of one or more pages, and each page identifier includes artboard identifiers of one or more artboards;

[0140] When displaying a sketch file to be processed, a first directory containing page icons of all pages in the sketch file can be shown first. Users can then click on the page icon of any page in the first directory to further display a second directory containing artboard icons of all artboards on that page. When users click on any artboard icon in the second directory, they can browse the specific layers drawn on that artboard.

[0141] S102. In response to a selection operation on one or more target identifiers among the identifiers, display the canvas corresponding to the selected target identifier.

[0142] This application does not specifically limit the selection operation method; for example, it can be a single click, double click, long press, etc. In this application, the identifier selected by the user is referred to as the target identifier, and the canvas corresponding to the target identifier is the selected canvas.

[0143] S103. In response to the trigger operation on the export control, generate the processed sketch graphic file according to the canvas corresponding to the selected target identifier.

[0144] After the user selects the target identifier, the export control is triggered. The triggering operation for the export control can be a single click, double click, long press, etc., and this application embodiment does not specifically limit the specific form of the triggering operation.

[0145] By triggering the export control, a simplified sketch file can be generated based on the artboard corresponding to the selected target identifier. The simplified sketch file may only include the artboard selected by the user.

[0146] This application embodiment displays a sketch file to be processed, which includes page identifiers for one or more pages, and each page identifier includes one or more artboard identifiers for one artboard. Users can select a target identifier from these artboard identifiers to confirm which artboards can be displayed. In response to a trigger operation on the export control, a processed (simplified) sketch file is generated based on the artboard corresponding to the selected target identifier. This application embodiment lays the foundation for meeting users' subsequent needs to selectively display (share) some artboards in their local sketch files. It overcomes the shortcomings of existing technologies, which only allow browsing and editing of layers in sketch files after they are uploaded to the cloud, and which only allow obtaining the complete sketch file without removing unwanted parts.

[0147] Based on the above embodiments, as an optional embodiment, a sketch graphic file to be processed is shown, including:

[0148] The first interface displays the sketch file to be processed;

[0149] As mentioned above Figure 2a In the illustrated embodiment, the first interface is essentially the display interface of the Sketch graphics processing program. The page bar and the canvas bar are displayed through the sub-interface 10a. The page bar displays the name of the Sketch graphics file, the canvas bar displays the name of the canvas in the page clicked by the user, and the sub-interface 10b displays the specific information of the canvas, that is, the layers in the canvas.

[0150] In response to a triggering operation on the export control on the first interface, create a second interface;

[0151] As mentioned above Figure 2a In the sub-interface 10c, the user can move the mouse to the area of ​​the export control and click the export control to complete the trigger operation, thereby creating the selection canvas interface shown in the embodiment of Figure 2b above, which is also the second interface.

[0152] Display the second interface;

[0153] It should be noted that the embodiments of this application display a second interface, which can be implemented as described in the above embodiments. Figure 2a The first interface shown switches to Figure 2b The second interface shown can also be displayed by popping up a window on the first interface. In this way, users can move the window to browse the information displayed on the first interface at the same time, which improves the user experience.

[0154] The second interface displays page identifiers for one or more pages of the sketch graphic file to be processed, with each page identifier including artboard identifiers for one or more artboards.

[0155] It should be noted that the embodiments of this application may employ methods such as Figure 2b In this embodiment, the selection canvas control displayed on the sub-interface 10f is used to demonstrate... Figure 2c The sub-interface 10g in the embodiment can also be in, for example Figure 2a In the embodiment, clicking the export control in sub-interface 10c directly jumps to the interface of the embodiment shown in Figure 2c, that is, the icon of the controllable selected canvas is displayed directly without the user needing to click to select the canvas control.

[0156] In the embodiments of this application, the export control included in the first interface and the second interface can be the same control or different controls.

[0157] Based on the above embodiments, as an optional embodiment, the processed sketch image file is generated, specifically including:

[0158] S201. Unzip the sketch graphic file to be processed to obtain the sub-files of the sketch graphic file.

[0159] A Sketch graphic file is essentially a compressed archive. By decompressing it, you can obtain the following sub-files:

[0160] meta.json, or meta file, is a JSON file containing the mapping between pages and artboards. The mapping between pages and artboards is recorded in the form of a list. In addition, the metadata also includes information such as the font used and the Sketch version.

[0161] document.json is a file named document with JSON format. This file contains common data for all pages, such as shared styles, as well as links to JSON files in the pages folder.

[0162] user.json, which is a file named user with JSON format, contains user metadata, such as the canvas viewport and zoom level for each page, UI metadata of the application (such as panel size), and whether the sketch graphics file has been uploaded to the server.

[0163] Pages, also known as the Pages folder, is a folder containing the specific style information for each page. Each page corresponds to a specific style information file in JSON format. Each file describes the page's content in a format similar to that obtained by running `sketchtool dump` on the file. The specific style information includes the page's unique identifier and page name, as well as the artboard data for the artboards within the page. The artboard data includes the artboard's unique identifier, artboard name, artboard type, and layer parameters within the artboard.

[0164] Images: This images folder contains all the bitmaps used and retains their original aspect ratio (so if a user imports a 1000x1000px image and then resizes it to 200x200px, the full 1000x1000px file will be stored).

[0165] Previews: Contains a preview image of the last page edited by the user. If the page size is less than 2048x2048, it will be stored at full size; otherwise, the page will be scaled to fit a 2048x2048 square.

[0166] S202. Modify the original metadata and page folder based on the selected canvas to obtain the modified metadata and page folder.

[0167] The target artboard includes the artboard corresponding to the selected target identifier and artboards of type control. As can be seen from the above embodiments, the control type artboard is actually a layer selected by the user from the layers in each artboard, thus providing convenience for direct referencing on other artboards later. In other words, the control type artboard may have a referencing relationship with the actual artboard in the sketch graphic file, meaning that the display and editing of some actual artboards requires the existence of the control type artboard.

[0168] For example, a sketch file to be processed has two pages, Page 1 and Page 2. Page 1 includes Artboard 1 and Artboard 2, and Page 2 includes Artboard 3 and Artboard 4. The user pre-sets a layer in Artboard 1 as a control-type artboard, and in Artboard 4, the layer in the control is used as the bottom layer. One or more layers in Artboard 4 are located in another layer above the bottom layer. Regardless of whether the user selects the artboard icon of Artboard 4 when selecting the target icon, this embodiment will treat the aforementioned control-type artboard as a target artboard. Therefore, this application will retain not only the artboard corresponding to the selected target icon, but also the artboard of the control type.

[0169] This application embodiment can delete the information of the canvas in the metadata except for the canvas corresponding to the selected target identifier and the canvas of the control type, to obtain the modified metadata. The information of the canvas in the page folder except for the canvas corresponding to the selected target identifier and the canvas of the control type can be deleted to obtain the modified page folder, thereby obtaining the simplified sub-file.

[0170] S203. Compress the modified metadata and page folder to obtain the processed sketch file.

[0171] This application embodiment obtains the processed sketch graphic file (also referred to as the simplified sketch graphic file, hereinafter the same) by recompressing the simplified sub-files.

[0172] Please see Figure 4 This is an interactive schematic diagram of the sketch graphic file processing process provided in the embodiments of this application, such as... Figure 4 As shown in the embodiment of this application, the user uploads a simplified sketch image file by logging into the web-based (webview) sketch image processing program. Specifically:

[0173] The Sketch plugin retrieves file information of the currently edited sketch file and user information, including user account information.

[0174] Users click the export control in the Sketch plugin (hereinafter referred to as the plugin). The Sketch plugin initializes the export interface on the webview. For details of the export interface, please refer to [link / reference]. Figure 2b The interface diagram shown is shown below;

[0175] The WebView opens the exported webpage and displays it to the user. The WebView also verifies the user's login status with the server.

[0176] The server verifies the user's account validity and sends a list of folders pre-created by the user on the server to the webview. This embodiment allows users to freely create folders on the server to store sketch image files. The webview then displays the received folder list to the user.

[0177] The plugin retrieves the page and canvas data from the sketch graphic file and sends it to the webview, so that the webview can display the received user information, the page and canvas data from the sketch graphic file to the user.

[0178] Users select canvas data from a list of canvases displayed on the webview and choose a folder to save the canvas data. After selection, the user clicks the export control again. The webview responds to the click operation, receives the selected canvas and the folder to save the canvas data, and then sends the selected canvas and the folder to the plugin.

[0179] The plugin receives the artboard selected by the user and the folder containing the artboard data, and sends pre-upload information to the backend server. The pre-upload information may include the version information of the sketch graphic file, the file name, and the information of the folder where the artboard data is saved.

[0180] The plugin decompresses the Sketch graphic file, obtaining multiple JSON files and sub-files such as the page folder. It edits the decompressed metadata, removes the data of pages and artboards that are not selected by the user in the page folder, and then recompresses the sub-files to obtain a simplified Sketch graphic file.

[0181] The plugin uploads the streamlined sketch file to the server. The server saves the received streamlined sketch file to the folder selected by the user and sends a notification to the plugin that the upload was successful.

[0182] The plugin deletes the local, streamlined Sketch file, ending the Sketch file processing task.

[0183] Based on the above embodiments, as an optional embodiment, the original metadata and page folder are modified according to the selected canvas to obtain the modified metadata and page folder, including:

[0184] S301. Based on the page folder and the selection operation, obtain the unique identifier of one or more pages, the page name, and the unique identifier and artboard name of the target artboard in each page, so as to generate artboard selection information and page artboard information.

[0185] This application embodiment requires generating canvas selection information and page canvas information based on the unique identifier of one or more pages, the page name, and the unique identifier and canvas name of the target canvas in each page.

[0186] The page board information generated in this embodiment includes a correspondence between the unique identifier of each page in one or more pages and the page name of each page, as well as a first correspondence information. The first correspondence information includes a correspondence between the unique identifier of the target board in each page and the board name. The page board information can be named "pagesandartboards" data.

[0187] In other words, the page canvas information categorizes the information of the target canvas on each page. By constructing the page canvas information, the unique identifier and canvas name of the target canvas on each page can be found by searching the unique identifier of each page.

[0188] The page canvas information is generated for the metadata in this application embodiment because the metadata contains an original page canvas information. This original page canvas information records the correspondence between the unique identifier of each page in one or more pages and the page name and canvas correspondence information of each page. The canvas correspondence information includes the correspondence between the unique identifier of each canvas in the page and the canvas name.

[0189] The canvas selection information generated in this embodiment includes a correspondence between the unique identifier of each page in one or more pages and the unique identifier of the target canvas within each page. Generating canvas selection information allows for subsequent updates to the style information of each page in the page folder based on the unique identifiers of the pages and the target canvases within the canvas selection information. The canvas selection information can be named `selectpagesartboards`.

[0190] For example, if a Sketch file shares two pages, where page 1 includes artboard 1 and artboard 2, and page 2 includes artboard 3, where page 1 is uniquely identified by ym1 and named "pen"; page 2 is uniquely identified by ym2 and named "pencil"; and artboards 1-3 are uniquely identified by hb1, hb2, and hb3 respectively, and named huaban1, huaban2, and huaban3, the original page artboard information could be:

[0191] ym1-pen-(huaban1-hb1), (huaban2-hb2);

[0192] ym2-pencil-(huaban3-hb3), (huaban3-hb3).

[0193] If the user selects canvas 2, the canvas information generated in step S301 can be:

[0194] ym1-pen-(huaban2-hb2);

[0195] ym2-pencil-null.

[0196] In the newly generated page canvas information, since there is a selected canvas in page 1, the page canvas information includes the first correspondence information of canvas 2, while the first correspondence information in page 2 is empty (null).

[0197] It should be noted that, in addition to the above format of page artboard information, if a page does not contain a target artboard, the page artboard information may not record the relevant information of that page. Taking the above example as an example, the page artboard information may also be: ym1-pen-(huaban2-hb2).

[0198] The canvas selection information generated through step S301 can be:

[0199] ym1-hb2;

[0200] ym2-null.

[0201] In the generated canvas selection information, since there is a target canvas in page 1, the page canvas information has a correspondence between the unique identifier ym1 of page 1 and the unique identifier hb2 of canvas 2. However, since there is no target canvas in page 2, the unique identifier ym2 of page 2 corresponds to an empty value.

[0202] In addition to the above format of artboard selection information, if a target artboard does not exist on a page, the artboard selection information may not record the relevant information of that page. Taking the above example, the artboard selection information is: ym1-hb2.

[0203] S302. Modify the original metadata based on the page canvas information to obtain the modified metadata.

[0204] Specifically, in this embodiment of the application, the update is achieved by replacing the original page canvas information in the metadata with the page canvas information generated in step S301.

[0205] S303. Modify the original page folder based on the canvas selection information to obtain the modified page folder.

[0206] Since the artboard selection information records the correspondence between the unique identifier of the page, the artboard data of the artboard on the page, and the unique identifier of the target artboard, we can iterate through the unique identifier of each page in the artboard selection information. If the unique identifier of the target artboard exists under a certain page, the artboard data of the target artboard is retained in the page folder accordingly. If the unique identifier of the target artboard does not exist under a certain page, the specific style information of that page can be directly deleted from the page folder, thereby quickly simplifying the sub-files.

[0207] Based on the above embodiments, as an optional embodiment, this application embodiment further includes the following before generating canvas selection information and page canvas information:

[0208] S401. For each page in one or more pages, generate corresponding page data and canvas update data based on the sub-file and selection operation.

[0209] Specifically, in this embodiment of the application, the document.json subfile and page folder in the sketch graphic file can be obtained through the API (Application Programming Interface) provided by the sketch graphic file, and the required data in each page can be obtained by traversing the document.json subfile and page folder:

[0210] When traversing the page, the page name and unique identifier of the page are written into the page data, which can be named pagedata.

[0211] When iterating through the artboards on a page, you can also use the API provided by the Sketch image file to obtain all the artboards on each page, and then iterate through each artboard to get the data you need from it:

[0212] The unique identifier and name of the artboard are obtained through the API interface provided by the sketch graphic file, and it is determined whether the artboard is selected. This information is written into the artboard update data, which can be named artboardsdata.

[0213] S402. Determine the canvas corresponding to the selected target identifier based on the canvas update data, and store the unique identifier of the canvas corresponding to the selected target identifier and the canvas update data into the page data.

[0214] By using the information recorded in the artboard update data about whether each artboard is selected, this embodiment of the application can select the unique identifier of the artboard corresponding to the selected target identifier and record it in the selected artboard array pageData.selectedArtboards in the page data, and move the artboard update data to the artboard array pageData.artboards in the page data.

[0215] Based on the above embodiments, as an optional embodiment, generating canvas selection information and page canvas information includes:

[0216] Generate canvas selection information and page canvas information based on page data from one or more pages.

[0217] Specifically, by using the unique identifier of the selected target identifier recorded in the selected array of the page data to find the name of the selected canvas corresponding to the unique identifier of the selected canvas in the canvas update data of the page data, and combining the unique identifier and page name of the page recorded in the page data, the canvas selection information and page canvas information can be obtained accordingly.

[0218] For example, the following information is recorded in the data of a certain page:

[0219] Page name: pen;

[0220] The page's unique identifier: ym1;

[0221] Selected array: hb1;

[0222] canvas array:

[0223] Canvas update data:

[0224] hb1, huaban1, type 1, is selected;

[0225] hb2,huaban2,Type 2,Not selected.

[0226] The data on this page records a page named "pen" with the page identifier "ym1". It has two canvases. Canvas 1 is the canvas selected by the user. Its unique identifier is "hb1", its canvas name is "huaban1", and its canvas type is 1. Canvas 2 is the canvas that was not selected by the user. Its unique identifier is "hb2", its canvas name is "huaban2", and its canvas type is 2.

[0227] When obtaining the page canvas information based on the above page data, it can be known that the page has a canvas corresponding to the selected target identifier because the selected array is not empty. Further, based on the canvas update data, it can be known that although canvas 2 on the page is not selected, it is actually a layer copied from the control. The type of the canvas is the control type, so canvas 2 should also be regarded as the target canvas.

[0228] By combining the unique identifier and name of the page recorded in the page data, the page canvas information can be obtained:

[0229] ym1-pen-(huaban1-hb1,huaban2-hb2)

[0230] Based on the above embodiments, as an optional embodiment, generating page canvas information includes:

[0231] S501. For each of one or more pages, determine the target canvas, its unique identifier, and its name, and obtain the first correspondence information of the page.

[0232] Specifically, in this embodiment of the application, the first corresponding information of the page can be obtained by traversing the page data: since the canvas update data in the page data includes the canvas type of all canvases on the page and whether they are selected, the target canvas can be determined by querying the canvas type and the canvas corresponding to the selected target identifier. Furthermore, the first corresponding relationship information of the page can be obtained based on the unique identifier and canvas name of the target canvas recorded in the canvas update data.

[0233] S502. Based on the page's unique identifier, page name, and first correspondence information, obtain the page's second correspondence information, which includes the correspondence between each page's unique identifier, page name, and the first correspondence information.

[0234] Specifically, in this embodiment of the application, the unique identifier of each page can be used as the key in the key-value pair, and the page name and the first correspondence information can be used as the value in the key-value pair, thereby identifying the second correspondence information of the page in the form of key-value pairs.

[0235] Furthermore, when updating metadata based on page canvas information, the unique identifier of the page can be used as the key to look up key-value pairs, obtain the value corresponding to the key, and thus obtain the name of each page as well as the unique identifier and canvas name of the target canvas in that page.

[0236] S503 obtains page canvas information based on the second correspondence information in one or more pages.

[0237] By aggregating the second correspondence information of all pages, the page canvas information can be obtained.

[0238] The page canvas information can be in the form of a table. The page canvas information table has two columns: one for keys and the other for values, as shown in Table 1. Table 1 illustrates the page canvas information table of this embodiment. This table records the second correspondence information between two pages. The unique identifier of the first page is ym4, and the unique identifier of the second page is ym7. The unique identifier of the page is stored as the key in the table, and the page name and the name and unique identifier of the target canvas for each page are stored as values ​​in the table. It should be understood that since the value includes multiple data, a separator needs to be set between different data. In this embodiment, using a comma as the separator is only an optional example, and is not limited to using other symbols such as " / ", ".", ";", etc. In this embodiment, using "-" to represent the correspondence between the canvas name and the canvas's unique identifier is only an optional example, and is not limited to using other symbols such as " / ", ".", ";", ";", etc. It is understood that the separator in the table and the symbol indicating the correspondence should be two different symbols.

[0239]

[0240] Table 1 Page Drawing Board Information Table

[0241] Based on the above embodiments, as an optional embodiment, this application embodiment generates canvas selection information, including:

[0242] S601. For each of one or more pages, determine the target artboard and its unique identifier.

[0243] Specifically, in this embodiment, the target canvas and its unique identifier can be obtained by traversing page data. By traversing page data using the unique identifier of each page, canvas update data corresponding to the unique identifier of that page can be obtained, and the target canvas and its unique identifier can be obtained from the canvas update data.

[0244] S602. Obtain the unique identifier of each page and the unique identifier of the target artboard in each page, and obtain the third correspondence information of each page from the correspondence between the unique identifier of each page and the unique identifier of the target artboard in each page.

[0245] Specifically, in this embodiment of the application, the unique identifier of the page can be used as the key in the key-value pair, and the unique identifier of the target bread in the page can be used as the value in the key-value pair, thereby identifying the third correspondence information of the page in the form of key-value pairs.

[0246] Furthermore, when retaining the target artboard and the page containing the target artboard in the page folder based on the artboard selection information, the unique identifier of the page can be used as the key to look up the key-value pair, obtain the value corresponding to the key, and thus obtain the unique identifier of the target artboard in each page. The artboard with the unique identifier of the target artboard recorded in the artboard selection information and the page containing the artboard are retained in the page folder as a simplified sub-file.

[0247] S603. Obtain canvas selection information based on the third correspondence information of one or more pages.

[0248] The canvas selection information can be obtained by summarizing the third-party correspondence information of all pages. The canvas selection information can be in the form of a table with two columns: a key and a value, as shown in Table 2. Table 2 illustrates the canvas selection information table of this embodiment. This table records the third-party correspondence information of two pages. The unique identifier of the first page is ym4, and the unique identifier of the second page is ym7. The unique identifier of the page is stored as the key in the table, and the unique identifier of the target canvas within each page is stored as the value. It should be understood that since the value includes multiple data points, a separator needs to be set between different data points. In this embodiment, using a comma as the separator is only an optional example, and is not limited to using other symbols such as " / ", ".", ";", etc.

[0249] Key Value ym4 hb13, hb19 ym7 hb14

[0250] Table 2. Drawing Board Selection Information

[0251] Furthermore, in addition to recording the unique identifier of the target canvas, the canvas selection information in this embodiment may also record the name of the target canvas, page name, etc. Correspondingly, the value in the canvas selection information table will also record the name of the target canvas and page name.

[0252] In this embodiment of the application, when generating canvas selection information, the relevant information of the page with the target canvas may not be recorded in the canvas selection information. Therefore, when retaining the target canvas and the page containing the target canvas in the page folder according to the canvas selection information, for pages in the page folder that do not have a unique identifier recorded in the canvas selection information, the entire page in the page folder can be directly deleted, thereby further improving the efficiency of simplification.

[0253] Based on the above embodiments, as an optional embodiment, displaying the canvas corresponding to the target identifier includes:

[0254] Display one or more of the text descriptions and thumbnails of the canvas corresponding to the target identifier.

[0255] like Figure 2d As shown in sub-interface 10f, when displaying the canvas, sub-interface 10f displays the text descriptions of the canvases "Panel 2" and "Panel 3", and also displays thumbnails of canvas 2 and canvas 3. In this embodiment of the application, the thumbnails can be the result of scaling the original layer, the result of reducing the clarity of the original layer, or the result of both scaling the original layer and reducing the clarity. This embodiment of the application does not make specific limitations.

[0256] Based on the above embodiments, as an optional embodiment, the method further includes one or more of the following steps:

[0257] The system displays a message indicating that the processed sketch file has been successfully exported. Specifically, the embodiments of this application may employ methods such as... Figure 2e The sub-interface shown in the image displays a message indicating that the processed sketch file has been successfully exported.

[0258] The processed sketch graphic file is uploaded to the cloud. This embodiment of the application can upload the processed sketch graphic file to the cloud for other users to browse. Since the uploaded sketch graphic file is a simplified sketch graphic file and is also compressed from sub-files, it can be edited normally by other users. This embodiment of the application can meet the user's need to selectively display (share) part of the canvas in the local sketch graphic file.

[0259] The message indicates that the processed sketch file was successfully uploaded.

[0260] In this embodiment of the application, when displaying the information of successful upload and successful export, the two information can be displayed on the same interface or on different interfaces.

[0261] Based on the above embodiments, the embodiments of this application further include one or more of the following steps:

[0262] Preview the processed sketch file;

[0263] by Figure 2e For example, Figure 2e The interface shown provides a sub-interface 10L for the preview control, which allows the Sketch graphics program to automatically display the exported and processed Sketch graphics file after the preview control is triggered.

[0264] Sharing the processed sketch files, specifically including:

[0265] Copy the page link containing the processed sketch file and share that page link.

[0266] by Figure 2e For example, the sub-interface 10m displays a clickable copy link control. When the user clicks the copy link control, the Sketch graphics processing program can copy the link of the simplified and edited Sketch graphic file from the server, thus helping the user to paste the link into chat software, blogs, memos, etc., for themselves or others to view.

[0267] In this embodiment of the application, the controls for triggering the preview of the processed sketch graphic file and the controls for triggering the analysis of the processed sketch graphic file can be displayed on the same interface (e.g., Figure 2e The controls in the sub-interfaces 10L and 10m can also be displayed on different interfaces. This application embodiment does not make specific limitations.

[0268] Based on the above embodiments, as an optional embodiment, this application embodiment displays the information of successful upload, and then further includes: deleting the local simplified sketch graphic file.

[0269] In other words, in this embodiment of the application, after uploading the complete local sketch file to the cloud, the creator of the sketch file deletes the simplified local sketch file and keeps only the complete sketch file locally.

[0270] This application provides a sketch graphic file processing device, such as... Figure 5 As shown, the device may include: a file display module 101, a canvas selection module 102, and a file processing module 103, specifically:

[0271] The file display module 101 is used to display the sketch graphic file to be processed. The sketch graphic file to be processed includes page identifiers of one or more pages, and each page identifier includes one or more artboard identifiers.

[0272] The canvas selection module 102 is used to display the canvas corresponding to one or more target identifiers in response to a selection operation on the canvas identifiers.

[0273] The file processing module 103 is used to generate a processed sketch graphic file in response to a trigger operation on the export control, based on the canvas corresponding to the selected target identifier.

[0274] The sketch image file processing apparatus provided in this embodiment of the invention specifically executes the process described in the above method embodiment. For details, please refer to the content of the sketch image file processing method embodiment described above, which will not be repeated here. The apparatus provided in this embodiment of the invention displays a sketch image file to be processed. This sketch image file includes page identifiers for one or more pages, and each page identifier includes one or more canvas identifiers, allowing the user to select a target identifier from the canvas identifiers. This facilitates the user's confirmation of the canvas that can be displayed. In response to a trigger operation on the export control, a processed (simplified) sketch image file is generated based on the canvas corresponding to the selected target identifier. This embodiment of the application lays the foundation for subsequently meeting the user's need to selectively display (share) some canvases in a local sketch image file. It overcomes the shortcomings of existing technologies, which only allow browsing of layers in a sketch image file via a webpage after the sketch image file is uploaded to the cloud and cannot be edited, and which only allows obtaining the complete sketch file and cannot remove unwanted parts.

[0275] In one possible implementation, the file display module includes:

[0276] The first interface display submodule is used to display the sketch graphic file to be processed on the first interface;

[0277] The second interface creates a submodule to respond to trigger operations on the exported controls on the first interface and create the second interface.

[0278] The second interface display submodule is used to display the second interface and show page identifiers of one or more pages of the sketch graphic file to be processed in the second interface. Each page identifier includes one or more artboard identifiers.

[0279] The second interface displays an export control.

[0280] In one possible implementation, the file processing module includes:

[0281] The decompression submodule is used to decompress the sketch graphic file to be processed, and obtain the original metadata and page folder of the sketch graphic file to be processed;

[0282] The delete submodule is used to modify the original metadata and page folder based on the selected artboard, and obtain the modified metadata and page folder.

[0283] The compression submodule is used to compress the modified metadata and page folder to obtain the processed sketch file;

[0284] The original metadata includes the correspondence between pages and artboards in the sketch graphics file to be processed. The original page folder includes style information for one or more pages. The style information includes the unique identifier of the page, the page name, and the artboard data of the artboard in the page. The artboard data includes the unique identifier of the artboard, the artboard name, the artboard type, and the layer parameters in the artboard.

[0285] The modified metadata includes the correspondence between the target artboard and the page where the target artboard is located. The modified page folder includes the style information of the page where the target artboard is located. The target artboard includes the artboard corresponding to the selected target identifier and the artboard type is control type.

[0286] Deleting submodules includes:

[0287] The information generation unit is used to obtain the unique identifier of one or more pages, the page name, and the unique identifier and artboard name of the target artboard in each page, based on the page folder and the selection operation, so as to generate artboard selection information and page artboard information.

[0288] The metadata update unit is used to modify the original metadata based on the page canvas information and obtain the modified metadata.

[0289] The page folder update unit is used to modify the original page folder based on the canvas selection information and obtain the modified page folder.

[0290] The page canvas information includes the unique identifier and page name of each page in one or more pages, as well as the correspondence between the first correspondence information and the unique identifier and canvas name of the target canvas in each page.

[0291] The artboard selection information includes the correspondence between the unique identifier of each page in one or more pages and the unique identifier of the target artboard in each page.

[0292] In one possible implementation, the device for processing sketch graphics files also includes:

[0293] The data generation module is used to generate corresponding page data and canvas update data for each page in one or more pages, based on the page folder and the selection operation. The page data includes the page name and unique identifier of the page, and the canvas update data includes the canvas name, unique identifier, canvas type and whether it is selected for all canvases in the page.

[0294] The page data editing module is used to determine the canvas corresponding to the selected target identifier based on the canvas update data, and to store the unique identifier of the canvas corresponding to the selected target identifier and the canvas update data into the page data.

[0295] The information generation unit is specifically used to generate canvas selection information and page canvas information based on page data of one or more pages.

[0296] In one possible implementation, the information generation unit includes a canvas information generation subunit for generating page canvas information, the canvas information generation subunit including:

[0297] The first correspondence subunit is used to determine the unique identifier and canvas name of the target canvas in each of one or more pages, and to obtain the first correspondence information of the page.

[0298] The second correspondence subunit is used to obtain the second correspondence information of each page based on the unique identifier, page name and first correspondence information of each page. The second correspondence information includes the unique identifier, page name and correspondence between the first correspondence information of each page.

[0299] The first aggregation subunit is used to obtain page canvas information based on the second correspondence information of one or more pages.

[0300] In one possible implementation, the information generation unit includes a canvas selection generation subunit for generating canvas selection information, the canvas selection generation subunit comprising:

[0301] The identifier determines the sub-unit, which is used to determine the target artboard and its unique identifier for each page in one or more pages;

[0302] The third correspondence subunit is used to obtain the unique identifier of each page and the unique identifier of the target canvas in each page, and to obtain the third correspondence information of each page from the correspondence between the unique identifier of each page and the unique identifier of the target canvas in each page;

[0303] The second summary sub-unit is used to obtain canvas selection information based on the third correspondence information of one or more pages.

[0304] In one possible implementation, the canvas type is a control-type canvas, which is one or more layers in the canvas of the sketch graphic file to be processed that are pre-set as common components.

[0305] In one possible implementation, the canvas selection module includes a canvas display module for displaying the canvas corresponding to the target identifier. Specifically, the canvas display module is used to display one or more of the text descriptions and thumbnails of the canvas corresponding to the target identifier.

[0306] In one possible implementation, the sketch graphic file processing device may further include one or more of the following modules: an export success display module, used to display information that the processed sketch graphic file has been successfully exported;

[0307] The upload module is used to upload the processed sketch graphics files to the cloud.

[0308] The "Upload Successful Display" module displays information indicating that the processed sketch graphic file has been successfully uploaded.

[0309] In one possible implementation, the ketch graphic file processing device may further include one or more of the following modules:

[0310] The preview module is used to preview the processed sketch graphic file;

[0311] The sharing module is used to share processed sketch graphic files;

[0312] The sharing module is specifically used for:

[0313] Copy the page link containing the processed sketch file and share that page link.

[0314] This application provides an electronic device, which includes: a memory and a processor; one or more programs stored in the memory, which, when executed by the processor, can achieve the following compared to the prior art:

[0315] In one alternative embodiment, an electronic device is provided, such as Figure 6 As shown, Figure 6 The illustrated electronic device 4000 includes a processor 4001 and a memory 4003. The processor 4001 and the memory 4003 are connected, for example, via a bus 4002. Optionally, the electronic device 4000 may further include a transceiver 4004. It should be noted that in practical applications, the transceiver 4004 is not limited to one type, and the structure of this electronic device 4000 does not constitute a limitation on the embodiments of this application.

[0316] Processor 4001 may be a CPU (Central Processing Unit), a general-purpose processor, a DSP (Digital Signal Processor), an ASIC (Application Specific Integrated Circuit), an FPGA (Field Programmable Gate Array), or other programmable logic devices, transistor logic devices, hardware components, or any combination thereof. It can implement or execute the various exemplary logic blocks, modules, and circuits described in conjunction with the disclosure of this application. Processor 4001 may also be a combination that implements computational functions, such as including one or more microprocessor combinations, a combination of a DSP and a microprocessor, etc.

[0317] Bus 4002 may include a pathway for transmitting information between the aforementioned components. Bus 4002 may be a PCI (Peripheral Component Interconnect) bus or an EISA (Extended Industry Standard Architecture) bus, etc. Bus 4002 can be divided into address bus, data bus, control bus, etc. For ease of representation, Figure 6 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.

[0318] The memory 4003 may be ROM (Read Only Memory) or other types of static storage devices capable of storing static information and instructions, RAM (Random Access Memory) or other types of dynamic storage devices capable of storing information and instructions, or EEPROM (Electrically Erasable Programmable Read Only Memory), CD-ROM (Compact Disc Read Only Memory) or other optical disc storage, optical disc storage (including compressed optical discs, laser discs, optical discs, digital universal optical discs, Blu-ray discs, etc.), magnetic disk storage media or other magnetic storage devices, or any other medium capable of carrying or storing desired program code in the form of instructions or data structures and accessible by a computer, but not limited thereto.

[0319] The memory 4003 stores application code that executes the scheme of this application, and its execution is controlled by the processor 4001. The processor 4001 executes the application code stored in the memory 4003 to implement the content shown in the foregoing method embodiments.

[0320] This application provides a computer-readable storage medium storing a computer program that, when run on a computer, enables the computer to execute the corresponding content in the aforementioned method embodiments. Compared with the prior art, by displaying a sketch graphic file to be processed, which includes page identifiers for one or more pages, and each page identifier including one or more artboard identifiers, allowing the user to select a target identifier from the artboard identifiers, the user can easily confirm which artboard can be displayed. In response to a trigger operation on the export control, a processed (simplified) sketch graphic file is generated based on the artboard corresponding to the selected target identifier. This application lays the foundation for subsequently meeting the user's need to selectively display (share) some artboards in a local sketch graphic file. It overcomes the shortcomings of the prior art, which only allows browsing and editing of layers in a sketch graphic file via a webpage after the sketch graphic file is uploaded to the cloud, and which only allows obtaining the complete sketch file without removing unwanted parts.

[0321] This application provides a computer program including computer instructions stored in a computer-readable storage medium. When a processor of a computer device reads the computer instructions from the computer-readable storage medium, the processor executes the computer instructions, causing the computer device to perform the content shown in the foregoing method embodiments. Compared with the prior art, by displaying a sketch graphic file to be processed, which includes page identifiers for one or more pages, and each page identifier including one or more artboard identifiers, allowing the user to select a target identifier from the artboard identifiers, the user can easily confirm which artboard can be displayed. By responding to a trigger operation on the export control, a processed (simplified) sketch graphic file is generated according to the artboard corresponding to the selected target identifier. This application lays the foundation for subsequently meeting the user's need to selectively display (share) some artboards in a local sketch graphic file, overcoming the shortcomings of the prior art, which can only browse the layers in the sketch graphic file through a webpage after the sketch graphic file is uploaded to the cloud and cannot be edited, and can only obtain the complete sketch file and cannot remove the parts that are not wanted to be displayed.

[0322] It should be understood that although the steps in the flowcharts of the accompanying figures are shown sequentially as indicated by the arrows, these steps are not necessarily executed in the order indicated by the arrows. Unless explicitly stated herein, there is no strict order restriction on the execution of these steps, and they can be executed in other orders. Moreover, at least some steps in the flowcharts of the accompanying figures may include multiple sub-steps or multiple stages. These sub-steps or stages are not necessarily completed at the same time, but can be executed at different times, and their execution order is not necessarily sequential, but can be performed alternately or in turn with other steps or at least some of the sub-steps or stages of other steps.

[0323] The above are only some embodiments of the present invention. It should be noted that for those skilled in the art, several improvements and modifications can be made without departing from the principle of the present invention, and these improvements and modifications should also be considered within the scope of protection of the present invention.

Claims

1. A method for processing sketch graphic files, characterized in that, The method, executed by a terminal of a first user running the Sketch graphics processing program, includes: Display local sketch files to be processed. These sketch files include page identifiers for one or more pages, and each page identifier includes artboard identifiers for one or more artboards. In response to a selection operation on one or more target identifiers among the canvas identifiers, the canvas corresponding to the target identifier is displayed, and the canvas corresponding to the target identifier is a canvas that can be displayed to other users; In response to a trigger operation on the export control, a processed sketch file is generated based on the artboard corresponding to the selected target identifier. The processed sketch file does not include the artboard corresponding to the unselected target artboard identifier or the artboard of the control type in the sketch file to be processed. The artboard of the control type is a layer of a common component that is pre-set in the artboard of the sketch file to be processed. The processed sketch file is uploaded to a shared server so that other users can download, view, and edit the processed sketch file on the server. The sketch file to be processed is kept locally, and the processed sketch file is deleted.

2. The method for processing sketch graphic files according to claim 1, characterized in that, The display of local sketch graphics files to be processed includes: The first interface displays the sketch file to be processed; In response to a trigger operation on the export control on the first interface, a second interface is created; The second interface is displayed, and page identifiers of one or more pages of the sketch graphic file to be processed are displayed in the second interface, with each page identifier including one or more canvas identifiers; The second interface displays an export control.

3. The method for processing sketch graphic files according to claim 1 or 2, characterized in that, The generated processed sketch file includes: Unzip the sketch image file to be processed to obtain the original metadata and page folder of the sketch image file to be processed; Modify the original metadata and page folder based on the selected canvas to obtain the modified metadata and page folder; The modified metadata and page folder are compressed to obtain the processed sketch image file; The original metadata includes the correspondence between pages and artboards in the sketch graphic file to be processed. The original page folder includes style information of one or more pages. The style information includes the unique identifier of the page, the page name, and the artboard data of the artboard in the page. The artboard data includes the unique identifier of the artboard, the artboard name, the artboard type, and the layer parameters in the artboard. The modified metadata includes the correspondence between the target canvas and the page where the target canvas is located, and the modified page folder includes the style information of the page where the target canvas is located; the target canvas includes the canvas corresponding to the selected target identifier and the canvas type is control type.

4. The method for processing sketch graphic files according to claim 3, characterized in that, The step of modifying the original metadata and page folder based on the selected canvas to obtain the modified metadata and page folder includes: Based on the page folder and the selection operation, obtain the unique identifier, page name, and unique identifier and artboard name of the target artboard in each page to generate artboard selection information and page artboard information; Modify the original metadata based on the page canvas information to obtain the modified metadata; Modify the original page folder according to the canvas selection information to obtain the modified page folder; The page canvas information includes the correspondence between the unique identifier of each page in the one or more pages and the page name and the first correspondence information, wherein the first correspondence information includes the correspondence between the unique identifier of the target canvas in each page and the canvas name; The canvas selection information includes the correspondence between the unique identifier of each page in the one or more pages and the unique identifier of the target canvas in each page.

5. The method for processing sketch graphic files according to claim 4, characterized in that, The process of generating canvas selection information and page canvas information previously included: For each of the one or more pages, corresponding page data and canvas update data are generated based on the page folder and the selection operation. The page data includes the page name and unique identifier of the page, and the canvas update data includes the canvas name, unique identifier, canvas type, and whether the canvas is selected for all canvases on the page. The canvas corresponding to the selected target identifier is determined based on the canvas update data, and the unique identifier of the canvas corresponding to the selected target identifier and the canvas update data are both stored in the page data. The generated canvas selection information and page canvas information include: Based on the page data of the one or more pages, generate the canvas selection information and page canvas information.

6. The method for processing sketch graphic files according to claim 4 or 5, characterized in that, Generate page canvas information, including: For each of the one or more pages, determine the unique identifier and canvas name of the target canvas in each page, and obtain the first correspondence information of the page; Based on the unique identifier, page name, and first correspondence information of each page, a second correspondence information of each page is obtained, wherein the second correspondence information includes the unique identifier, page name, and correspondence between the first correspondence information of each page; The page canvas information is obtained based on the second correspondence information of the one or more pages.

7. The method for processing sketch graphic files according to claim 4 or 5, characterized in that, Generate canvas selection information, including: For each of the one or more pages, determine the target canvas in each page and the unique identifier of the target canvas; Obtain the unique identifier of each page and the unique identifier of the target canvas in each page, and obtain the third correspondence information of each page from the correspondence between the unique identifier of each page and the unique identifier of the target canvas in each page; The canvas selection information is obtained based on the third correspondence information of the one or more pages.

8. The method for processing sketch graphic files according to claim 1, characterized in that, The canvas that displays the target identifier includes: Display one or more of the text descriptions and thumbnails of the canvas corresponding to the target identifier.

9. The method for processing sketch graphic files according to claim 1, characterized in that, The method also includes one or more of the following steps: The system displays a message indicating that the processed sketch file has been successfully exported. Upload the processed sketch file to the cloud; The message indicates that the processed sketch file has been successfully uploaded.

10. The method for processing sketch graphic files according to claim 1, characterized in that, The method also includes one or more of the following steps: Preview the processed sketch file; Share the processed sketch file; The sharing of the processed sketch file includes: Copy the page link containing the processed sketch file and share that page link.

11. A processing apparatus for sketch graphic files, characterized in that, The device, located on a terminal of a first user running a Sketch graphics processing program, includes: The file display module is used to display the sketch graphic file to be processed. The sketch graphic file to be processed includes page identifiers of one or more pages, and each page identifier includes artboard identifiers of one or more artboards. The canvas selection module is used to respond to a selection operation on one or more target identifiers among the canvas identifiers, and to display the canvas corresponding to the target identifier, wherein the canvas corresponding to the target identifier is a canvas that can be displayed to other users; The file processing module is used to respond to a trigger operation on the export control, generate a processed sketch file according to the artboard corresponding to the selected target identifier, the processed sketch file does not include the artboard corresponding to the unselected target artboard identifier in the sketch file to be processed, or the artboard of the control type, the artboard of the control type is a layer of the artboard of the sketch file to be processed that is pre-set as a public component; upload the processed sketch file to the server for sharing, so that other users can download, view and edit the processed sketch file on the server; retain the sketch file to be processed locally, and delete the processed sketch file.

12. 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 program, it implements the steps of the sketch graphic file processing method as described in any one of claims 1 to 10.

13. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores computer instructions that cause the computer to perform the steps of the method for processing a sketch graphic file as described in any one of claims 1 to 10.

14. A computer program, characterized in that, The computer program includes computer instructions stored in a computer-readable storage medium. When a processor of a computer device reads the computer instructions from the computer-readable storage medium, the processor executes the computer instructions, causing the computer device to perform the steps of the sketch graphic file processing method as described in any one of claims 1-10.

Images