一种基于SVG的图形组件封装方法与流程

一种基于svg的图形组件封装方法
技术领域
1.本发明涉及一种图形组件封装方法，该方法主要应用在基于html5技术实现的云端页面中，例如工业云组态设计工具等，从而能够帮助用户快速地拓展组件库，进而轻松容易地实现对设备、生产工艺的可视化。


背景技术：

2.在工业物联网领域，需要对工业设备采集数据进行可视化呈现，从而实现数字孪生。在可视化实现时，经常需要开发工厂、产线等的可视化大屏或看板页面，传统工艺组态软件大都基于客户端/服务器技术实现，图形扩展能力有限。新一代的云端组态工具中，开始大量使用基于svg（scalable vector graphics，可缩放矢量图形）的图形，在h5（html5）页面上进行展示。但在对应工业物联网场景下，需要根据设备实时的状态数据对反应设备的svg图形进行动态操作，例如图形的移动、旋转、变色等，由于svg图的动态效果实现，需要配置大量相关参数，配置也比较费时费力，给用户增加了难度，同时在移动端领域，如手机、ipad等智能设备进行横竖屏幕转换时，svg图片的长宽没有根据屏幕的长宽比例重新计算，即页面绘制的svg图片比例不美观，需要解决移动端的屏幕适配问题。


技术实现要素：

