CN117311976A - 一种矢量图形文件处理方法、装置、设备及存储介质 - Google Patents

一种矢量图形文件处理方法、装置、设备及存储介质 Download PDF

Info

Publication number
CN117311976A
CN117311976A CN202311342895.2A CN202311342895A CN117311976A CN 117311976 A CN117311976 A CN 117311976A CN 202311342895 A CN202311342895 A CN 202311342895A CN 117311976 A CN117311976 A CN 117311976A
Authority
CN
China
Prior art keywords
file
code
target
vite
page development
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202311342895.2A
Other languages
English (en)
Inventor
吴剑飞
孙勇军
王志伟
周斌
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Shanghai Shizhuang Information Technology Co ltd
Original Assignee
Shanghai Shizhuang Information Technology Co ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Shanghai Shizhuang Information Technology Co ltd filed Critical Shanghai Shizhuang Information Technology Co ltd
Priority to CN202311342895.2A priority Critical patent/CN117311976A/zh
Publication of CN117311976A publication Critical patent/CN117311976A/zh
Pending legal-status Critical Current

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/46—Multiprogramming arrangements
    • G06F9/50—Allocation of resources, e.g. of the central processing unit [CPU]
    • G06F9/5005—Allocation of resources, e.g. of the central processing unit [CPU] to service a request
    • G06F9/5027—Allocation of resources, e.g. of the central processing unit [CPU] to service a request the resource being a machine, e.g. CPUs, Servers, Terminals
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/34—Graphical or visual programming
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/445—Program loading or initiating
    • G06F9/44505—Configuring for program initiating, e.g. using registry, configuration files
    • G06F9/4451—User profiles; Roaming

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • Information Retrieval, Db Structures And Fs Structures Therefor (AREA)

Abstract

本发明公开了一种矢量图形文件处理方法、装置、设备及存储介质。该方法包括获取目标页面开发项目的目标配置文件；根据目标配置文件中引入的预创建vite插件从目标页面开发项目对应的代码文件中读取矢量图形文件代码，并将矢量图形文件代码转换为react组件代码；将react组件代码注入到目标页面开发项目对应的代码文件中以实现在目标页面开发时组件化引入矢量图形。本发明的技术方案将svg组件化引入react项目，提高代码的可维护性和可重用性，并有效减少网络请求的数量以减小服务器压力。

Description

