CN116051627A - 一种基于svg与Lottie实现图形自适应的方法及系统 - Google Patents

Abstract

本发明公开了一种基于svg与Lottie实现图形自适应的方法及系统，所述方法包括如下步骤：S1，确定dom容器和准备JSON文件；S2，根据JSON文件结构，获取JSON文件中各个图层对象，所有的图层组成所需生成的矢量svg素材图形；S3，获取JSON文件中代表宽高的字段,获取dom容器的宽高，并设置JSON文件中的宽高为已获取的dom容器的宽高；S4，确定JSON文件中需要自适应的图层对象，进行自适应设置；S5，设置JSON文件中各个图层对象的颜色色调的开始和结束位置；S6,Lottie加载解析合并生成JSON文件对象。本发明使得图形素材在非等比拉伸或者压缩的时候不发生形变从而自适应的配置，提升视觉效果与客户体验。

Description

一种基于svg与Lottie实现图形自适应的方法及系统

技术领域

本发明涉及计算机及数据处理技术领域，尤其是涉及一种基于svg与Lottie实现图形自适应的方法及系统。

背景技术

在可视化大屏构建的时候，会根据大屏设计稿构建大屏，通常会添加一些素材，比如这个大屏的背景图，内容框的背景图，大小标题的背景图，或者一些图标等，方便进行大屏的布局，使大屏更加的美观、丰富、整洁。通常构建大屏的素材的格式包括图片、矢量SVG和视频。

但是这类方式仍有不足：第一方面，在大屏搭建的过程中或搭建完成后，进行大屏的缩放，素材会随着大屏的放大，而会变得越来越模糊，在高分辨率的显示屏上尤为明显；第二方面，当改变大屏素材的宽高比的时候，则会使素材产生形变比如拉伸、压缩。因为在设计导出大屏素材后，素材的高宽比已经固定，所以改变宽高比后必回产生形变，比如拉伸、压缩，也就造成了素材绝大多数的情况下不可复用；最后方面，当导出的素材为矢量SVG的时候，只能设置等比缩放或填满dom容器宽高，而等比缩放在宽高比不一致的时候必会产生空白区域，而填满宽高则导致素材形变。

发明内容

针对现有技术存在的问题，本发明的目的在于提供一种基于svg通过使用Lottie生成的矢量svg图形素材支持图形素材在非等比拉伸或者压缩的时候不发生形变从而自适应的配置，使得搭建可视化大屏的素材具有适应任意比例的dom容器、任意大屏保持清晰、可复用、支持多种大屏色调等多样性视觉变化，提升视觉效果与客户体验。

为实现上述目的，本发明提供一种基于svg与Lottie实现图形自适应的方法，所述方法包括如下步骤：

步骤S1，组织dom结构和准备JSON文件，所述dom结构指的是背景图上方放置内容的dom元素和Lottie容器元素，以及它们的父元素；

步骤S2，根据JSON文件结构，获取JSON文件中各个图层对象，所有的图层组成所需生成的矢量svg素材图形；

步骤S3，获取JSON文件中代表宽高的字段，获取dom容器的宽高，并设置JSON文件中的宽高为已获取的dom容器的宽高；

步骤S4，确定JSON文件中需要自适应的图层对象，进行自适应设置；

步骤S5，设置JSON文件中各个图层对象的颜色色调的开始和结束位置；

步骤S6,Lottie加载解析合并生成JSON文件对象。

进一步，JSON文件对象中包括字段宽度w、高度h、静态资源assets和图层数组集合layers，其中图层数组集合layers为需要获取的图层对象，图层对象中存在引入静态资源assets的情况，在组合图层进行引用。

进一步，在步骤S3中，设置父元素绝对定位，内容dom元素和Lottie dom容器元素相对定位，并且设置宽高与父元素的宽高保持一致，然后设置Lottie dom容器元素的层级小于内容dom元素，使生成的素材在内容dom元素的底部，使得Lottie dom容器不会遮挡内容dom元素中的内容。

进一步，在步骤S4中，包括以下子步骤：

步骤S41，获取图层变换的锚点；获取每个自适应图层中变换的锚点，变换的锚点的数据格式是一个一维数组，数组中第一个元素表示横坐标，第二个元素表示纵坐标；

步骤S42，获取每个自适应图层中的变换位置与锚点一致都是一个一维数组，数值中第一个元素表示横坐标，第二个元素表示纵坐标；

步骤S43，获取图层变换的位置；图层变换位置是相对于图层变换的锚点沿横轴与纵轴分别移动的距离；获取每个自适应图层中变换的位置，图层变换的位置的数据格式也是一个一维数组[X，Y]，数组中第一个元素X表示沿横轴方向移动X像素，第二个元素Y表示沿纵轴方向移动Y像素；

