一种WEB组件的高效实现方法技术

本发明专利技术提出了一种WEB组件的高效实现方法。采用Adobe Illustrator绘制组件的外观，保存为SVG文件，用JavaScript获取SVG图形里的有关图元，通过设置图元的填充色、边框色、位置坐标、宽高、变换矩阵等属性，达到图形动态变化的目的，从而实现一个WEB组件。用AI工具绘制的组件外观可以做到非常的美观绚丽，而用于负责设置SVG图元属性的JS代码则非常短小简单。本发明专利技术突破了传统GUI组件的设计思想，将绘图工具与编程结合起来，为GUI组件设计带来了一个非常重要的设计思想。本发明专利技术不仅可以应用于WEB组件设计，也可以用于JAVA/C#做桌面GUI组件的设计。

【技术实现步骤摘要】

本专利技术涉及WEB组件的一种实现方法，属于计算机WEB软件领域。
技术介绍
信息是人类文明和社会交流的重要载体，文字是描述信息的主要手段，绝大多数的信息使用文字来描述保存，比如常见的书籍典籍。信息展示的历史伴随人类文明发展的历史，在计算机互联网时代，信息的展示尤其重要。但随着社会发展，用传统的文字形式来表现信息，远远不能满足大家的要求，原因是文字形式表现信息不够直观形象、不够方便快捷。于是可视化技术越来越受到人们的关注，它提供给人们更快键方便更直观生动的信息界面，使人们能够快速的获得信息。本专利技术涉及的可视化技术是WEB的可视化技术，WEB技术相比于桌面应用是较新的技术，尽管WEB展示技术相比桌面技术有其特有的优势（HTML的模型化界面构建以及JavaScript的快捷性），但桌面应用的技术积累及成熟度是当前WEB应用所不能比拟的。比如，实时监控系统的监控界面与绘图包软件，在其监控界面展示的丰富生动的接线图、控制图，都是由其提供的绘图包绘制出的。WEB系统需要类似的软件，但很少有厂家提供，因为这样的工作过于复杂。以JAVA平台的JFreeChart组件、.NET平台的CHART组件（Microsoft Chart Controls for Microsoft .NET Framework）为典型，GUI组件都是由组件自身来负责组件的绘制渲染，在其paintComponent/OnPaint方法里实现复杂的绘制处理。软件公司或组织提供的GUI组件，其外观效果比较美观，而个人实现的GUI组件的绘制效果很难做到美观绚丽，与Photoshop、 AI、CorelDRAW等绘图工具生成的图形相比有很大的差距。WEB领域的GUI组件延续了桌面系统的设计方法，存在同样的问题。
技术实现思路
本专利技术所要解决的技术问题是，提供一种WEB组件的高效实现方法。采用AI+SVG+JS技术来实现WB组件，以满足WEB领域日益繁重的信息综合展示及工业监控的需要。本专利技术的技术方案如下：一种WEB组件的高效实现方法，其特征在于：用 Adobe Illustrator绘制组件的外观，保存成组件的SVG文件；用JavaScript编写组件的处理代码，通过设置组件SVG中有关图元的包括填充色、边框、位置坐标、宽高和变换矩阵在内的属性，达到组件图形动态变化的目的，从而实现一个WEB组件。借助apache的Batik包，在JAVA平台上实现桌面的GUI组件。具体实现步骤如下：用Adobe Illustrator绘制组件的外观，并为需要操作的图形图元绑定ID属性，输出保存为SVG文件；用JavaScript编写组件的代码，在导入SVG控件的OBJECT标签里直接设置SRC属性或通过控件对象的setSrc方法设置组件的SVG文件名；组件的操作方法主要是用JavaScript获取SVG图形中的有关图元，通过设置组件图元包括填充色、边框、位置坐标、宽高和变换矩阵等在内的属性，达到图形动态变化的目的，从而实现一个WEB组件。本专利技术地积极效果在于：用AI（Adobe  Illustrator）工具绘制的组件外观可以做到非常美观绚丽，而用于负责设置SVG图元属性的代码则非常短小简单。当然本专利技术实现的组件不可能完全替代传统组件，存在一些局限，如不能像传统曲线CHART组件那样方便的增加曲线条数，但诸如修改刻度等功能，本专利技术的组件可以通过某些技巧来达到相似的效果。由于本专利技术把组件的渲染绘制工作和编程进行了有机地分离，组件开发可由不同角色的人员各司其职，从而把GUI组件实现得更美观、更可靠、更专业。在诸如监控系统大屏幕、驾驶舱等对显示效果非常关注、地位重要的应用场景以及需要众多特制仿真图形的应用场景，尤其适合采用本专利技术。本专利技术突破了传统组件的设计思想，将绘图工具引入到组件实现中与编程结合起来，为GUI组件设计带来了一个非常重要的设计思路。本专利技术不仅可以应用于WEB组件设计，也可以用于JAVA/C#做桌面GUI组件的设计。附图说明图1 是采用SVG+JS实现的基于WEB的CHART组件效果图，采用传统GUI组件实现方法。尽管比JAVA/C#等高级语言实现的GUI组件的代码量降低不少，但每个组件仍有两千多行。图2是本专利技术实现的时钟组件效果图。图3是本专利技术实现的表盘组件效果图。从图2、图3看出，本专利技术采用AI+SVG+JS实现的组件，渲染非常美观绚丽，而大多数这类组件的代码则只有100多行，专用代码不过20几行。图4是本专利技术实现的椎体组件效果图。从图4看出，采用本专利技术的方法，不仅可以实现如时钟那样单一的旋转，还可以实现由多种SVG属性组成的动态变化效果。图5是本专利技术实现的盾构的输送机监控组件效果图。输送机监控组件这类组件是传统组件思路很难实现的，琐碎繁杂的绘制工作非常不适合直接用编程产生。图6是本专利技术采用AI工具绘制的表盘的SVG文件，通过图6这个文件可以更好地的理解本专利技术的方法。附图7 是在组态软件中常见的储液罐效果图。附图8 是水电站水位监视效果图。附图9 是将本专利技术的思想应用到JAVA平台上，实现的桌面GUI组件的测试界面。具体实施方式下面结合具体实施方式和附图对本专利技术作更进一步的说明。本专利技术WEB组件的高效实现方法是，用 Adobe Illustrator绘制组件的外观，保存成组件的SVG文件；用JavaScript编写组件的处理代码，通过设置组件SVG中有关图元的包括填充色、边框、位置坐标、宽高和变换矩阵在内的属性，达到组件图形动态变化的目的，从而实现一个WEB组件。借助apache的Batik包，本专利技术的方法可以应用到JAVA平台上，实现桌面的GUI组件。本专利技术WEB组件的实现步骤是：用Adobe Illustrator绘制组件的外观，并为需要操作的图形图元绑定ID属性，输出保存为SVG文件；用JavaScript编写组件的代码，在导入SVG控件的OBJECT标签里直接设置SRC属性或通过控件对象的setSrc方法设置组件的SVG文件名；组件的操作方法主要是用JavaScript获取SVG图形中的有关图元，通过设置组件图元包括填充色、边框、位置坐标、宽高和变换矩阵等在内的属性，达到图形动态变化的目的，从而实现一个WEB组件。本专利技术在本文列出的实现代码全部在IE浏览器上测试通过，由于采用SVG技术，所以需要在IE浏览器上安装ADOBE的SVG插件（svgviewer.exe）。（1）、图2所示时钟组件的处理。代码只要处理指针旋转就可以，下面的代码通过设置每个指针图元的Transform属性来达到旋转指针的目的。参数angle是指定旋转的角度，x1/y1是圆心的坐标。坐标旋转比较容易理解，用三角函数很容易导出点（x，y）以原点为圆心逆时针旋转a角度的坐标是（cos(a)*x+sin(a)*y，-sin(a)*x+cos(a)*y ），于是其变换矩阵如下：            本文档来自技高网...

【技术保护点】
一种WEB组件的高效实现方法，其特征在于：用 Adobe Illustrator绘制组件的外观，保存成组件的SVG文件；用JavaScript编写组件的处理代码，通过设置组件SVG中有关图元的包括填充色、边框、位置坐标、宽高和变换矩阵在内的属性，达到组件图形动态变化的目的，从而实现一个WEB组件。

【技术特征摘要】
1.一种WEB组件的高效实现方法，其特征在于：用 Adobe Illustrator绘制组件的外
观，保存成组件的SVG文件；用JavaScript编写组件的处理代码，通过设置组件SVG中有关图元的包括填充色、边框、位置坐标、宽高和变换矩阵在内的属性，达到组件图形动态变化的目的，从而实现一个WEB组件。
2.如权利要求1所述的WEB组件的高效实现方法，其特征在于：借助apache的Batik包，在JAVA平台上实现桌面的GUI组件。
3.如权利要求1或所述的WEB组件的高...

【专利技术属性】
技术研发人员：林玉东，刘海林，王志强，李盼盼，黄明辉，邹全喜，单婧婧，
申请(专利权)人：东方电子股份有限公司，
类型：发明
国别省市：山东;37