CN104991993A - 一种场地信息图形的处理方法 - Google Patents

Abstract

本发明提供了一种场地信息图形的处理方法，包括：接收来自目标场地的场地信息和位置信息；将所述场地信息和位置信息集成为编码流数据；将所述编码流数据解析为目标场地图形后发送至图形绘制系统；绘制系统根据所述目标场地图形自动提取场地SVG轮廓图形；根据所述目标场地图形中的目标场地的位置信息对自动提取的场地SVG轮廓图形进行位置修正；将位置修正后的场地SVG轮廓图形利用转换引擎转换为编码流数据保存。本发明提供的一种场地信息图形的处理方法，实现了对场地的高效绘制，可以在不同的浏览器下达到完美的仿真和展示效果。

Description

一种场地信息图形的处理方法

技术领域

本发明涉及一种场地信息图形的处理方法，属于计算机应用技术领域。

背景技术

随着文化事业的发展，针对演出的场地场馆越来越多，越来越来的演出场地剔除了更多的要求，涉及到场地的绘制，场地的展示等，特别在WEB浏览器中急需一种兼容性好，扩展性强，展示性能高的呈现技术。

目前多数的演出场地呈现多由Flash技术实现，Flash是一种功能强大的网站设计技术，从绘图学观点来说，Flash确实能产生高水平的视觉影响力。但Flash本身也拥有很多的缺点，它的安全性、稳定性都受到很大质疑，Chrome、Safari、Firefox都为Plug-in加入Sandbox保护，避免系统崩溃。如果Flash网站很大，架构又不完善，导致载入时间比较长；即使Flash网站优化很好了，但是浏览者的带宽接入速度慢的话也会导致载入时间比较长。

SVG可缩放矢量图形(Scalable Vector Graphics)是基于可扩展标记语言(XML)，用于描述二维矢量图形的一种图形格式。SVG由W3C制定，是一个开放标准。SVG包括3种类型的对象：矢量图形(包括直线、曲线在内的图形边)、点阵图像和文本。各种图像对象能够组合、变换，并且修改其样式，也能够定义成预处理对象。SVG可以与Java技术一起运行，SVG是开放的标准，它的文件是纯粹的XML，SVG的主要竞争者是Flash。与Flash相比，SVG最大的优势是与其他标准(比如XSL和DOM)相兼容。而Flash则是未开源的私有技术。

现有技术中提供了一种将利用SVG绘制演出场地信息的方法及系统。该方法：首先用户登录系统，进入GUI界面，创建演出场地的基本信息包括场地名称等，基本信息编辑完成后，进行步骤10，在步骤10中，如果当前查看的场地已经存在数据则SVG解析引擎启动对SVG进行解析并展示，如果是一个新的场地，则执行步骤20，启动绘制模块，加载绘制工具集，用户利用绘制工具集中提供的功能进行场地图形的编辑工作，编辑完成后，进入步骤30，对场地的区域排座等信息进行定义，期间系统提供定义工具可以快速实现定义流程，定义完成后，进入步骤40，系统转换工具将SVG进行转换，保存用户上述的操作成果。编辑完成的SVG场馆图可以在浏览器中快速展示。

现有技术中，并没有对场地信息进行示意图展示，用户体验感较差。

发明内容

为了解决上述技术问题，本发明提供了一种场地信息图形的处理方法，该方法使用编码流数据结构基于SVG技术可以实现对演出场地的高效逼真绘制，可以在不同的浏览器下达到完美的展示效果，该方法包括如下步骤：

接收来自目标场地的场地信息和位置信息；

将所述场地信息和位置信息集成为编码流数据；

将所述编码流数据解析为目标场地图形后发送至图形绘制系统；

绘制系统根据所述目标场地图形自动提取场地SVG轮廓图形；

根据所述目标场地图形中的目标场地的位置信息对自动提取的场地SVG轮廓图形进行位置修正；

将位置修正后的场地SVG轮廓图形利用转换引擎转换为编码流数据保存。

进一步的，所述目标场地的场地信息包括：目标场地区域信息、目标场地楼层信息或目标场地座信息中的一种或多种。

进一步的，所述目标场地的位置信息包括：目标场地区域位置信息、目标场地楼层位置信息或目标场地座位排列信息中的一种或多种。

进一步的，所述绘制系统根据所述目标场地图形自动提取场地SVG轮廓图形具体包括：

识别目标场地图形的轮廓特征，根据所述轮廓特征生成轮廓路径，将SVG图形元素应用于所述轮廓路径，生成SVG轮廓图形。

