一种基于网页的电力模拟图的绘制与显示方法技术

本发明专利技术公开了一种基于网页的电力模拟图的绘制与显示方法，它是结合了RaphaelJS对电力模拟图进行绘制和显示的方法。本发明专利技术的方法无需在客户端安装任何插件，且对浏览器具有更大的兼容性，可大大提高了用户的使用便捷性。

【技术实现步骤摘要】
一种基于网页的电力模拟图的绘制与显示方法
本专利技术涉及一种电力模拟图的绘制与显示方法，特别是一种基于网页的电力模拟图的绘制与显示方法。
技术介绍
目前基于Web的电力模拟图显示，普遍采用单一的Flash技术、SVG技术或者VML技术实现。Flash技术形成的SWF文件是经过封装的二进制代码文件，他人无法进行编辑和修改，并且客户端需要安装专有的插件才能进行浏览；SVG技术的由W3C制定的基于XML来描述二维矢量图型的一个开放标准,它用文本格式的描述性语言来描述图像内容,是一种和图像分辨率无关的矢量图形格式。但SVG图像在IE8及其早期版本同样需要安装特定的插件才能进行浏览。VML是TheVectorMarkupLanguage(矢量可标记语言)的缩写。VML支持广泛的矢量图形特征，它们基于由相连接的直线和曲线描述路径。但基于VML形成的矢量图只支持IE浏览器，无法支持其它主流浏览器。
技术实现思路
本专利技术的目的在于，提供一种基于网页的电力模拟图的绘制与显示方法。本专利技术的方法无需在客户端安装任何插件，且对浏览器具有更大的兼容性，可大大提高了用户的使用便捷性。本专利技术的技术方案：一种基于网页的电力模拟图的绘制与显示方法，其特点是，包括以下步骤：定义基本图元类型库和电力图元类型库；设定要绘制的电力模拟图中每个图元的属性参数，图元包括电力图元和基本图元的；调用RaphaelJS(一种用于在网页中绘制矢量图形的Javascript库)的Paper方法，初始化画布引擎；RaphaelJS自动读取当前页面的window.SVGAngle属性和document.implementation.hasFeature来判断浏览器是否支持SVG引擎，否则采用VML引擎；RaphaelJS根据电力模拟图的ID从服务器获取所有该电力模拟图的各个电力图元和基本图元的图元属性参数，并通过JSON传输给前端页面，前端页面遍历所有图元属性参数，在判断图元类型后以调取基本图元类型库和电力图元类型库的方式生成不同的图元对象。RaphaelJS根据图元属性参数在画布上绘制图元对象，调用attr方法(即用于设置图元的属性的方法，包括坐标位置、填充颜色、宽高度、线条属性、路径、字体、转换信息等)设置图元的样式，并根据图元属性参数绘制对应的控制点，最后调用图元的render方法在画布上呈现元素。上述的基于网页的电力模拟图的绘制与显示方法中，所述基本图元的属性参数包括了元素名称、元素类型、元素坐标、宽度、高度、半径、线条颜色、线条类型、线条头部类型、线条透明度、线条宽度、线条结束箭头、填充颜色、填充透明度、文字内容、字体大小、字体和字体粗细；所述电力图元的属性参数在基本图元的属性参数基础上还包括元素状态、元素偏移量、缩放比例、旋转角度、关联组名和元素描述属性。前述的基于网页的电力模拟图的绘制与显示方法中，所述基本图元和电力图元的类型分别来自于基本图元类型库和电力图元类型库，且每个电力图元类型都包含了名称和状态，每个状态又包括了状态名称、路径、线条颜色、填充颜色和动画。前述的基于网页的电力模拟图的绘制与显示方法中，所述图元均由RaphaelJS的基本形状通过path方法扩展生成，并添加了用于控制与显示的控制点、方法、事件来实现图元的属性变化、移动、绽放和状态改变功能。与现有技术相比，本专利技术通过将RaphaelJS应用结合到力模拟图的绘制与显示中，解决了电力模拟图在网页上显示时的浏览器兼容问题，而且还利用了RaphaelJS的基本形状，以定义属性参数的方法，方便地实现了电力模拟图中各个图元的绘制以及其它功能扩展。具体实施方式下面结合附图和实施例对本专利技术作进一步的说明，但并不作为对本专利技术限制的依据。实施例。一种基于网页的电力模拟图的绘制与显示方法，包括以下步骤：定义基本图元类型库和电力图元类型库；设定要绘制的电力模拟图中每个图元的属性参数，图元包括电力图元和基本图元的；调用RaphaelJS的Paper方法，初始化画布引擎；RaphaelJS自动读取当前页面的window.SVGAngle属性和document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure","1.1")来判断浏览器是否支持SVG引擎，否则采用VML引擎；RaphaelJS根据电力模拟图的ID从服务器获取所有该电力模拟图的各个电力图元和基本图元的图元属性参数，并通过JSON传输给前端页面，前端页面遍历所有图元属性参数，在判断图元类型后以调取基本图元类型库和电力图元类型库的方式生成不同的图元对象。RaphaelJS根据图元属性参数在画布上绘制图元对象，调用attr方法设置图元的样式，并根据图元属性参数绘制对应的控制点，最后调用图元的render方法在画布上呈现元素。所述基本图元的属性参数包括了元素名称、元素类型、元素坐标、宽度、高度、半径、线条颜色、线条类型、线条头部类型、线条透明度、线条宽度、线条结束箭头、填充颜色、填充透明度、文字内容、字体大小、字体和字体粗细；所述电力图元的属性参数在基本图元的属性参数基础上还包括元素状态、元素偏移量、缩放比例、旋转角度、关联组名和元素描述属性。所述基本图元和电力图元的类型分别来自于基本图元类型库和电力图元类型库，且每个电力图元类型都包含了名称和状态，每个状态又包括了状态名称、路径、线条颜色、填充颜色和动画。所述图元均由RaphaelJS的基本形状通过path方法扩展生成，并添加了用于控制与显示的控制点、方法、事件来实现图元的属性变化、移动、绽放和状态改变功能。其中包括的主要方法说明：render：呈现元素，通过启用RaphaelJS的呈现方法将图形显示在界面中；select：选中元素；unselect：取消选中元素；getdata：获取元素对应的所有属性；geteditdata：获取元素可编辑的属性，并显示在编辑框中；seteditdata：设置元素编辑后的属性。本专利技术中电力图元库的图形控制主要通过path来生成复杂的图像。path包括M(移动)、L(直线)、H(水平直线)、V(垂直直接)、A(弧红)、C(三次贝塞尔曲线)、S(特殊三次贝塞尔曲线)、Q(二次贝塞尔曲线)、T(特殊二次贝塞尔曲线)、Z(闭合)命令，通过这些命令的组合，可形成任意复杂的矢量图形。由此，本方案适用于诸如化工控制、供水系统控制、计算机网络等各行业的模拟图显示。本文档来自技高网...