步骤S44，由Lottie dom容器的与原始JSON文件的宽度比例和高度比例，设置图层变换的锚点与位置；具体计算方式如下：原始JSON文件中宽为W1，高为H1，而Lottie dom容器的宽为W2，高为H2，Lottie dom容器的与原始JSON文件的宽度比例为W2/W1，Lottie dom容器的与原始JSON文件的高度比例为H2/H1；原始JSON文件中的图层中的变换位置为数组[X,Y]，那么新的变换位置为坐标[X*W2/W1，Y*H2/H1]。

步骤S45，获取组成图层的图形顶点坐标集合，一个矩形图层的顶点坐标集合，按照左上顶点、右上顶点、右下顶点、左下顶点的顺序绘制矩形图层；根据计算的原始宽高与dom容器宽高的比例，循环遍历二维顶点坐标集合，对横坐标设置原始宽度与dom容器宽度的比例乘以原始横坐标，对纵坐标设置原始高度与dom容器高度的比例乘以纵坐标；最后循环遍历结束生成新的图形顶点坐标集合；

步骤S46，对图层的颜色进行设置，对渐变填充和渐变描边的开始点和结束点的位置进行设置；

步骤S47，对以上设置过的图层的锚点、位置、顶点坐标集合、渐变填充和渐变描边的对象集合，进行合并组合成新的图层对象，替换Json文件中原始的图层对象；

步骤S48，最后对所有需要自适应的图层，按照以上步骤S41-S47进行设置，替换所有原始的图层对象，生成新的JSON对象。

进一步，步骤S45中，生成新的图形顶点坐标集合的方式如下：设定最外层的矩形图层的四个原始顶点坐标集合为左上顶点（X1,Y1），右上顶点（X2,Y2），右下顶点（X3,Y3），左下顶点（X4,Y4），由步骤S43设定宽度比例为P1与高度比例为P2，由步骤S44设定新的锚点为（XM，YM）,新的变换位置为（XZ,YZ）,横坐标计算公式为顶点坐标的横坐标乘以宽度比例加上变换位置的横坐标减去锚点的横坐标，纵坐标计算公式为顶点坐标的纵坐标乘以高度比例加上变换位置的纵坐标减去锚点的纵坐标，由以上公式可得矩形图层的四个新的顶点坐标为左上顶点（X1*P1+XZ-XM,Y1*P2+YZ-YM）,右上顶点（X2*P1+XZ-XM,Y2*P2+YZ-YM）,右下顶点（X3*P1+XZ-XM,Y3*P2+YZ-YM），左下顶点（X4*P1+XZ-XM,Y4*P2+YZ-YM）。

进一步，步骤S46中一个矩形图层的顶点坐标集合，按照左上顶点、右上顶点、右下顶点、左下顶点的顺序绘制矩形图层，顶点坐标包含横坐标与纵坐标。

进一步，步骤S46中，设置方式如下：首先获取指定图层的渐变填充和渐变描边对象集合，然后循环遍历渐变对象集合，再根据以后步骤中计算的原始宽高与dom容器宽高的比例，对开始点、结束点的横纵坐标进行设置，计算规则为横坐标乘以宽度的比例，纵坐标乘以高度的比例，最后生成新的图层渐变填充与渐变描边对象集合。

进一步，步骤S5中，设置矢量素材的色调，根据JSON对象，获取各个需要改变颜色的图层，再根据图层获取颜色对象集合，包括填充、描边、渐变填充、渐变描边对象；循环遍历结束后需要将结果合并到JSON文件对象中。

进一步，步骤S6中，Lottie加载解析合并生成的JSON文件对象，设置Lottie的容器为dom容器，指定为svg渲染器，设置生成矢量svg图形的属性preserveAspectRatio为xMinYMin meet，与生成的svg元素与dom容器的左边、上边对齐，并保持纵横比，由此实现矢量图形的自适应。

另一方面，本发明提供一种基于svg与Lottie实现图形自适应的系统，所述系统用于实现根据本发明的基于svg与Lottie实现图形自适应的方法。

本发明能够解决现有技术中大屏的缩放，素材会随着大屏的放大，而变得越来越模糊、改变大屏素材的宽高比的时候，会使素材产生形变比如拉伸、压缩和在不同类型颜色色调的大屏中重复使用的问题，而提供基于SVG与Lottie实现素材图形在不同大屏、不同尺寸中自适应，在数据可视化大屏显示中提升客户视觉体验。

附图说明

图1示出了根据本发明实施例基于svg与Lottie实现图形自适应的方法及系统中的流程示意图；

图2示出了根据本发明实施例中JSON对象自适应方法的流程示意图；

图3示出了根据本发明实施例中文档对象模型的树结构；

图4示出了根据本发明实施例中导出的JSON文件示意图；

图4-1示出了图4中JSON文件的具体分解图层中顶部矩形图层；

图4-2示出了图4中JSON文件的具体分解图层中最外层矩形图层；