一种矢量图形文件处理方法、装置、设备及存储介质
技术领域
本发明涉及前端项目技术领域，尤其涉及一种矢量图形文件处理方法、装置、设备及存储介质。
背景技术
在一般的React项目开发过程中，若能将svg(Scalable Vector Graphics，可缩放矢量图形)当做一个组件来引入，这样可以很方便地修改svg的各种属性。现有在React应用中，通常使用img标签或CSS(Cascading Style Sheets，层叠样式表)background-image属性来加载svg图形。但这些方法不能很好地与React应用的组件化和模块化特性配合使用，导致svg代码的可维护性和可重用性较低；且每个svg图像都需要生成一个单独的网络请求，在svg数量较多时容易导致服务器压力增大。
发明内容
本发明提供了一种矢量图形文件处理方法、装置、设备及存储介质，以提高代码的可维护性和可重用性，并有效减少网络请求的数量以减小服务器压力。
根据本发明的一方面，提供了一种矢量图形文件处理方法，包括：
获取目标页面开发项目的目标配置文件；
根据所述目标配置文件中引入的预创建vite插件从所述目标页面开发项目对应的代码文件中读取矢量图形文件代码，并将所述矢量图形文件代码转换为react组件代码；
将所述react组件代码注入到所述目标页面开发项目对应的代码文件中以实现在目标页面开发时组件化引入矢量图形。
根据本发明的另一方面，提供了一种矢量图形文件处理装置，包括：
目标配置文件获取模块，用于获取目标页面开发项目的目标配置文件；
代码转换模块，用于根据所述目标配置文件中引入的预创建vite插件从所述目标页面开发项目对应的代码文件中读取矢量图形文件代码，并将所述矢量图形文件代码转换为react组件代码；
代码注入模块，将所述react组件代码注入到所述项目代码文件中。
根据本发明的另一方面，提供了一种电子设备，所述电子设备包括：
至少一个处理器；以及
与所述至少一个处理器通信连接的存储器；其中，
所述存储器存储有可被所述至少一个处理器执行的计算机程序，所述计算机程序被所述至少一个处理器执行，以使所述至少一个处理器能够执行本发明任一实施例所述的矢量图形文件处理方法。
根据本发明的另一方面，提供了一种计算机可读存储介质，所述计算机可读存储介质存储有计算机指令，所述计算机指令用于使处理器执行时实现本发明任一实施例所述的矢量图形文件处理方法。
本发明实施例的技术方案，通过获取目标页面开发项目的目标配置文件；根据目标配置文件中引入的预创建vite插件从目标页面开发项目对应的代码文件中读取矢量图形文件代码，并将矢量图形文件代码转换为react组件代码；将react组件代码注入到目标页面开发项目对应的代码文件中以实现在目标页面开发时组件化引入矢量图形，解决了现有技术中使用img标签或CSS background-image属性来加载svg图形，导致svg代码的可维护性和可重用性较低且在svg数量较多时造成网络请求数量多容易导致服务器压力增大的问题，将svg组件化引入react项目，提高代码的可维护性和可重用性，并有效减少网络请求的数量以减小服务器压力。
应当理解，本部分所描述的内容并非旨在标识本发明的实施例的关键或重要特征，也不用于限制本发明的范围。本发明的其它特征将通过以下的说明书而变得容易理解。
附图说明
为了更清楚地说明本发明实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1为本发明实施例一提供的一种矢量图形文件处理方法的流程图；
图2为本发明实施例二提供的一种矢量图形文件处理装置的结构示意图；
图3是实现本发明实施例的矢量图形文件处理方法的电子设备的结构示意图。
具体实施方式
为了使本技术领域的人员更好地理解本发明方案，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分的实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本发明保护的范围。
需要说明的是，本发明的说明书和权利要求书及上述附图中的术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。
实施例一
图1为本发明实施例一提供的一种矢量图形文件处理方法的流程图，本实施例可适用于在react项目开发过程中将svg作为组件引入的情况，该方法可以由矢量图形文件处理装置来执行，该矢量图形文件处理装置可以采用硬件和/或软件的形式实现，该矢量图形文件处理装置可配置于服务器中。如图1所示，该方法包括：
S110、获取目标页面开发项目的目标配置文件。
其中，目标页面开发项目可以指react项目。目标配置文件可以指针对react项目，且通过vite配置文件(如vite.config.js)实现的配置文件。
本实施例中，为在react项目中以组件形式引入svg，可以先实现配置文件，从而通过运行配置文件使用vite插件实现svg文件组件化。
可选的，获取目标页面开发项目的目标配置文件，可以包括：在vite配置文件中将预创建插件的名称配置至导入指定模块，并在vite配置文件的导出模块根据用户需求配置插件数组，得到目标配置文件。
其中，预创建插件可以指预先创建的可以实现svg组件化的vite插件。以vite.config.js这个vite配置文件为例，导入指定模块可以指const.require，导出模块可以指module.exports，插件数组可以指plugins:[]。
示例性的，通过vite配置文件(如vite.config.js)中使用预创建的vite插件的配置文件代码可以如下：
其中，plugin-svg-to-react-component即为预创建vite插件的名称。@svgr/plugin-svgo和@svgr/plugin-jsx即为根据用户需求配置插件数组。
在运行目标配置文件，调用plugin-svg-to-react-component这个插件时，可以将svg转化成react组件。
S120、根据目标配置文件中引入的预创建vite插件从目标页面开发项目对应的代码文件中读取矢量图形文件代码，并将矢量图形文件代码转换为react组件代码。
可选的，在根据目标配置文件中引入的预创建vite插件从目标页面开发项目对应的代码文件中读取矢量图形文件代码，并将矢量图形文件代码转换为react组件代码之前，还包括：安装目标依赖包。
示例性的，可以通过npminstall@svgr/core--save-dev命令安装@svgr/core依赖。
示例性的，预创建vite插件的代码可以如下：
一个可选实施方式中，根据目标配置文件中引入的预创建vite插件从目标页面开发项目对应的代码文件中读取矢量图形文件代码，可以包括：获取目标页面开发项目对应的代码文件；根据预创建vite插件的转换钩子函数，从代码文件中识别文件扩展名，并根据文件扩展名从代码文件中读取矢量图形文件代码。
可以理解，运行上述预创建vite插件的代码，可以利用transform钩子函数从目标页面开发项目的代码文件中识别.svg这个文件扩展名，从而根据.svg这个扩展名从目标页面开发项目的代码文件中读取矢量图形svg文件的代码内容。
相应的，将矢量图形文件代码转换为react组件代码，可以包括：利用目标依赖包将矢量图形文件代码转换为react组件代码；具体的，利用目标依赖包将矢量图形文件代码转换为react组件代码，可以包括：利用目标依赖包对应的第三方工具函数库将矢量图形文件代码转换为JSX代码；利用指定类型React元素创建函数将JSX代码创建为react组件。
基于上述预创建vite插件的代码，可以理解，利用目标依赖包@svgr/core将svg代码转换为JSX代码，进而利用React.createElement函数将JSX代码创建为react组件。
S130、将react组件代码注入到目标页面开发项目对应的代码文件中以实现在目标页面开发时组件化引入矢量图形。
需要说明，本实施例通过使用svg组件形式加载的vite插件，可以将svg文件转换为React组件，让开发者可以更好地将svg图形和应用程序的其他组件进行集成和管理。这使得开发者可以更好地实现组件化和模块化，提高代码的可维护性和可重用性。
本实施例使用svg组件形式加载的vite插件可以自动将svg文件转换为React组件，并将其打包到项目中。这消除了手动编写和配置svg文件的需要，提高了开发效率。
现有技术在使用标准`<img>`标签或CSS`background-image`的方式加载svg图像时，每个svg图像都需要生成一个单独的网络请求。本实施例使用svg组件形式加载的vite插件可以将svg文件打包到应用程序中，以减少网络请求。
本实施例通过使用svg组件形式加载的vite插件，开发者可以将svg图像作为React组件在应用程序中使用，而不是只能简单地展示它们。本实施例plugin-svg-to-react-component的vite插件将svg图像转化为react组件之后，开发就可以像其他的react组件来使用svg组件，可以通过props来传递自定义属性，以便根据开发者的需要改变SVG的样式和显示内容。这意味着开发者可以轻松地自定义这些图像以及它们所呈现的内容，而不需要回到原始svg文件中来调整。
本实施例的技术方案，通过获取目标页面开发项目的目标配置文件；根据目标配置文件中引入的预创建vite插件从目标页面开发项目对应的代码文件中读取矢量图形文件代码，并将矢量图形文件代码转换为react组件代码；将react组件代码注入到目标页面开发项目对应的代码文件中以实现在目标页面开发时组件化引入矢量图形，解决了现有技术中使用img标签或CSS background-image属性来加载svg图形，导致svg代码的可维护性和可重用性较低且在svg数量较多时造成网络请求数量多容易导致服务器压力增大的问题，将svg组件化引入react项目，提高代码的可维护性和可重用性，并有效减少网络请求的数量以减小服务器压力。
实施例二
图2为本发明实施例二提供的一种矢量图形文件处理装置的结构示意图。如图2所示，该装置包括：目标配置文件获取模块210、代码转换模块220和代码注入模块230。其中：
目标配置文件获取模块210，用于获取目标页面开发项目的目标配置文件；
代码转换模块220，用于根据所述目标配置文件中引入的预创建vite插件从所述目标页面开发项目对应的代码文件中读取矢量图形文件代码，并将所述矢量图形文件代码转换为react组件代码；
代码注入模块230，将所述react组件代码注入到所述项目代码文件中。
本实施例的技术方案，通过获取目标页面开发项目的目标配置文件；根据目标配置文件中引入的预创建vite插件从目标页面开发项目对应的代码文件中读取矢量图形文件代码，并将矢量图形文件代码转换为react组件代码；将react组件代码注入到目标页面开发项目对应的代码文件中以实现在目标页面开发时组件化引入矢量图形，解决了现有技术中使用img标签或CSS background-image属性来加载svg图形，导致svg代码的可维护性和可重用性较低且在svg数量较多时造成网络请求数量多容易导致服务器压力增大的问题，将svg组件化引入react项目，提高代码的可维护性和可重用性，并有效减少网络请求的数量以减小服务器压力。
可选的，目标配置文件获取模块210，具体可以用于：
在vite配置文件中将所述预创建插件的名称配置至导入指定模块，并在所述vite配置文件的导出模块根据用户需求配置插件数组，获取所述目标配置文件。
可选的，代码转换模块220，可以包括，矢量图形文件代码读取单元，用于：
获取所述目标页面开发项目对应的代码文件；
根据所述预创建vite插件的转换钩子函数，从所述代码文件中识别文件扩展名，并根据所述文件扩展名从所述代码文件中读取矢量图形文件代码。
可选的，矢量图形文件处理装置，还包括依赖包安装模块，用于在根据所述目标配置文件中引入的预创建vite插件从所述目标页面开发项目对应的代码文件中读取矢量图形文件代码，并将所述矢量图形文件代码转换为react组件代码之前：
安装目标依赖包；
相应的，代码转换模块220，还可以包括，代码转换单元，用于：
利用所述目标依赖包将所述矢量图形文件代码转换为react组件代码。
可选的，代码转换单元，具体可以用于：
利用所述目标依赖包对应的第三方工具函数库将所述矢量图形文件代码转换为JSX代码；
利用指定类型React元素创建函数将所述JSX代码创建为react组件。
本发明实施例所提供的矢量图形文件处理装置可执行本发明任意实施例所提供的矢量图形文件处理方法，具备执行方法相应的功能模块和有益效果。
实施例三
图3示出了可以用来实施本发明的实施例的电子设备300的结构示意图。电子设备旨在表示各种形式的数字计算机、各种形式的移动装置和其它类似的计算装置。本文所示的部件、它们的连接和关系、以及它们的功能仅仅作为示例，并且不意在限制本文中描述的和/或者要求的本发明的实现。
如图3所示，电子设备300包括至少一个处理器301，以及与至少一个处理器301通信连接的存储器，如只读存储器(ROM)302、随机访问存储器(RAM)303等，其中，存储器存储有可被至少一个处理器执行的计算机程序，处理器301可以根据存储在只读存储器(ROM)302中的计算机程序或者从存储单元308加载到随机访问存储器(RAM)303中的计算机程序，来执行各种适当的动作和处理。在RAM 303中，还可存储电子设备300操作所需的各种程序和数据。处理器301、ROM 302以及RAM 303通过总线304彼此相连。输入/输出(I/O)接口305也连接至总线304。
电子设备300中的多个部件连接至I/O接口305，包括：输入单元306，例如键盘、鼠标等；输出单元307，例如各种类型的显示器、扬声器等；存储单元308，例如磁盘、光盘等；以及通信单元309，例如网卡、调制解调器、无线通信收发机等。通信单元309允许电子设备300通过诸如因特网的计算机网络和/或各种电信网络与其他设备交换信息/数据。
处理器301可以是各种具有处理和计算能力的通用和/或专用处理组件。处理器301的一些示例包括但不限于中央处理单元(CPU)、图形处理单元(GPU)、各种专用的人工智能(AI)计算芯片、各种运行机器学习模型算法的处理器、数字信号处理器(DSP)、以及任何适当的处理器、控制器、微控制器等。处理器301执行上文所描述的各个方法和处理，例如矢量图形文件处理方法。
在一些实施例中，矢量图形文件处理方法可被实现为计算机程序，其被有形地包含于计算机可读存储介质，例如存储单元308。在一些实施例中，计算机程序的部分或者全部可以经由ROM 302和/或通信单元309而被载入和/或安装到电子设备300上。当计算机程序加载到RAM 303并由处理器301执行时，可以执行上文描述的矢量图形文件处理方法的一个或多个步骤。备选地，在其他实施例中，处理器301可以通过其他任何适当的方式(例如，借助于固件)而被配置为执行矢量图形文件处理方法。
本文中以上描述的系统和技术的各种实施方式可以在数字电子电路系统、集成电路系统、场可编程门阵列(FPGA)、专用集成电路(ASIC)、专用标准产品(ASSP)、芯片上系统的系统(SOC)、负载可编程逻辑设备(CPLD)、计算机硬件、固件、软件、和/或它们的组合中实现。这些各种实施方式可以包括：实施在一个或者多个计算机程序中，该一个或者多个计算机程序可在包括至少一个可编程处理器的可编程系统上执行和/或解释，该可编程处理器可以是专用或者通用可编程处理器，可以从存储系统、至少一个输入装置、和至少一个输出装置接收数据和指令，并且将数据和指令传输至该存储系统、该至少一个输入装置、和该至少一个输出装置。
用于实施本发明的方法的计算机程序可以采用一个或多个编程语言的任何组合来编写。这些计算机程序可以提供给通用计算机、专用计算机或其他可编程数据处理装置的处理器，使得计算机程序当由处理器执行时使流程图和/或框图中所规定的功能/操作被实施。计算机程序可以完全在机器上执行、部分地在机器上执行，作为独立软件包部分地在机器上执行且部分地在远程机器上执行或完全在远程机器或服务器上执行。
在本发明的上下文中，计算机可读存储介质可以是有形的介质，其可以包含或存储以供指令执行系统、装置或设备使用或与指令执行系统、装置或设备结合地使用的计算机程序。计算机可读存储介质可以包括但不限于电子的、磁性的、光学的、电磁的、红外的、或半导体系统、装置或设备，或者上述内容的任何合适组合。备选地，计算机可读存储介质可以是机器可读信号介质。机器可读存储介质的更具体示例会包括基于一个或多个线的电气连接、便携式计算机盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦除可编程只读存储器(EPROM或快闪存储器)、光纤、便捷式紧凑盘只读存储器(CD-ROM)、光学储存设备、磁储存设备、或上述内容的任何合适组合。
为了提供与用户的交互，可以在电子设备上实施此处描述的系统和技术，该电子设备具有：用于向用户显示信息的显示装置(例如，CRT(阴极射线管)或者LCD(液晶显示器)监视器)；以及键盘和指向装置(例如，鼠标或者轨迹球)，用户可以通过该键盘和该指向装置来将输入提供给电子设备。其它种类的装置还可以用于提供与用户的交互；例如，提供给用户的反馈可以是任何形式的传感反馈(例如，视觉反馈、听觉反馈、或者触觉反馈)；并且可以用任何形式(包括声输入、语音输入或者、触觉输入)来接收来自用户的输入。
可以将此处描述的系统和技术实施在包括后台部件的计算系统(例如，作为数据服务器)、或者包括中间件部件的计算系统(例如，应用服务器)、或者包括前端部件的计算系统(例如，具有图形用户界面或者网络浏览器的用户计算机，用户可以通过该图形用户界面或者该网络浏览器来与此处描述的系统和技术的实施方式交互)、或者包括这种后台部件、中间件部件、或者前端部件的任何组合的计算系统中。可以通过任何形式或者介质的数字数据通信(例如，通信网络)来将系统的部件相互连接。通信网络的示例包括：局域网(LAN)、广域网(WAN)、区块链网络和互联网。
计算系统可以包括客户端和服务器。客户端和服务器一般远离彼此并且通常通过通信网络进行交互。通过在相应的计算机上运行并且彼此具有客户端-服务器关系的计算机程序来产生客户端和服务器的关系。服务器可以是云服务器，又称为云计算服务器或云主机，是云计算服务体系中的一项主机产品，以解决了传统物理主机与VPS服务中，存在的管理难度大，业务扩展性弱的缺陷。
应该理解，可以使用上面所示的各种形式的流程，重新排序、增加或删除步骤。例如，本发明中记载的各步骤可以并行地执行也可以顺序地执行也可以不同的次序执行，只要能够实现本发明的技术方案所期望的结果，本文在此不进行限制。
上述具体实施方式，并不构成对本发明保护范围的限制。本领域技术人员应该明白的是，根据设计要求和其他因素，可以进行各种修改、组合、子组合和替代。任何在本发明的精神和原则之内所作的修改、等同替换和改进等，均应包含在本发明保护范围之内。