3.发明目的：针对现有技术中存在的问题与不足，本发明提供一种基于svg的图形组件封装方法，解决现有技术繁琐的配置问题，降低用户的使用难度，进一步解决不同分辨率或不同宽度的终端智能设备屏幕适配问题，从而有利于看板、大屏等监控画面的快速实现。
4.技术方案：一种基于svg的图形组件封装方法，该方法包括：构造函数实现svg图片组件实例化，得到svg对象，包括设置svg对象中实现svg图片组件运动功能的函数及定义svg对象的属性；对svg对象绑定属性；绑定属性时，接收用户通过操作界面设置的属性值，并传递给svg对象相应的属性进行赋值，执行svg图片组件运动功能，实现svg图片组件的动画渲染效果，并向用户展示svg图片组件的动画渲染效果。
5.本发明还包括使svg图片组件适配终端设备屏幕的方法，已知svg图片组件的高和宽，首次加载svg图片组件时获取设备屏幕的高和宽，当使用设备竖屏转横屏时：svg图片组件宽w
(svg宽) = 使用设备的横屏宽w
(横屏宽) / 使用设备的竖屏宽w
(竖屏宽) * svg图片组件宽w
(svg宽) ，svg图片组件高h
(svg高)
= svg图片组件高h
(svg高) * 使用设备的横屏宽w
(横屏宽) / 使用设备的竖屏宽w
(竖屏宽)
；当使用设备横屏转竖屏时：svg图片组件宽w(svg宽) =使用设备的竖屏宽w
(竖屏宽) /使用设备的横屏宽w
(横屏宽) *svg图片组件宽 w
(svg宽)
，svg图片组件高h
(svg高)
= svg图片组件高h
(svg高) * 使用设备的竖屏宽w
(竖屏宽) / 使用设备的横屏宽w
(横屏宽)
；通过计算 svg图片组件宽和svg图片组件高，分别赋值给svg对象中宽度和高度属性，展示给用户。
6.对于移动设备、ipad等智能设备，屏幕旋转，通过javascript提供的onorientationchange 方法监听设备旋转横竖屏，对svg图片组件进行宽度和高度的重新
计算，达到最佳的页面展示效果。
7.通过在用户操作界面提供组件的形式使用户实现对svg对象的属性进行赋值的功能，svg对象包括三个属性，分别是运动轨迹属性、动画时间属性和数据属性。
8.所述运动轨迹属性通过下拉选择框组件获取用户选择的属性值，下拉选择框组件配置属性值包括上移、下移、左移、右移、旋转、自定义六种运动轨迹属性；所述自定义指的是上移、下移、左移、右移、旋转五种运动轨迹属性的组合。
9.所述动画时间属性通过文本输入框组件获取用户输入的数据，时间属性和轨迹属性要配合使用，用来设置svg图片组件完成本次运动轨迹所花费的时长，默认单位为毫秒。使用者通过下拉选择框选择svg图片组件的运动轨迹配置属性值，并在动画时间配置属性的文本输入框内输入时间，调用svg图片组件的svg对象，获取运动轨迹配置属性值和动画时配置间属性值赋分别给svg对象的运动轨迹属性和动画时间属性，通过刷新浏览器展示svg图片组件的运动轨迹动画效果。
10.数据属性的绑定：通过组件从接口获取数据，然后让数据赋值给svg图片组件的svg对象的数据属性，数据属性配合运动轨迹属性使用，当设定运动轨迹属性值后，如果接口返回数据为1代表让按照所设定的运动轨迹属性值运动，如果接口返回0，则停止运动。这里使用场景举例：运动轨迹属性值选择选择，接口返回数据为1代表让svg图片组件旋转，0代表代表让svg图片组件停止旋转。
11.在用户操作界面提供代码编辑区域，用于实现用户对svg图片组件的svg对象的属性值的设定。在代码编辑区域事先给出可以设定的svg对象的属性，且通过注释的形式提供属性含义和操作的说明。当用户选择svg图片组件后，在代码编辑区域显示用于设定svg对象的属性值的函数及注释形式的属性含义和操作的说明。按照svg图片组件提供的数据格式规范载入数据，svg图片组件方可移动或者旋转。如果是svg图片移动则设置移动的路径长度，旋转svg图片则设置旋转角度并且可以设置启动和停止。
12.构造函数实现svg图片组件实例化时，实例化的对象对应的svg图片组件支持导入不同的svg图片格式并进行校验；上传图片前，先判断图片的格式是否为svg图片格式，对svg图片格式进行上传，上传成功后记录svg图片存取的绝对路径，并且基于上传的svg图片，构造函数实现svg图片组件实例化，得到svg图片组件的svg对象。
13.一种计算机设备，该计算机设备包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，处理器执行上述计算机程序时实现如上所述的基于svg的图形组件封装方法。
14.有益效果：与现有的技术相比，本发明提供的基于svg的图形组件封装方法，具备svg图片常用的上移、下移、左移、右移及适配屏幕功能。通过实例化组件，设置实例化对象的运动轨迹，动画时钟计时，输入数据，即可实现svg图片的动态效果。并且本身组件就适配移动端设备屏幕。从而提高了前端开发人员的研发效率，缩短了企业投入的研发成本，降低了svg图片在跨平台兼容性问题。
附图说明
15.图1是本发明实施例的方法流程图；图2是本发明实施例的通过调用接口的方式获取数据流程图；
图3是本发明实施例中代码编辑区域的实例示意图。
具体实施方式
16.下面结合具体实施例，进一步阐明本发明，应理解这些实施例仅用于说明本发明而不用于限制本发明的范围，在阅读了本发明之后，本领域技术人员对本发明的各种等价形式的修改均落于本技术所附权利要求所限定的范围。
17.如图1
‑
2所示，基于svg的图形组件封装方法，该方法包括：步骤s1、s2、s3。
18.在步骤s1中，上传图片前，先判断图片的格式是否为svg图片格式，对svg图片格式进行上传，上传成功后记录svg图片存取的绝对路径，并且基于上传的svg图片，构造函数实现svg图片组件实例化，得到svg图片组件的svg对象，svg对象包括实现svg图片组件运动功能的函数及设定svg对象的属性。
19.查阅svg图片的学习文档（xml格式的）得知，svg图片的代码以 <svg> 元素开始，包括开启标签 <svg> 和关闭标签 </svg>，这是根元素。其中svg图片的代码中的width（宽） 和 height（高） 属性用于设置此 svg 图片的宽度和高度；version（版本） 属性用于定义所使用的 svg 版本，xmlns 属性用于定义 svg 命名空间；fill 属性用于设置形状内的颜色。
20.在步骤s2中，对svg对象绑定属性：当创建好实例化svg对象时，用户可以通过操作界面，渲染所选择的svg图片组件，通过组件的形式使用户实现对svg对象的属性进行赋值的功能，svg对象包括三个属性，分别是运动轨迹属性、动画时间属性和数据属性。
21.运动轨迹属性通过下拉选择框组件获取用户选择的属性值，下拉选择框组件配置属性值默认预设为上移、下移、左移、右移、旋转（以svg图中心为圆心）、自定义六种运动轨迹属性。所述自定义指的是上移、下移、左移、右移、旋转五种运动轨迹属性的组合；如顺时针旋转
‑
上移
‑
下移。
22.动画时间属性通过文本输入框组件获取用户输入的数据，时间属性和轨迹属性要配合使用，用来设置svg图片组件完成本次运动轨迹所花费的时长，默认单位为毫秒。使用者通过下拉选择框选择svg图片组件的运动轨迹配置属性值，并在动画时间配置属性的文本输入框内输入时间，调用svg图片组件的svg对象，获取运动轨迹配置属性值和动画时配置间属性值赋分别给svg对象的运动轨迹属性和动画时间属性，通过刷新浏览器展示svg图片组件的运动轨迹动画效果。
23.svg图片组件支持动画时钟计时，即svg图片组件在设置的时间内完成的。例如：运行的速度 = 运动轨迹的长度/动画时钟计时 或者 旋转速度 = 旋转角度/动画时钟计时。
24.数据属性的绑定：通过组件从接口获取数据，然后让数据赋值给svg图片组件的svg对象的数据属性，数据属性配合运动轨迹属性使用，当设定运动轨迹属性值后，如果接口返回数据为1代表让按照所设定的运动轨迹属性值运动，如果接口返回0，则停止运动。这里使用场景举例：运动轨迹属性值选择选择，接口返回数据为1代表让svg图片组件旋转，0代表代表让svg图片组件停止旋转。在步骤s3中，提供代码编辑区域，用于实现用户对svg图片组件的svg对象的属性值的设定。在代码编辑区域事先给出可以设定的svg对象的属性，且通过注释的形式提供属性含义和操作的说明。当用户选择svg图片组件后，在代码编辑区
域显示用于设定svg对象的属性值的函数及注释形式的属性含义和操作的说明。
25.如图3所示，按照设定好的规范载入数据，如果需要更加高级的用法，例如：想从后台通过调用接口的方式获取数据，接口返回的数据（可定义运动的轨迹、运动时长，旋转，旋转时长等等）赋值给svg图片组件的svg对象的属性，这样就实现了svg图片组件动态移动或者旋转的效果。
26.functiaon(event){var obj={animationiteration=true; //动画是否转动}callback(obj)}如上述代码的数据格式定义了svg图片组件是否开启旋转属性animationiteration，当animationiteration=true时，svg图组片件就开始旋转否则就停止转动。还可以定义更多的属性，包括：控制旋转启动和停止，位移的长度等；实例化的svg对象中，定义一个匿名函数，用于实现用户在函数内部通过写代码的形式设置svg对象的属性值，并把属性值结果返回给svg对象对应的属性。代码编辑区域支持调用接口，通过请求接口的形式返回事先设定的数据（包括用于设定属性的函数，需要赋值的属性及属性的含义和操作说明）并把用户设置的数据返回给实例化svg对象。最终呈现出svg图片组件动态的效果。
27.在适配屏幕方面，尤其是移动智能设备，对于移动设备、ipad等智能设备，屏幕旋转功能的实现，通过javascript提供的onorientationchange方法，动态获取屏幕的宽度和高度，已知当前svg图片组件的高和宽（通过svg图片的学习文档（xml格式的）得知），首次加载获取到设备屏幕的高和宽，当使用设备竖屏转横屏时：svg图片组件宽w
(svg宽) = 使用设备的横屏宽w
(横屏宽) / 使用设备的竖屏宽w
(竖屏宽) * svg图片组件宽w
(svg宽) ，svg图片组件高h
(svg高)
= svg图片组件高h
(svg高) * 使用设备的横屏宽w
(横屏宽) / 使用设备的竖屏宽w
(竖屏宽)
。当使用设备横屏转竖屏时：svg图片组件宽w(svg宽) =使用设备的竖屏宽w
(竖屏宽) /使用设备的横屏宽w
(横屏宽) *svg图片组件宽 w
(svg宽)
，svg图片组件高h
(svg高)
= svg图片组件高h
(svg高) * 使用设备的竖屏宽w
(竖屏宽) / 使用设备的横屏宽w
(横屏宽)
；通过计算 svg图片组件宽和svg图片组件高，分别赋值给svg对象中宽度和高度属性。当监测屏幕旋转则重新在获取屏幕的高和宽，同上。
28.对于本领域技术人员而言，显然本发明不限于上述示范性实施例的细节，而且在不背离本发明的基本特征的情况下是支持扩展性的，这点符合对象的封装、继承、多态三大特点。
29.总结：封装svg图片组件，实现了任意一张svg图都可实现动态效果，在实际的物联网等项目开发中极大提高了项目实施人员的工作效率，降低开发与实施成本，同时有效解决了svg图片在跨平台兼容性问题。
30.显然，本领域的技术人员应该明白，上述的本发明实施例的基于svg的图形组件封装方法各步骤可以用通用的计算装置来实现，它们可以集中在单个的计算装置上，或者分布在多个计算装置所组成的网络上，可选地，它们可以用计算装置可执行的程序代码来实
现，从而，可以将它们存储在存储装置中由计算装置来执行，并且在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤，或者将它们分别制作成各个集成电路模块，或者将它们中的多个模块或步骤制作成单个集成电路模块来实现。这样，本发明实施例不限制于任何特定的硬件和软件结合。