图4-3示出了图4中JSON文件的具体分解图层中左上两个三角箭头图层；

图4-4示出了图4中JSON文件的具体分解图层中左右两个白色小矩形图层；

图4-5示出了图4中JSON文件的具体分解图层中重复的斜杠组合图层；

图5示出了根据本发明实施例中生成的图形等比不能占满的情况示意图；

图6示出了根据本发明实施例中生成的图形非等比占满的情况示意图；

图7示出了根据本发明实施例中生成的图形实现了矢量图形的自适应的示意图；

图8示出了根据本发明实施例中设置dom容器为300像素，高度为600像素效果示意图。

实施方式

下面将结合附图，对本发明的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

在本发明的描述中，需要说明的是，术语“中心”、“上”、“下”、“左”、“右”、“竖直”、“水平”、“内”、“外”等指示的方位或位置关系为基于附图所示的方位或位置关系，仅是为了便于描述本发明和简化描述，而不是指示或暗示所指的装置或元件必须具有特定的方位、以特定的方位构造和操作，因此不能理解为对本发明的限制。此外，术语“第一”、“第二”、“第三”仅用于描述目的，而不能理解为指示或暗示相对重要性。

在本发明的描述中，需要说明的是，除非另有明确的规定和限定，术语“安装”、“相连”、“连接”应做广义理解，例如，可以是固定连接，也可以是可拆卸连接，或一体地连接；可以是机械连接，也可以是电连接；可以是直接相连，也可以通过中间媒介间接相连，可以是两个元件内部的连通。对于本领域的普通技术人员而言，可以根据具体情况理解上述术语在本发明中的具体含义。

以下结合图1-图8对本发明的具体实施方式进行详细说明。应当理解的是，此处所描述的具体实施方式仅用于说明和解释本发明，并不用于限制本发明。

本发明的基于SVG与Lottie实现图形自适应的方法及系统，其发明构思在于设置父元素绝对定位，内容dom元素和Lottie dom容器元素相对定位，并且设置宽高与父元素的宽高保持一致，通过Lottie工具矢量svg图形，改变其渲染引擎为svg，并根据宽高比设置JSON文件，从而设置JSON中的属性，达到动态自适应任意dom元素。Lottie是一款基于JavaScript的用于解析使用Bodymovin导出为JSON的图形库，提供直观，生动，可个性化定制的图形。svg元素使用JavaScript在网页上绘制图像。svg拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法，可以创建丰富的图形引用。

如图1所示，基于SVG与Lottie实现图形自适应的方法的基本流程为：

步骤S1，组织dom结构和准备JSON文件，所述dom结构指的是背景图上方放置内容的dom元素和Lottie容器元素，以及它们的父元素；JSON文件是通过After Effects设计工具的插件Bodymovin导出的JSON文件，用于Lottie库解析生成矢量svg图形；本发明中，dom容器是指Lottie的dom容器，而dom结构包含Lottie dom容器和放置文本，图表等内容的dom元素，以及包含这两个的父元素。

步骤S2，根据JSON文件结构，获取JSON文件中各个图层对象，所有的图层组成所需生成的矢量svg素材图形；

步骤S3，获取JSON文件中代表宽高的字段，获取dom容器的宽高，并设置JSON文件中的宽高为已获取的dom容器的宽高；

步骤S4，确定JSON文件中需要自适应的图层对象，比如矩形边框图层等，进行自适应设置；

步骤S5，设置JSON文件中各个图层对象的颜色色调的开始和结束位置；

步骤S6,Lottie加载解析合并生成JSON文件对象。

具体地，在步骤S2中，JSON文件结构中包括字段宽度w、高度h、静态资源assets和图层数组集合layers。其中layers就是需要获取的图层对象，图层对象中存在引入静态资源assets的情况，比如把组合形状的合并顶点作为静态资源，在组合图层进行引用。

进一步，在步骤S3中，设置父元素绝对定位，内容dom元素和Lottie dom容器元素相对定位，并且设置宽高与父元素的宽高保持一致，然后设置Lottie dom容器元素的层级小于内容dom元素。使生成的素材在内容dom元素的底部，不遮挡内容。

Lottie dom容器是Lottie库解析JSON文件生成的SVG容器，内容dom元素是生成SVG图形作为背景图，背景图上面放置的内容，比如文本，圆，矩形,echarts图表等。不遮挡内容是指在让Lottie dom容器一致保持在内容dom元素的底部，也就是不让Lottie dom容器遮挡内容dom元素中的内容。

进一步，在步骤S4中，确定需要自适应的图层对象，进行自适应设置。具体的，包括以下子步骤：

步骤S41，获取图层变换的锚点。获取每个自适应图层中变换的锚点，变换的锚点的数据格式是一个一维数组，数组中第一个元素表示横坐标，第二个元素表示纵坐标。