Claims (10)

1.一种矢量图形文件处理方法，其特征在于，包括：
获取目标页面开发项目的目标配置文件；
根据所述目标配置文件中引入的预创建vite插件从所述目标页面开发项目对应的代码文件中读取矢量图形文件代码，并将所述矢量图形文件代码转换为react组件代码；
将所述react组件代码注入到所述目标页面开发项目对应的代码文件中以实现在目标页面开发时组件化引入矢量图形。
2.根据权利要求1所述的方法，其特征在于，获取目标页面开发项目的目标配置文件，包括：
在vite配置文件中将所述预创建插件的名称配置至导入指定模块，并在所述vite配置文件的导出模块根据用户需求配置插件数组，得到所述目标配置文件。
3.根据权利要求1所述的方法，其特征在于，根据所述目标配置文件中引入的预创建vite插件从所述目标页面开发项目对应的代码文件中读取矢量图形文件代码，包括：
获取所述目标页面开发项目对应的代码文件；
根据所述预创建vite插件的转换钩子函数，从所述代码文件中识别文件扩展名，并根据所述文件扩展名从所述代码文件中读取矢量图形文件代码。
4.根据权利要求1所述的方法，其特征在于，在根据所述目标配置文件中引入的预创建vite插件从所述目标页面开发项目对应的代码文件中读取矢量图形文件代码，并将所述矢量图形文件代码转换为react组件代码之前，还包括：
安装目标依赖包；
将所述矢量图形文件代码转换为react组件代码，包括：
利用所述目标依赖包将所述矢量图形文件代码转换为react组件代码。
5.根据权利要求4所述的方法，其特征在于，利用所述目标依赖包将所述矢量图形文件代码转换为react组件代码，包括：
利用所述目标依赖包对应的第三方工具函数库将所述矢量图形文件代码转换为JSX代码；
利用指定类型React元素创建函数将所述JSX代码创建为react组件。
6.一种矢量图形文件处理装置，其特征在于，包括：
目标配置文件获取模块，用于获取目标页面开发项目的目标配置文件；
代码转换模块，用于根据所述目标配置文件中引入的预创建vite插件从所述目标页面开发项目对应的代码文件中读取矢量图形文件代码，并将所述矢量图形文件代码转换为react组件代码；
代码注入模块，将所述react组件代码注入到所述项目代码文件中。
7.根据权利要求6所述的装置，其特征在于，目标配置文件获取模块，具体用于：
在vite配置文件中将所述预创建插件的名称配置至导入指定模块，并在所述vite配置文件的导出模块根据用户需求配置插件数组，获取所述目标配置文件。
8.根据权利要求6所述的装置，其特征在于，代码转换模块，具体用于：
获取所述目标页面开发项目对应的代码文件；
根据所述预创建vite插件的转换钩子函数，从所述代码文件中识别文件扩展名，并根据所述文件扩展名从所述代码文件中读取矢量图形文件代码。
9.一种电子设备，其特征在于，所述电子设备包括：
至少一个处理器；以及
与所述至少一个处理器通信连接的存储器；其中，
所述存储器存储有可被所述至少一个处理器执行的计算机程序，所述计算机程序被所述至少一个处理器执行，以使所述至少一个处理器能够执行权利要求1-5中任一项所述的矢量图形文件处理方法。
10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有计算机指令，所述计算机指令用于使处理器执行时实现权利要求1-5中任一项所述的矢量图形文件处理方法。
CN202311342895.2A 2023-10-16 2023-10-16 一种矢量图形文件处理方法、装置、设备及存储介质 Pending CN117311976A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202311342895.2A CN117311976A (zh) 2023-10-16 2023-10-16 一种矢量图形文件处理方法、装置、设备及存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202311342895.2A CN117311976A (zh) 2023-10-16 2023-10-16 一种矢量图形文件处理方法、装置、设备及存储介质

