【技术实现步骤摘要】
一种基于svg与Lottie实现图形自适应的方法及系统
[0001]本专利技术涉及计算机及数据处理
，尤其是涉及一种基于svg与Lottie实现图形自适应的方法及系统。
技术介绍
[0002]在可视化大屏构建的时候，会根据大屏设计稿构建大屏，通常会添加一些素材，比如这个大屏的背景图，内容框的背景图，大小标题的背景图，或者一些图标等，方便进行大屏的布局，使大屏更加的美观、丰富、整洁。通常构建大屏的素材的格式包括图片、矢量SVG和视频。
[0003]但是这类方式仍有不足：第一方面，在大屏搭建的过程中或搭建完成后，进行大屏的缩放，素材会随着大屏的放大，而会变得越来越模糊，在高分辨率的显示屏上尤为明显；第二方面，当改变大屏素材的宽高比的时候，则会使素材产生形变比如拉伸、压缩。因为在设计导出大屏素材后，素材的高宽比已经固定，所以改变宽高比后必回产生形变，比如拉伸、压缩，也就造成了素材绝大多数的情况下不可复用；最后方面，当导出的素材为矢量SVG的时候，只能设置等比缩放或填满dom容器宽高，而等比缩放在宽高比不一致的时候必会...
【技术保护点】
【技术特征摘要】
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，对图层的颜色进行设置，对渐变填充和渐变描边的...
【专利技术属性】
技术研发人员：张俊雷，张金银，叶玎玎，骆晓广，张溪梦，
申请(专利权)人：杭州比智科技有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。