更进一步的，所述目标场地图形的轮廓特征包括可编辑的名称特征、单独可编辑的位置特征和可编辑的位置关系特征中的一种或多种。

更进一步的，所述识别目标场地图形的轮廓特征具体包括：

基于Javascript的鼠标事件，选中或圈选区域定义名称，使用颜色引擎自动筛选相似的颜色，将自动筛选相似的颜色的部分快速定义相邻编号和名称编号，定义目标场地信息的基本信息。

进一步的，所述根据所述目标场地图形中的目标场地的位置信息对自动提取的场地SVG轮廓图形进行位置修正具体包括：

自动计算目标场地图形的轮廓特征位置关系，所述位置关系包括每个轮廓间的距离和角度；

根据计算结果对SVG轮廓图形的位置进行修正。

进一步的，所述根据计算结果对SVG轮廓图形的位置进行修正，具体包括：

根据自动计算目标场地图形的轮廓特征位置关系，对所述SVG轮廓图形进行旋转、缩放、平移、弧度、错位和复制删除的矩阵变化的修正；或

对所述SVG轮廓图形进行组合、增加或删除图形元素的修正。

进一步的，所述将位置修正后的场地SVG轮廓图形利用转换引擎转换为编码流数据保存之后还包括：

将所述编码流数据放入浏览器进行矢量图形展示；或

导出矢量图和/或位图图片。

所述编码流数据包括JSON、二进制流或XML。

将所述场地信息和位置信息集成为编码流数据之后，还包括：

将所述编码流数据发送至服务器，用于在收到点击命令之后，将所述编码流数据解码播放。

本发明提供了一种场地信息图形的处理方法，实现对演出场地的楼区排座信息的快速绘制，以及在不同的浏览器，包括手机、PC端的逼真展示。

具体实施方式

下面对本发明的技术方案进行具体阐述，需要指出的是，本发明的技术方案不限于实施例所述的实施方式，本领域的技术人员参考和借鉴本发明技术方案的内容，在本发明的基础上进行的改进和设计，应属于本发明的保护范围。

实施例一

该方法包括如下步骤：

S101:接收来自目标场地的场地信息和位置信息；

目标场地装有多个拍摄工具或录像工具，所述多个拍摄工具或录像工具将拍摄或者录像的自目标场地的场地信息和位置信息发送至服务器，服务器接收至少一个所述拍摄工具和录像工具拍摄的自目标场地的场地信息和位置信息进行处理。

处理后的图像可按精准比例尺还原场馆座位精确的座位分布；

服务器接收并计算目标场地中，当前场地座位的比例信息，默认按照100％比例尺显示场次。

S102:将所述场地信息和位置信息集成为编码流数据；

所述编码流数据包括JSON、二进制流或XML。

将演出场地楼区排座信息和位置信息集成为编码流数据，存储在编码流数据解析模块上。

S103:将所述编码流数据解析为目标场地图形后发送至图形绘制系统和/或将所述编码流数据发送至服务器，用于在收到点击命令之后，将所述编码流数据解码播放。

所述播放的内容为以当前位置为中心显示半径区域的图片、视频或其他音视频文件。所述播放的内容为以当前位置为中心显示半径区域的图片、视频，优选为从当前选择的点为中心向外辐射的视角显示周围景象的观看感。所述周围的景象包括座位图片、出入口、舞台、卫生间、残疾座、柱子等逼真场景的展示。

其他音视频文件包括与目标场地相关的广告信息、影视简介、影视片花、演出场次，电影院场次、歌剧厅场次、舞台场次、演唱会场地等。

解析后的图形为矢量图或者位图图形。该图形显示当前场地座位的比例信息，默认按照100％比例尺显示场次。

S104:绘制系统根据所述目标场地图形自动提取场地SVG轮廓图形；

绘图系统根据接收到改变比例命令执行图形比例缩放。

改变比例命令包括根据比例尺点击命令或接收输入装置的输入命令态改变比例，场地根据当前比例显示不同的场次信息，例如在默认比例尺下显示全部区域和座位的简单信息，当比例尺缩小为50％后，将重点突出显示某一个区域的座位并展示其详细信息。

S105:根据所述目标场地图形中的目标场地的位置信息对自动提取的场地SVG轮廓图形进行位置修正；

S106:将位置修正后的场地SVG轮廓图形利用转换引擎转换为编码流数据保存。

进一步的，所述目标场地的场地信息包括：目标场地区域信息、目标场地楼层信息或目标场地座信息中的一种或多种。