【技术保护点】
一种基于网页的电力模拟图的绘制与显示方法，其特征在于，包括以下步骤：定义基本图元类型库和电力图元类型库；设定要绘制的电力模拟图中每个图元的属性参数，图元包括电力图元和基本图元的；调用RaphaelJS的Paper方法，初始化画布引擎；RaphaelJS自动读取当前页面的window.SVGAngle属性和document.implementation.hasFeature来判断浏览器是否支持SVG引擎，否则采用VML引擎；RaphaelJS根据电力模拟图的ID从服务器获取所有该电力模拟图的各个电力图元和基本图元的图元属性参数，并通过JSON传输给前端页面，前端页面遍历所有图元属性参数，在判断图元类型后以调取基本图元类型库和电力图元类型库的方式生成不同的图元对象。RaphaelJS根据图元属性参数在画布上绘制图元对象，调用attr方法设置图元的样式，并根据图元属性参数绘制对应的控制点，最后调用图元的render方法在画布上呈现元素。

【技术特征摘要】
1.一种基于网页的电力模拟图的绘制与显示方法，其特征在于，包括以下步骤：定义基本图元类型库和电力图元类型库；设定要绘制的电力模拟图中每个图元的属性参数，图元包括电力图元和基本图元；调用RaphaelJS的Paper方法，初始化画布引擎；RaphaelJS自动读取当前页面的window.SVGAngle属性和document.implementation.hasFeature来判断浏览器是否支持SVG引擎，如果不支持，则采用VML引擎；RaphaelJS根据电力模拟图的ID从服务器获取所有该电力模拟图的各个电力图元和基本图元的图元属性参数，并通过JSON传输给前端页面，前端页面遍历所有图元属性参数，在判断图元类型后以调取基本图元类型库和电力图元类型库的方式生成不同的图元对象；RaphaelJS根据图元属性参数在画布上绘制图元对象，调用attr方法设置图元的样式，并根据图元属性参数绘制对应的控制点，最后调用图元的render方法在画布上呈现元素。2.根据权利要...

【专利技术属性】
技术研发人员：姜岷，钱国春，解俊峰，屠伟东，傅嘉辉，潘毅，李鸿，吕小锋，王徐山，周淳晖，金哲超，
申请(专利权)人：国家电网公司，国网新源控股有限公司，国网新源水电有限公司富春江水力发电厂，
类型：发明
国别省市：北京;11