步骤S42，获取图层变换的位置。图层变换位置是相对于图层变换的锚点沿横轴与纵轴分别移动的距离。获取每个自适应图层中变换的位置，图层变换的位置的数据格式也是一个一维数组[X，Y]，数组中第一个元素X表示沿横轴方向移动X像素，第二个元素Y表示沿纵轴方向移动Y像素；比如[100，200]，数组中第一个元素表示沿横轴方向移动100像素，第二个元素表示沿纵轴方向移动200像素。

步骤S43，获取JSON文件的原始宽度和高度，再获取现有Lottie dom容器的宽度和高度，计算出Lottie dom容器的与原始JSON文件的宽度比例和高度比例。

步骤S44，由Lottie dom容器的与原始JSON文件的宽度比例和高度比例，设置图层变换的锚点与位置，因为获取的锚点与位置只是初始导出JSON文件中的锚点与位置，要通过步骤S43中dom容器的与原始JSON文件的宽度比例和高度比例，设置能自动适应不同尺寸的Lottie dom容器，也为下面设置图层的顶点坐标集合做准备，所以需要根据初始的锚点与位置和比例，重新设置图层的锚点与位置。

锚点与位置都是一个一维数组，数组中第一个元素表示横坐标，第二个元素表示纵坐标，比如[2,3]其中2为横坐标，3为纵坐标。比如JSON文件中的高度为400，但dom容器的高度为800，那么比例为2，即800除以400，也就是说图层变换的锚点与位置都需要在原始值高度2乘以2。但是实际图形都有一个固定位置比如矩形图层在改变容器宽高的情况下距离容器左侧的距离始终为3，距离容器上侧的距离始终为4，那么只需要在乘以比例的基础上加上固定值即可。

例如原始JSON文件中宽为W1，高为H1，而Lottie dom容器的宽为W2，高为H2，由步骤S43 Lottie dom容器的与原始JSON文件的宽度比例为公式1：W2/W1，Lottie dom容器的与原始JSON文件的高度比例为公式2：H2/H1。原始JSON文件中的图层中的变换位置为数组[X,Y]，那么新的变换位置为坐标公式3：[X*W2/W1，Y*H2/H1]，其中公式X*W2/W1为X乘以W2除以W1，公式Y*H2/H1为Y乘以H2除以H1。比如原始JSON文件的宽为200，高为100，Lottiedom容器的宽为400，高为300，由公式1得到Lottie dom容器的与原始JSON文件的宽度比例为2，由公式2得到Lottie dom容器的与原始JSON文件的高度比例为3，原始JSON文件中的图层的变换位置为数组[100，50]，根据公式3得到新的图层变换位置为数组[200,150]。

步骤S45，获取组成图层的图形顶点坐标集合，是一个二维数组，比如一个矩形图层的顶点坐标集合，按照左上顶点、右上顶点、右下顶点、左下顶点的顺序绘制矩形图层。顶点坐标包含横坐标与纵坐标。根据上个步骤中计算的原始宽高与dom容器宽高的比例，循环遍历二维顶点坐标集合，对横坐标设置原始宽度与dom容器宽度的比例乘以原始横坐标，对纵坐标设置原始高度与dom容器高度的比例乘以纵坐标。最后循环遍历结束生成新的图形顶点坐标集合。

设定最外层的矩形图层的四个原始顶点坐标集合为左上顶点（X1,Y1），右上顶点（X2,Y2），右下顶点（X3,Y3），左下顶点（X4,Y4），由步骤S43设定宽度比例为P1与高度比例为P2，由步骤S44设定新的锚点为（XM，YM）,新的变换位置为（XZ,YZ）,横坐标计算公式为顶点坐标的横坐标乘以宽度比例加上变换位置的横坐标减去锚点的横坐标，纵坐标计算公式为顶点坐标的纵坐标乘以高度比例加上变换位置的纵坐标减去锚点的纵坐标，由以上公式可得矩形图层的四个新的顶点坐标为左上顶点（X1*P1+XZ-XM,Y1*P2+YZ-YM）,右上顶点（X2*P1+XZ-XM,Y2*P2+YZ-YM）,右下顶点（X3*P1+XZ-XM,Y3*P2+YZ-YM），左下顶点（X4*P1+XZ-XM,Y4*P2+YZ-YM）。比如矩形图层的四个顶点坐标分别为（100，100），（200，100），（200，200），（100，200），宽度比例为2，高度比例为2，新的锚点为（200，200），新的变换位置为（200，200）那么由以上公式得矩形图层的顶点坐标集合为（200，200），（400，200），（400，400），（200，400）。

步骤S46，对图层的颜色进行设置。对图层的颜色进行设置不是改变颜色，而是因为以上图层顶点坐标的改变，需要对渐变填充、渐变描边的开始点、结束点的位置进行设置。首先获取指定图层的渐变填充和渐变描边对象集合，然后循环遍历渐变对象集合，再根据以后步骤中计算的原始宽高与dom容器宽高的比例，对开始点、结束点的横纵坐标进行设置，计算规则为横坐标乘以宽度的比例，纵坐标乘以高度的比例，最后生成新的图层渐变填充与渐变描边对象集合。

设定图层的渐变填充颜色的开始点坐标为（x,y）,结束点坐标为（x1,y1）,设定宽度比例为P1与高度比例为P2，计算公式为点坐标的横坐标乘以宽度比例，点坐标的纵坐标乘以高度比例，由公式得出新图层的渐变填充颜色的开始点坐标为（x*p1,y*p2）,结束点为（x1*p1,y1*p2）。比如原始图层渐变填充颜色的开始点坐标为（100，100），结束点坐标为（100，200），宽度比例为2与高度比例为2，那么新图层渐变填充颜色的开始点坐标为（200，200），结束点坐标为（200，400）。由于图层存在多个渐变填充颜色与渐变描边颜色，所以需要遍历所有的渐变填充颜色与渐变描边颜色，根据以上公式设置开始点坐标与结束点坐标。

步骤S47，对以上设置过的图层的锚点、位置、顶点坐标集合、渐变填充和渐变描边的对象集合，进行合并组合成新的图层对象，替换Json文件中原始的图层对象。

步骤S48，最后对所有需要自适应的图层，按照以上步骤进行设置，替换所有原始的图层对象，生成新的JSON对象。

在步骤S5中，设置矢量素材的色调。对图层的形状进行设置之后，为了让素材适应不同色调类型的大屏，需要对新的JSON对象中的图层进行设置。比如在金融大屏中整体色调为金色，此时矢量素材的颜色位金色，但是搭建一个植树节的大屏，整体色调为绿色，就需要把矢量素材的颜色设置为绿色。所以就需要对矢量素材的颜色色调进行设置。根据新的JSON对象，获取各个需要改变颜色的图层，再根据图层获取颜色对象集合，包括填充、描边、渐变填充、渐变描边对象。对于填充与描边的对象都会只存在一个，只需设置对象中代表颜色的字段为所需颜色。但是对于渐变填充与渐变描边对象，理论上可以存在的数量没有上限，因为生成渐变颜色，需要设置渐变开始点、结束点、渐变类型径向或者线性和从开始点到结束点过程中0%到100%不同位置显示的颜色。故需要循环遍历渐变填充与渐变描边的对象，并对每个渐变对象中0%到100%不同位置显示的颜色进行一一设置，比如渐变色是从开始点到结束点过程中0%代表开始位置为红色，50%代表中间位置为绿色，100%代表结束位置为蓝色，如果要改变为黄色橙色紫色，则需要对每个位置的颜色都按照颜色数组进行设置。循环遍历结束后需要将结果合并到JSON文件对象中。

在步骤S6中，Lottie加载解析合并生成的JSON文件对象。指定Lottie使用svg渲染器，设置生成矢量svg图形的属性preserveAspectRatio为xMinYMin meet，意思为与生成的svg元素与dom容器的左边、上边对齐，并保持纵横比。最后按照以上步骤就实现了矢量图形的自适应。

关于具体的实施例，比如在搭建可视化大屏的时候，需要多个内容背景框作为背景，但是背景上方内容大小又不一样，比如可视化大屏中放一个饼状图图表组件表示一个指标，需要的背景框大小为宽300像素，高200像素，色调保持蓝色，同时又有一行并列显示相同类型的饼状图组件表示三个不同指标，此时需要的背景框大小为宽900像素，高200像素，色调保持绿色。使这两种情况底部的背景框要自适应不同的容器大小且不产生形变及缩放模糊，并根据大屏要求改变颜色色调。

结合以上所述步骤S1所得在指标饼状图底部添加一个dom容器，并设置dom容器宽高为实际背景框的宽高，比如实施例中宽300像素，高200像素。饼状图元素与dom容器有同一个父元素，文档对象模型的树结构如图3所示。

然后通过After Effects设计工具设计背景图宽高分别为300像素、200像素，再通过插件Bodymovin导出的JSON文件，用于Lottie库解析，此时导出的JSON文件的宽高也为300像素、200像素，具体如图4所示。

设置父元素绝对定位，内容dom元素和Lottie dom容器元素相对定位，并且设置宽高与父元素的宽高保持一致，然后设置Lottie dom容器元素的层级小于内容dom元素。

因为设计出的背景图的宽高分别为300像素、200像素，那么用Lottie库解析JSON文件生成的图形的宽高也是300像素、200像素，满足以上背景框宽度为300像素，高度为200像素。但是背景框宽度为900像素，高度为200像素，使用Lottie库解析生成的图形，如果设置等比则不能占满整个背景框，如果设置不等比则会拉伸图形，其中图5示出了等比不能占满的情况；图6示出了非等比占满的情况，所以需要Lottie库解析JSON生成的图形自适应。

根据所述步骤S2根据JSON文件，获取JSON文件中的各个图层对象，比如图3中获取顶部矩形图层、最外层矩形图层、左上两个三角箭头图层、左右两个白色小矩形图层以及重复的斜杠组合图层，最后获取JSON文件对象中的w,h字段代表生成图形的宽和高。具体分解图层中顶部矩形图层如图4-1所示,最外层矩形图层如图4-2所示，左上两个三角箭头图层如图4-3所示，左右两个白色小矩形图层如图4-4所示，重复的斜杠组合图层如图4-5所示。每个图层都是由顶点坐标首尾相互连接形成的图层，所以每个图层的宽高不一致，锚点和位置都是每个图层的中间位置，渐变填充是顶点坐标集合形成的闭环图形中的渐变填充颜色，渐变描边是顶点坐标集合首尾相连形成的闭环图形中的边框。这样就区分出每个图层，便于后面步骤每个图层的自适应Lottie dom容器。图4为原始的JSON对象形成的图形，如果不进行自适应，则会像图6中左上两个三角箭头图层，左右两个白色小矩形图层以及重复的斜杠组合图层等图层造成拉伸，影响美观度和可视化大屏的体验，按照后续步骤自适应，则会得到如图7、图8对任意宽高的Lottie容器自适应，对每个图层不会造成拉伸，并改变颜色，多次复用等。

根据所述步骤S3所得获取Lottie容器dom元素，得到dom元素的宽度为900像素，高度为200像素，然后设置JSON文件对象中的w字段宽度的值为900，h高度字段的值为200。

根据所述步骤S4，确定需要自适应的图层，那么上图中需要自适应的图层为顶部的矩形图层、最外层的矩形图层以及重复的斜杠组合图层，而左右两个白色小矩形图层和左上两个三角箭头图层，保持原始比例。

根据所述步骤S41，获取每个自适应图层中的变换锚点，比如最外层矩形图层得到锚点的数据格式是一个一维数组[150,100]，其中150是横坐标，100是纵坐标。把图层锚点设置为[0,0],也就是横坐标设置为0，纵坐标设置为0，锚点为左上角的坐标原点，因为与web文档流有关，从web页面的左上角开始渲染，所以通常设置锚点的值为左上角坐标原点[0,0]，便于以后图层顶点坐标集合的转换。

根据所述步骤S42，获取每个自适应图层中的变换位置，比如最外层矩形图层得到锚点的数据格式是一个一维数组[150,100]，那么就表示横坐标方向移动150，纵坐标方向移动100。所以通常把变换位置的坐标也要设置为[0,0]，意思表示图层不做移动。以后图层的顶点坐标从容器左上角坐标原点开始。

根据所述步骤S43，JSON源文件的宽度为300，高度为200，dom容器的宽度为900，高度为200，那么得到dom容器与原文件的宽度比为900除以300等于3，高度比为200除以200等于1。

根据所述步骤S44，根据步骤S43计算的宽度比与高度比，设置图层变换锚点位置与变换位置，比如最外层矩形图层都是从左上角开始的图形那么锚点与变换位置都为[0,0]，但是有些图层比如左上角箭头图层到容器左侧的距离为30，在顶部矩形图层中居中显示，那么锚点位置不变，而是变换位置改变为横坐标30，纵坐标为顶部矩形图层的一半。但是最外层矩形图层，顶点是相对锚点与变换位置的，多个订单集合不方便改变锚点与变换位置，锚点还是设置[0,0,0]，变换位置为最外层矩形的中心点[150,10]，根据宽度比为3，高度比为1，那么变换位置就为[450,100]。

根据所述步骤S45，设置完锚点与变换位置，对最外层矩形图层中的顶点坐标集合进行设置，按照左上顶点、右上顶点、右下顶点、左下顶点的顺序绘制相连形成最外层矩形图层，其原顶点坐标集合是一个二维数组[[-150,-100],[150,-100],[150,100],[-150,100]]，遍历这个二维数组对顶点坐标中的横坐标乘以步骤S43中的宽度比例，纵坐标乘以高度比例，则顶点坐标结果为[[-450,-100],[450,-100],[450,100],[-450,100]]。

根据所述步骤S46，对图层的颜色的位置进行设置，步骤S45对图层顶点坐标的改变，需要对渐变填充、渐变描边的开始点、结束点的位置进行设置。获取渐变填充、渐变描边对象，比如最外层矩形图层渐变填充的开始点坐标为[150,-100]，结束点坐标为[150,100],那么遍历完渐变填充、渐变描边对象集合之后，渐变填充的开始点坐标为[450,-100]，结束点为[450,100]。也就是开始点结束点的横坐标乘以宽度比例，纵坐标乘以高度比例。