进一步的，所述目标场地的位置信息包括：目标场地区域位置信息、目标场地楼层位置信息或目标场地座位排列信息中的一种或多种。

进一步的，所述绘制系统根据所述目标场地图形自动提取场地SVG轮廓图形具体包括：

识别目标场地图形的轮廓特征，根据所述轮廓特征生成轮廓路径，将SVG图形元素应用于所述轮廓路径，生成SVG轮廓图形。

更进一步的，所述目标场地图形的轮廓特征包括可编辑的名称特征、单独可编辑的位置特征和可编辑的位置关系特征中的一种或多种。

更进一步的，所述识别目标场地图形的轮廓特征具体包括：

基于Javascript的鼠标事件，选中或圈选区域定义名称，使用颜色引擎自动筛选相似的颜色，级联自动筛选相似的颜色的部分并快速定义相邻编号和名称编号，定义目标场地信息的基本信息。

其中，使用颜色引擎自动筛选相似的颜色具体包括：当选定的第一区域接收到预设值的颜色后，将区域名称与颜色信息缓存到浏览器中，同时将此颜色信息的状态标记为已使用，当下一个区域设置颜色时，根据区域名称去缓存中检索与该名称对应的颜色，检索到后调取该颜色并应用，如果检索不到，则查询为未使用的颜色，取第一个颜色值，同时将取的第一个颜色值进行缓存并标记为已使用。

级联自动筛选相似的颜色的部分并快速定义相邻编号和名称编号，可通过手动定义和系统根据预设值增值进行自动定义。

其中，快速定义相邻编号和名称编号具体包括：接收点击圈选信号，选中图形，此时，服务器根据接收到的点击圈选信号所选中图形，判断该图形是否定义了名称信息，如果定义了名称信息，则标注圈选区域为红色虚线边缘，对圈选区域中同一排的图形进行排序，根据排序顺序定义相邻编号和名称编号，排序算法为优先比较X坐标，如果X相同，比较Y坐标。

排序完成后，监听用户的键盘操作，如果用户设置了选中的座位的编号(号码)，以及座位与座位之间的间隔数，方向，则获取这些信息，其中：间隔数指下一个座位与上一个座位的间隔数，可以为正负；方向指是按正向或者逆向循环同一排的座位，数值也可以为正负值。

进一步的，所述根据所述目标场地图形中的目标场地的位置信息对自动提取的场地SVG轮廓图形进行位置修正具体包括：

自动计算目标场地图形的轮廓特征位置关系，所述位置关系包括每个轮廓间的距离和角度；

根据计算结果对SVG轮廓图形的位置进行修正。

进一步的，所述根据计算结果对SVG轮廓图形的位置进行修正，具体包括：

根据自动计算目标场地图形的轮廓特征位置关系，对所述SVG轮廓图形进行旋转、缩放、平移、弧度、错位和复制删除的矩阵变化的修正；或

对所述SVG轮廓图形进行组合、增加或删除图形元素的修正。

其中，旋转步骤包括：服务器接收鼠标点击命令，使用Javascript提供的API获取’transform’图形属性，通过鼠标指针的位移计算出旋转角度，将角度信息赋值给transform中的rotate属性，改变其旋转角度，使其发生旋转；

缩放步骤包括：接收鼠标滚动时画布的缩放比例或接收预设置的比例，根据接收到的比例计算出画布的视窗大小(viewBox)，并把值赋给画布实现缩放；

平移步骤包括：接收鼠标指针的位移，并将位移转化为测量目标元素的translate属性赋值给目标元素，实现图形元素的平移；

弧度步骤包括：以场地座位图形绘制为例，通过range表单动态设计圆弧的半径大小，右弧以每排的第一个座位的x坐标为圆心的x坐标，通过半径大小计算出圆心y坐标，然后得出圆的方程式，再将每个座位的x坐标代入方程式中计算出y坐标以实现座位的弧线排列。中弧、左弧原理一样只是计算圆心的x坐标方式不同，中弧的圆心的x坐标是以每排座位的第一个和最后一个座位的中间位置来计算x坐标。左弧是以每排座位的最后一个座位的x值为圆心的x坐标；

错位步骤包括：通过错位比例计算偶数排座位相对于前排座位的位移差实现错位效果；

复制删除步骤包括：接收选中命令选中的一个座位分组，监听键盘事件，如果按下的为ctrl+v，则克隆选中的元素，并添加的画布中，如果按下的为delete则从画布中删除。

进一步的，所述将位置修正后的场地SVG轮廓图形利用转换引擎转换为编码流数据保存之后还包括：

将所述编码流数据放入浏览器进行矢量图形展示；或

导出矢量图和/或位图图片。

本发明提供了一种场地信息图形的处理方法，基于SVG这个标准提供了一种绘制并展示演出场地的方法，大大节省了使用Flash技术去开发展示的成本，由于可在图像质量不下降的情况下被放大的可伸缩性，可将图像可在任何的分辨率下被高质量地打印，其图形和文本是分离的，也可被搜索，很适合制作地图。

同时，本发明提供的场地信息图形的处理方法还表现在用户观看视角的改变，用户通过浏览器查阅场次图形时，当鼠标滑动在座位中或对座位图片进行缩放，显示座位详情和视觉图片；在浏览器中，用户鼠标移动到座位或者区域上，展示浮层，浮层中显示座位的基本信息，给客户以更加具体生动的视觉体验。用户通过点击当前位置，可以从当前位置切换到向外辐射的视角范围以显示周围区域的图片或视频，体验身临其境的感受。

如果进行购票，除了可以切换到向外辐射的视角显示周围区域的图片或视频外，还可以显示与目标场地相关的广告信息、影视简介、影视片花、演出场次，电影院场次、歌剧厅场次、舞台场次、演唱会场地等。

最后应说明的是：以上所述仅为发明的优选实施例而已，并不用于限制发明，尽管参照前述实施例对发明进行了详细的说明，对于本领域的技术人员来说，其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换。凡在发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在发明的保护范围之内。

Claims (10)

1.一种场地信息图形的处理方法，其特征在于，包括：

接收来自目标场地的场地信息和位置信息；

将所述场地信息和位置信息集成为编码流数据；

将所述编码流数据解析为目标场地图形后发送至图形绘制系统；

绘制系统根据所述目标场地图形自动提取场地SVG轮廓图形；

根据所述目标场地图形中的目标场地的位置信息对自动提取的场地SVG轮廓图形进行位置修正；

将位置修正后的场地SVG轮廓图形利用转换引擎转换为编码流数据保存。

2.如权利要求1所述的处理方法，其特征在于，所述目标场地的场地信息包括：目标场地区域信息、目标场地楼层信息或目标场地座信息中的一种或多种。

3.如权利要求1所述的处理方法，其特征在于，所述目标场地的位置信息包括：目标场地区域位置信息、目标场地楼层位置信息或目标场地座位排列信息中的一种或多种。

4.如权利要求1所述的处理方法，其特征在于，所述绘制系统根据所述目标场地图形自动提取场地SVG轮廓图形具体包括：

识别目标场地图形的轮廓特征，根据所述轮廓特征生成轮廓路径，将SVG图形元素应用于所述轮廓路径，生成SVG轮廓图形。

5.如权利要求4所述的处理方法，其特征在于，所述目标场地图形的轮廓特征包括可编辑的名称特征、单独可编辑的位置特征和可编辑的位置关系特征中的一种或多种。

6.如权利要求4所述的处理方法，其特征在于，所述识别目标场地图形的轮廓特征具体包括：

基于Javascript的鼠标事件，选中或圈选区域定义名称，使用颜色引擎自动筛选相似的颜色，将自动筛选相似的颜色的部分快速定义相邻编号和名称编号，定义目标场地信息的基本信息。

7.如权利要求1所述的处理方法，其特征在于，所述根据所述目标场地图形中的目标场地的位置信息对自动提取的场地SVG轮廓图形进行位置修正具体包括：

自动计算目标场地图形的轮廓特征位置关系，所述位置关系包括每个轮廓间的距离和角度；

根据计算结果对SVG轮廓图形的位置进行修正。

8.如权利要求7所述的处理方法，其特征在于，所述根据计算结果对SVG轮廓图形的位置进行修正，具体包括：

根据自动计算目标场地图形的轮廓特征位置关系，对所述SVG轮廓图形进行旋转、缩放、平移、弧度、错位和复制删除的矩阵变化的修正；或

对所述SVG轮廓图形进行组合、增加或删除图形元素的修正。

9.如权利要求1所述的处理方法，其特征在于，所述将位置修正后的场地SVG轮廓图形利用转换引擎转换为编码流数据保存之后还包括：

将所述编码流数据放入浏览器进行矢量图形展示；或

导出矢量图和/或位图图片。

10.如权利要求1所述的处理方法，其特征在于，将所述场地信息和位置信息集成为编码流数据之后，还包括：

将所述编码流数据发送至服务器，用于在收到点击命令之后，将所述编码流数据解码播放。