发明内容
基于上述目的,根据本申请的第一个方面,本申请提出了一种基于Flutter实现字体图标渲染的方法,包括:
在云端服务器创建远程云端字体图标库;
初始化所述云端字体图标库;
从所述云端字体图标库下载渲染文件到本地服务器;
对所述渲染文件进行归类和配置;
将本地服务器的静态资源字体导入所述归类和配置之后的渲染文件中,得到渲染后的字体图标。
进一步地,所述在云端服务器创建远程云端字体图标库,包括:
在云端服务器配置字体图标库空间,通过提交时标签定义实现图标库文件自动归类,统一规范命名、配置角色权限、更新和操作机制;
提供在线多文件格式自动转换字体图标功能。
进一步地,所述初始化所述云端字体图标库,包括:
整理高频使用的Ps源文件中未栅格化且有路径点的图片;
通过在线转换功能批量将原有图片进行字体图标自动转换;
使用AI工具绘制初始画布,使用钢笔工具绘制对应的线性和填充性图版;
导出字体图标代码,输出使用方法和规范说明书,并提交云端字体图标库。
进一步地,所述渲染文件为ttf文件或index文件。
进一步地,对所述渲染文件进行归类和配置,包括:
将下载的渲染文件放置在fonts文件夹下,与lib文件同级;
在yaml文件中配置并执行pub get。
进一步地,所述将本地服务器的静态资源字体导入所述归类和配置之后的渲染文件中,得到渲染后的字体图标,包括:
整理本地服务器的静态资源字体:
在所述渲染文件中,导入本地服务器封装的静态资源字体,得到渲染后的字体图标。
进一步地,根据本申请提出的一种基于Flutter实现字体图标渲染的方法,还包括:
本地服务器接收前端发送的资源调用请求;
根据业务逻辑判断并封装渲染后的字体图标,返回给前端;
进一步地,前端发起Get请求,本地服务器根据Get请求调用渲染后的字体图标MyIcons.check_circle;
进一步地,本地服务器通过Response对象返回请求的资源,通过Json.decode将数据转换为String字符串格式,本地服务器根据Json数据建立数据模型Model,构造Provide类对Model进行状态管理,当前端对数据有增删查改操作时,本地服务器通过Provide类做局部刷新并通知Model,Model对数据进行逻辑判断,重新计算数据信息及长度并传递参数,完成前端的资源调用。
进一步地,Model对数据进行逻辑判断规则是:
根据所述Model的特有标识进行判断,当数据表中没有与之匹配的标识时,认为当前Model为新增,则执行新增操作;
如果所述Model的特有标识在所述数据表中,且当前操作为删除操作,则认为当前数据表中Model失效,此时对数据表中当前标识的Model执行删除操作,并实时同步云端;
如果所述Model的特有标识在所述数据表中,且当前操作为非删除操作,则认为是针对当前标识的Model的修改,此时利用算法将所述Model与原Model进行比对,并返回true/false值;
若返回false值,说明未进行修改,则不做任何操作;
若返回true值,说明进行了修改,则对数据表进行同步配置,并同步更新至云端。
根据本申请的第二个方面,本申请提出了一种基于Flutter实现字体图标渲染的系统,包括:
云端字体图标库模块,用于在云端服务器创建远程云端字体图标库;
初始化模块,用于初始化所述云端字体图标库;
下载渲染文件模块,用于从所述云端字体图标库下载渲染文件到本地服务器;
归类配置模块,用于对所述渲染文件进行归类和配置;
导入渲染模块,用于将本地服务器的静态资源字体导入所述归类和配置之后的渲染文件中,得到渲染后的字体图标。
根据本申请的第三个方面,本申请提出了一种电子设备,包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序,所述处理器运行所述计算机程序以实现如第一方面所述的方法。
根据本申请的第四个方面,本申请提出了一种计算机可读存储介质,其上存储有计算机程序,所述计算机程序被处理器执行,以实现如第一方面所述的方法。
总的来说,本申请的优势及给用户带来的体验在于:
本申请提出云端保存、实时更新、灵活读取的使用思想。优势有如下几点:
1、可以非常灵活、高效的通过代码来实现设计形态的大小、颜色、旋转角度、偏移量等之间的切换和复用。
2、所有图标库存于云端,根据权限职责分配,可随时进行更新字体图标库,极大发挥高效协同的优势,扩展了使用范围,提高了复用性,统一性,降低了重复开发成本以及多项目维护成本。
3、相比于大量图片引入消耗的内存和流量,本申请几乎可以以完全忽略内存和流量大小的代码量实现,大大优化项目体积、资源消耗和用户体验。
4、通过对项目接口的提前预留和标识,实现项目文件后缀和<image>标签扫描,达成后台可灵活配置替换,实现热更新自动重载。无需因为场景不同等问题出现不必要的上线,降低研发和运营成本。
具体实施方式
下面结合附图和实施例对本申请作进一步的详细说明。可以理解的是,此处所描述的具体实施例仅用于解释相关发明,而非对该发明的限定。另外还需要说明的是,为了便于描述,附图中仅示出了与有关发明相关的部分。
需要说明的是,在不冲突的情况下,本申请中的实施例及实施例中的特征可以相互组合。下面将参考附图并结合实施例来详细说明本申请。
字体图标是实际产品迭代中非常常用的展示形态,也是非常有效果的一种展现方式:
当功能分类多样化的情况下,通常需要通过不同的图标或者颜色来区分,相同样式的图片效果通过更换不同的颜色或者大小、甚至旋转角度等来体现不同分类极为常见,这时候使用字体图标来替换大量图片引入,就大大提高了生产力,降低流量损耗、内存消耗,提高用户体验度。
产品设计中经常会用到“×”(关闭按钮)、“→”(进入)、“←”(返回)等公共的样式来提升用户体验,这个时候就可以让所有项目共用云端字体图标库,保证所有项目的统一性、复用性,也能根据不同项目需求修改大小、粗细、颜色等效果,从而避免引入不同图片导致的效果不一致,或者频繁重复的引入相同图片导致文件冗余、项目体积不必要扩增。
当产品需求发生变更,场景切换、菜单更新、模块标识更替等情况,随时可以通过后台配置系统,实现实时处理,快速响应。
本申请提供基于Flutter技术领域实现字体图标的快速引入使用解决方案,可作为Android、iOS双平台支持的快速实现不同展示形态、高效灵活完成设计要求的有力技术支撑,从而提高研发产能。
本申请不借助第三方的字体图标库资源,通过将本地资源与云端资源定制化配置,实现本地和云端字体图标的上传、下载和配置使用,实现设计灵活、节省资源、加载快速,以获得良好的用户体验。
图1示出根据本申请实施例的基于Fluter实现字体图标渲染的方法的流程图,包括以下步骤:
S100、在云端服务器创建远程云端字体图标库。
在这个步骤中,首先在云端服务器配置字体图标库空间,通过提交时标签定义实现图标库文件自动归类,统一规范命名、配置角色权限、更新和操作机制;并提供在线psd等多文件格式自动转换字体图标功能。
表1:图标库文件格式
标签描述 |
图标命名(标识) |
角色权限 |
操作机制 |
未选中(圆圈类型) |
cw_c_check |
管理员(读、写) |
增删改查 |
选中(圆圈类型) |
cw_c_checked |
开发人员(读) |
查 |
图标库的文件格式包括标签、图标命名(标识)、角色权限、操作机制。例如图标可以为未选中(圆圈类型)或选中(圆圈类型),分别对应图标命名(标识)cw_c_check、cw_c_checked,角色权限管理员(读、写)、开发人员(读),以及操作机制增、删、改、查看和查询。
本申请中,能够随时根据需要进行维护和更新云端字体图标库,实现更大化的复用和提供便利。
S200、初始化所述云端字体图标库。
在这个步骤中,首先整理高频使用的Ps源文件中未栅格化且有路径点的图片、通过在线转换功能批量将原有图片进行字体图标自动转换;其次使用Al工具绘制初始画布(canvas),使用钢笔工具Pen Tool绘制对应的线性和填充性图版,然后导出字体图标代码,输出使用方法和规范说明书,并提交云端字体图标库(近500W各业务场景常用图标)。
使用AI工具绘制初始画布的方法属于本领域现有技术,在此不再赘述描述。
S300、从所述云端字体图标库下载渲染文件到本地服务器。
从云端字体图标库下载所需文件,一般有ttf文件即可(如果保留index文件,可以进行映射)。
S400、对所述渲染文件进行归类和配置。
本申请中,通过以下方法实现渲染文件归类:将下载下来的文件放置在fonts文件夹下,与lib文件同级。
本申请中,通过以下方法实现配置:在yaml文件中配置并执行pub get。
通过以下代码可以实现渲染文件的使用:
IconData(0xe616,fontFamily:'myIcon',matchTextDirection:true,fontPackage:"本地的项目名称")。
S500、将本地服务器的静态资源字体导入所述归类和配置之后的渲染文件中,得到渲染后的字体图标。包括以下步骤:
(1)整理本地服务器的静态资源字体。
(2)在flutter的渲染文件中,导入本地服务器封装的静态资源字体,就可以直接使用MyIcons.check_circle,得到渲染后的字体图标。代码如下:
import'package:flutter/material.dart';
class MyIcons{
//圆形选中图标
static const IconData check_circle=
const IconData(0xe616,fontFamily:'myIcon',matchTextDirection:true,fontPackage:"insurance_mall");
}
本申请针对不同产品方案,不同场景需求,能够实时切换变更字体图标,实现不上线、不部署、不开发的热更新高效方案。例如,可以根据设计稿要求,对字体图标的大小、颜色、粗细、位置等进行调整。
应用场景1
如图2所示,是本申请的一个具体场景应用流程图,包括前端、本地服务器、云端服务器三者交互过程,本地服务器可从云端服务器下载文件和本地化渲染等;本地服务器还可接收前端请求,通过逻辑判断调用本地渲染文件。
进一步地,基于Flutter实现字体图标渲染的方法还包括以下步骤:
S600、本地服务器接收前端发送的资源调用请求;
其中,前端发起Get请求,本地服务器根据Get请求调用渲染后的字体图标MyIcons.check_circle。
S700、根据业务逻辑判断并封装渲染后的字体图标,返回给前端。
其中,本地服务器通过Response对象返回请求的资源,通过Json.decode将数据转换为String字符串格式。本地服务器根据Json数据建立数据模型Model,构造Provide类对Model进行状态管理,当前端对数据有增删查改操作时,本地服务器通过Provide类做局部刷新并通知Model,Model对数据进行逻辑判断,重新计算数据信息及长度并传递参数,完成前端的资源调用。
其中,Model的逻辑判断规则是(管理员权限):
1.根据Model的特有标识进行判断,当数据表中没有与之匹配的标识时,认为当前Model为新增,则执行新增操作;
2.如果Model的特有标识在数据表中存在,且当前操作为删除操作,则认为当前数据表中Model失效,此时对数据表中当前标识Model执行删除操作,并实时同步云端;
3.如果Model的特有标识在数据表中存在,且当前操作为非删除操作,则认为是针对当前标识的Model的修改。此时利用算法将所述Model与原Model进行比对,并返回true/false值;实现程序段如下:
4.如果返回false值,说明并未进行修改,则不做任何操作;
5.如果返回true值,说明进行了修改,则对数据表进行同步配置,并同步更新至云端。
应用场景2
如图3所示,某APP底部菜单导航菜单,需要通过更换颜色来代表选中和未选中,根据屏幕大小来确定导航菜单呈现的大小。这样一来就需要多张不同颜色不同大小的图片来满足需求。而使用字体图标后,就可以用一个字体图标来实现,可以随意切换这个图标的大小和颜色来满足场景需要。也可以更具场景的和产品形态的变换,通过不上线、不部署、不研发进行热更新来完成业务需求。
申请实施例提供了一种基于Flutter实现字体图标渲染的系统,该系统用于执行上述实施例所述的基于Flutter实现字体图标渲染的方法,如图4所示,该系统包括:
云端字体图标库模块501,用于在云端服务器创建远程云端字体图标库;
初始化模块502,用于初始化所述云端字体图标库;
下载渲染文件模块503,用于从所述云端字体图标库下载渲染文件到本地服务器;
归类配置模块504,用于对所述渲染文件进行归类和配置;
导入渲染模块505,用于将本地服务器的静态资源字体导入所述归类和配置之后的渲染文件中,得到渲染后的字体图标。
本申请的上述实施例提供的基于Flutter实现字体图标渲染的系统与本申请实施例提供的基于Flutter实现字体图标渲染的方法出于相同的发明构思,具有与其存储的应用程序所采用、运行或实现的方法相同的有益效果。
本申请实施方式还提供一种与前述实施方式所提供的基于Flutter实现字体图标渲染的方法对应的电子设备,以执行上基于Flutter实现字体图标渲染的方法。本申请实施例不做限定。
请参考图5,其示出了本申请的一些实施方式所提供的一种电子设备的示意图。如图5所示,所述电子设备2包括:处理器200,存储器201,总线202和通信接口203,所述处理器200、通信接口203和存储器201通过总线202连接;所述存储器201中存储有可在所述处理器200上运行的计算机程序,所述处理器200运行所述计算机程序时执行本申请前述任一实施方式所提供的基于Flutter实现字体图标渲染的方法。
其中,存储器201可能包含高速随机存取存储器(RAM:Random Access Memory),也可能还包括非不稳定的存储器(non-volatile memory),例如至少一个磁盘存储器。通过至少一个通信接口203(可以是有线或者无线)实现该系统网元与至少一个其他网元之间的通信连接,可以使用互联网、广域网、本地网、城域网等。
总线202可以是ISA总线、PCI总线或EISA总线等。所述总线可以分为地址总线、数据总线、控制总线等。其中,存储器201用于存储程序,所述处理器200在接收到执行指令后,执行所述程序,前述本申请实施例任一实施方式揭示的所述基于Flutter实现字体图标渲染的方法可以应用于处理器200中,或者由处理器200实现。
处理器200可能是一种集成电路芯片,具有信号的处理能力。在实现过程中,上述方法的各步骤可以通过处理器200中的硬件的集成逻辑电路或者软件形式的指令完成。上述的处理器200可以是通用处理器,包括中央处理器(Central Processing Unit,简称CPU)、网络处理器(Network Processor,简称NP)等;还可以是数字信号处理器(DSP)、专用集成电路(ASIC)、现成可编程门阵列(FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。可以实现或者执行本申请实施例中的公开的各方法、步骤及逻辑框图。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。结合本申请实施例所公开的方法的步骤可以直接体现为硬件译码处理器执行完成,或者用译码处理器中的硬件及软件模块组合执行完成。软件模块可以位于随机存储器,闪存、只读存储器,可编程只读存储器或者电可擦写可编程存储器、寄存器等本领域成熟的存储介质中。该存储介质位于存储器201,处理器200读取存储器201中的信息,结合其硬件完成上述方法的步骤。
本申请实施例提供的电子设备与本申请实施例提供的基于Flutter实现字体图标渲染的方法出于相同的发明构思,具有与其采用、运行或实现的方法相同的有益效果。
本申请实施方式还提供一种与前述实施方式所提供的基于Flutter实现字体图标渲染的方法对应的计算机可读存储介质,请参考图6,其示出的计算机可读存储介质为光盘30,其上存储有计算机程序(即程序产品),所述计算机程序在被处理器运行时,会执行前述任意实施方式所提供的基于Flutter实现字体图标渲染的方法。
需要说明的是,所述计算机可读存储介质的例子还可以包括,但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他光学、磁性存储介质,在此不再一一赘述。
本申请的上述实施例提供的计算机可读存储介质与本申请实施例提供的基于Flutter实现字体图标渲染的方法出于相同的发明构思,具有与其存储的应用程序所采用、运行或实现的方法相同的有益效果。
需要说明的是:
在此提供的算法和显示不与任何特定计算机、虚拟系统或者其它设备有固有相关。各种通用系统也可以与基于在此的示教一起使用。根据上面的描述,构造这类系统所要求的结构是显而易见的。此外,本申请也不针对任何特定编程语言。应当明白,可以利用各种编程语言实现在此描述的本申请的内容,并且上面对特定语言所做的描述是为了披露本申请的最佳实施方式。
在此处所提供的说明书中,说明了大量具体细节。然而,能够理解,本申请的实施例可以在没有这些具体细节的情况下实践。在一些实例中,并未详细示出公知的方法、结构和技术,以便不模糊对本说明书的理解。
类似地,应当理解,为了精简本申请并帮助理解各个发明方面中的一个或多个,在上面对本申请的示例性实施例的描述中,本申请的各个特征有时被一起分组到单个实施例、图、或者对其的描述中。然而,并不应将该公开的方法解释成反映如下意图:即所要求保护的本申请要求比在每个权利要求中所明确记载的特征更多的特征。更确切地说,如下面的权利要求书所反映的那样,发明方面在于少于前面公开的单个实施例的所有特征。因此,遵循具体实施方式的权利要求书由此明确地并入该具体实施方式,其中每个权利要求本身都作为本申请的单独实施例。
本领域那些技术人员可以理解,可以对实施例中的设备中的模块进行自适应性地改变并且把它们设置在与该实施例不同的一个或多个设备中。可以把实施例中的模块或单元或组件组合成一个模块或单元或组件,以及此外可以把它们分成多个子模块或子单元或子组件。除了这样的特征和/或过程或者单元中的至少一些是相互排斥之外,可以采用任何组合对本说明书(包括伴随的权利要求、摘要和附图)中公开的所有特征以及如此公开的任何方法或者设备的所有过程或单元进行组合。除非另外明确陈述,本说明书(包括伴随的权利要求、摘要和附图)中公开的每个特征可以由提供相同、等同或相似目的的替代特征来代替。
此外,本领域的技术人员能够理解,尽管在此所述的一些实施例包括其它实施例中所包括的某些特征而不是其它特征,但是不同实施例的特征的组合意味着处于本申请的范围之内并且形成不同的实施例。例如,在下面的权利要求书中,所要求保护的实施例的任意之一都可以以任意的组合方式来使用。
本申请的各个部件实施例可以以硬件实现,或者以在一个或者多个处理器上运行的软件模块实现,或者以它们的组合实现。本领域的技术人员应当理解,可以在实践中使用微处理器或者数字信号处理器(DSP)来实现根据本申请实施例的虚拟机的创建系统中的一些或者全部部件的一些或者全部功能。本申请还可以实现为用于执行这里所描述的方法的一部分或者全部的设备或者系统程序(例如,计算机程序和计算机程序产品)。这样的实现本申请的程序可以存储在计算机可读介质上,或者可以具有一个或者多个信号的形式。这样的信号可以从因特网网站上下载得到,或者在载体信号上提供,或者以任何其他形式提供。
应该注意的是上述实施例对本申请进行说明而不是对本申请进行限制,并且本领域技术人员在不脱离所附权利要求的范围的情况下可设计出替换实施例。在权利要求中,不应将位于括号之间的任何参考符号构造成对权利要求的限制。单词“包含”不排除存在未列在权利要求中的元件或步骤。位于元件之前的单词“一”或“一个”不排除存在多个这样的元件。本申请可以借助于包括有若干不同元件的硬件以及借助于适当编程的计算机来实现。在列举了若干系统的单元权利要求中,这些系统中的若干个可以是通过同一个硬件项来具体体现。单词第一、第二、以及第三等的使用不表示任何顺序。可将这些单词解释为名称。
以上所述,仅为本申请的具体实施方式,但本申请的保护范围并不局限于此,任何熟悉本技术领域的技术人员在本申请揭露的技术范围内,可轻易想到其各种变化或替换,这些都应涵盖在本申请的保护范围之内。因此,本申请的保护范围应以所述权利要求的保护范围为准。