根据所述步骤S47，对以上设置过的图层的锚点、位置、顶点坐标集合、渐变填充和渐变描边的对象集合，进行合并组合成新的图层对象，替换Json文件中原始的图层对象。

根据所述步骤S48，最后对所有需要自适应的图层，按照以上步骤进行设置，替换所有原始的图层对象，生成新的Json对象。

根据所述步骤S5，如果需要改变颜色色调，只需要找到JSON文件对象中的图层，循环遍历设置代表颜色的数组字段为你想要的颜色即可。最后合并到JSON文件中。

根据所述步骤S6，设置Lottie的容器为dom容器，指定svg渲染器，设置生成矢量svg图形的属性preserveAspectRatio为xMinYMin meet，意思为与生成的svg元素与dom容器的左边、上边对齐，并保持纵横比。就实现了矢量图形的自适应，如图7所示。

斜杠图层的斜率与以前保持一致，左上角三角箭头图层始终居中显示，距离左侧始终30像素。同理如果设置dom容器为300像素，高度为600像素，则效果如图8所示。

另一方面，本发明提供一种基于Lottie与SVG的图形自适应的系统，所述系统用于实现根据本发明所述的基于Lottie与SVG的图形自适应的方法。

本发明基于svg通过使用Lottie生成的矢量svg图形素材，支持图形素材在非等比拉伸或者压缩的时候不发生形变从而自适应的配置，本发明能够解决现有技术中大屏的缩放，素材会随着大屏的放大，而变得越来越模糊、改变大屏素材的宽高比的时候，会使素材产生形变比如拉伸、压缩和在不同类型颜色色调的大屏中重复使用的问题，而提供基于SVG与Lottie实现素材图形在不同大屏、不同尺寸中自适应，使得搭建可视化大屏的素材具有适应任意比例的dom容器、任意大屏保持清晰、可复用、支持多种大屏色调等多样性视觉变化，提升视觉效果与客户体验。

本发明流程图中或在此以其他方式描述的任何过程或方法描述可以被理解为表示包括一个或多个用于实现特定逻辑功能或过程的步骤的可执行指令的代码的模块、片段或部分，可以实现在任何计算机刻度介质中，以供指令执行系统、装置或设备，所述计算机可读介质可以是任何包含存储、通信、传播或传输程序以供执行系统、装置或设备使用。包括只读存储器、磁盘或光盘等。

在本说明书的描述中，参考术语“实施例”、“示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不必须针对的是相同的实施例或示例。此外，本领域的技术人员可以在不产生矛盾的情况下，将本说明书中描述的不同实施例或示例以及其中的特征进行结合或组合。

上述内容虽然已经示出和描述了本发明的实施例，可以理解的是，上述实施例是示例性的，不能理解为对本发明的限制，本领域的普通技术人员在本发明的范围内可以对上述实施例进行变化、修改、替换和变型等更新操作。

Claims (10)

1.一种基于svg与Lottie实现图形自适应的方法，其特征在于，所述方法包括如下步骤：

步骤S1，组织dom结构和准备JSON文件，所述dom结构指的是背景图上方放置内容的dom元素和Lottie容器元素，以及它们的父元素；

步骤S2，根据JSON文件结构，获取JSON文件中各个图层对象，所有的图层组成所需生成的矢量svg素材图形；

步骤S3，获取JSON文件中代表宽高的字段，获取dom容器的宽高，并设置JSON文件中的宽高为已获取的dom容器的宽高；

步骤S4，确定JSON文件中需要自适应的图层对象，进行自适应设置；

步骤S5，设置JSON文件中各个图层对象的颜色色调的开始和结束位置；

步骤S6,Lottie加载解析合并生成JSON文件对象。

2.根据权利要求1所述的基于svg与Lottie实现图形自适应的方法，其特征在于，在步骤S2中，JSON文件对象中包括字段宽度w、高度h、静态资源assets和图层数组集合layers，其中图层数组集合layers为需要获取的图层对象，图层对象中存在引入静态资源assets的情况，在组合图层进行引用。

3.根据权利要求1所述的基于svg与Lottie实现图形自适应的方法，其特征在于，在步骤S3中，设置父元素绝对定位，内容dom元素和Lottie dom容器元素相对定位，并且设置宽高与父元素的宽高保持一致，然后设置Lottie dom容器元素的层级小于内容dom元素，使生成的素材在内容dom元素的底部，使得Lottie dom容器不会遮挡内容dom元素中的内容。

4.根据权利要求1所述的基于svg与Lottie实现图形自适应的方法，其特征在于，在步骤S4中，包括以下子步骤：

步骤S41，获取图层变换的锚点；获取每个自适应图层中变换的锚点，变换的锚点的数据格式是一个一维数组，数组中第一个元素表示横坐标，第二个元素表示纵坐标；

步骤S42，获取每个自适应图层中的变换位置与锚点一致都是一个一维数组，数值中第一个元素表示横坐标，第二个元素表示纵坐标；

步骤S43，获取图层变换的位置；图层变换位置是相对于图层变换的锚点沿横轴与纵轴分别移动的距离；获取每个自适应图层中变换的位置，图层变换的位置的数据格式也是一个一维数组[X，Y]，数组中第一个元素X表示沿横轴方向移动X像素，第二个元素Y表示沿纵轴方向移动Y像素；

步骤S44，由Lottie dom容器的与原始JSON文件的宽度比例和高度比例，设置图层变换的锚点与位置；具体计算方式如下：原始JSON文件中宽为W1，高为H1，而Lottie dom容器的宽为W2，高为H2，Lottie dom容器的与原始JSON文件的宽度比例为W2/W1，Lottie dom容器的与原始JSON文件的高度比例为H2/H1；原始JSON文件中的图层中的变换位置为数组[X,Y]，那么新的变换位置为坐标[X*W2/W1，Y*H2/H1]；

步骤S45，获取组成图层的图形顶点坐标集合，一个矩形图层的顶点坐标集合，按照左上顶点、右上顶点、右下顶点、左下顶点的顺序绘制矩形图层；根据计算的原始宽高与dom容器宽高的比例，循环遍历二维顶点坐标集合，对横坐标设置原始宽度与dom容器宽度的比例乘以原始横坐标，对纵坐标设置原始高度与dom容器高度的比例乘以纵坐标；最后循环遍历结束生成新的图形顶点坐标集合；

步骤S46，对图层的颜色进行设置，对渐变填充和渐变描边的开始点和结束点的位置进行设置；

步骤S47，对以上设置过的图层的锚点、位置、顶点坐标集合、渐变填充和渐变描边的对象集合，进行合并组合成新的图层对象，替换Json文件中原始的图层对象；

步骤S48，最后对所有需要自适应的图层，按照以上步骤S41-S47进行设置，替换所有原始的图层对象，生成新的JSON对象。

5.根据权利要求4所述的基于svg与Lottie实现图形自适应的方法，其特征在于，步骤S45中，生成新的图形顶点坐标集合的方式如下：设定最外层的矩形图层的四个原始顶点坐标集合为左上顶点（X1,Y1），右上顶点（X2,Y2），右下顶点（X3,Y3），左下顶点（X4,Y4），由步骤S43设定宽度比例为P1与高度比例为P2，由步骤S44设定新的锚点为（XM，YM）,新的变换位置为（XZ,YZ）,横坐标计算公式为顶点坐标的横坐标乘以宽度比例加上变换位置的横坐标减去锚点的横坐标，纵坐标计算公式为顶点坐标的纵坐标乘以高度比例加上变换位置的纵坐标减去锚点的纵坐标，由以上公式可得矩形图层的四个新的顶点坐标为左上顶点（X1*P1+XZ-XM,Y1*P2+YZ-YM）,右上顶点（X2*P1+XZ-XM,Y2*P2+YZ-YM）,右下顶点（X3*P1+XZ-XM,Y3*P2+YZ-YM），左下顶点（X4*P1+XZ-XM,Y4*P2+YZ-YM）。

6.根据权利要求4所述的基于svg与Lottie实现图形自适应的方法，其特征在于，步骤S46中一个矩形图层的顶点坐标集合，按照左上顶点、右上顶点、右下顶点、左下顶点的顺序绘制矩形图层，顶点坐标包含横坐标与纵坐标。

7.根据权利要求6所述的基于svg与Lottie实现图形自适应的方法，其特征在于，步骤S46中，设置方式如下：首先获取指定图层的渐变填充和渐变描边对象集合，然后循环遍历渐变对象集合，再根据以后步骤中计算的原始宽高与dom容器宽高的比例，对开始点、结束点的横纵坐标进行设置，计算规则为横坐标乘以宽度的比例，纵坐标乘以高度的比例，最后生成新的图层渐变填充与渐变描边对象集合。

8.根据权利要求1所述的基于svg与Lottie实现图形自适应的方法，其特征在于，步骤S5中，设置矢量素材的色调，根据JSON对象，获取各个需要改变颜色的图层，再根据图层获取颜色对象集合，包括填充、描边、渐变填充、渐变描边对象；循环遍历结束后需要将结果合并到JSON文件对象中。

9.根据权利要求1所述的基于svg与Lottie实现图形自适应的方法，其特征在于，步骤S6中，Lottie加载解析合并生成的JSON文件对象，设置Lottie的容器为dom容器，指定为svg渲染器，设置生成矢量svg图形的属性preserveAspectRatio为xMinYMin meet，与生成的svg元素与dom容器的左边、上边对齐，并保持纵横比，由此实现矢量图形的自适应。

10.一种基于svg与Lottie实现图形自适应的系统，其特征在于，所述系统用于实现根据权利要求1-9任一项所述的基于svg与Lottie实现图形自适应的方法。

Images