Publications (1)

Publication Number Publication Date
CN117311976A true CN117311976A (zh) 2023-12-29

Family

ID=89242429

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202311342895.2A Pending CN117311976A (zh) 2023-10-16 2023-10-16 一种矢量图形文件处理方法、装置、设备及存储介质

Country Status (1)

Country Link
CN (1) CN117311976A (zh)

Similar Documents

Publication Publication Date Title
WO2018205730A1 (zh) 在区块链中获得智能合约接口的方法和设备
CN108984388B (zh) 一种生成自动化测试用例的方法及终端设备
CN113808231B (zh) 信息处理方法及装置、图像渲染方法及装置、电子设备
CN113377653B (zh) 生成测试用例的方法和装置
CN109582317B (zh) 用于调试寄宿应用的方法和装置
CN113050940A (zh) 小程序的预览方法、相关装置及计算机程序产品
CN113626223A (zh) 一种接口调用方法和装置
CN112433713A (zh) 一种应用程序设计图处理方法和装置
CN113836462A (zh) 页面描述文件的生成方法、装置、设备及存储介质
US20190196794A1 (en) Visual programming method, system and terminal device
CN111190750A (zh) 一种数据处理方法以及系统
CN116362216A (zh) 表单数据处理的方法、装置、电子设备和存储介质
CN115904240A (zh) 数据处理方法、装置、电子设备和存储介质
CN117311976A (zh) 一种矢量图形文件处理方法、装置、设备及存储介质
CN113515271B (zh) 服务代码生成方法、装置、电子设备及可读存储介质
CN115577689A (zh) 一种表格组件的生成方法、装置、设备及介质
CN113157360B (zh) 用于处理api的方法、装置、设备、介质和产品
CN113835893B (zh) 数据处理的方法、装置、设备、存储介质及程序产品
CN117931155A (zh) 一种代码生成方法、装置、设备及介质
CN116166253A (zh) 一种车辆域间通信方法、数据网关、设备及存储介质
CN115600029A (zh) 一种网页页面的显示方法、装置、系统、设备及存储介质
CN116541417A (zh) 批量数据处理方法、装置、计算机设备及存储介质
CN116521170A (zh) 一种客户端原生应用的转化方法、装置、设备及介质
CN117931506A (zh) 一种文档校验方法、装置、设备以及存储介质
CN118069131A (zh) 组件化的界面主题生成方法、装置、设备及介质

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination