图形移动控制系统及方法
【专利摘要】一种图形移动控制系统及方法，该方法包括：在电子装置的显示设备上创建一个指定图形的图形显示区域及事件响应区域；获取该事件响应区域内的鼠标事件，根据鼠标的当前位置坐标确定该图形显示区域的新位置；在该图形显示区域的新位置重新显示该指定图形，以实现该指定图形在显示设备上的拖拽操作。利用本发明可以通过鼠标拖拽操作来改变SVG图形的位置。
【专利说明】图形移动控制系统及方法
【技术领域】
[0001]本发明涉及一种图形控制系统及方法，尤其涉及一种图形移动控制系统及方法。【背景技术】
[0002]SVG (Scalable Vector Graphics,可缩放矢量图)是基于可扩展标记语言XML,用于描述二维矢量图形的一种图形格式。SVG采用XML文本描述对象，完全开源，具有很好的交互性与动态性，完全支持DOM (文档对象模型，Document Object Model)。
[0003]跟一般的图形格式相比，SVG具有任意缩放、文本独立、较小文件、超强显示效果和超级颜色控制的优势，目前SVG除了在各大主流浏览器中被广泛支持，并且在手机应用中也扮演着举足轻重的角色，SVG手机将可能成为3G时代最重要的一个市场制高点。
[0004]SVG在与用户交互中也有一定的限制，比如当我们查看SVG图形时，虽然可以对图形进行放大缩小的无失真显示，但是却不能移动该SVG图形的位置。将SVG原图形放大或缩小后，图形的位置就会发生变化，有时部分图形甚至整个图形会消失在屏幕之外，如何能用鼠标自由拖拽的方式来调整SVG图形的位置(特别是放大或缩小后的位置)成为了迫切的需要。
【发明内容】
[0005]鉴于以上内容，有必要提供一种图形移动控制系统，其可通过鼠标拖拽操作来改变SVG图形的位置。
[0006]鉴于以上内容，有必要提供一种图形移动控制方法，其可通过鼠标拖拽操作来改变SVG图形的位置。
[0007]—种图形移动控制系统，应用于电子装置，该系统包括:设置模块，用于在电子装置的显示设备上创建一个指定图形的图形显示区域及事件响应区域；第一侦测模块，用于获取该事件响应区域内的鼠标事件，根据鼠标的当前位置坐标确定该图形显示区域的新位置；显示模块，用于在该图形显示区域的新位置重新显示该指定图形，以实现该指定图形在显示设备上的拖拽操作。
[0008]一种图形移动控制方法，应用于电子装置，该方法包括:设置步骤，在电子装置的显示设备上创建一个指定图形的图形显示区域及事件响应区域；第一侦测步骤，获取该事件响应区域内的鼠标事件，根据鼠标的当前位置坐标确定该图形显示区域的新位置；显示步骤，在该图形显示区域的新位置重新显示该指定图形，以实现该指定图形在显示设备上的拖拽操作。
[0009]相较于现有技术，所述的图形移动控制系统及方法，其可通过设置一个SVG图形的事件响应区域来响应鼠标的下按(onmousedown)、移动(onmousemove)、弹起(onmouseup)三个事件,通过鼠标拖拽操作来改变SVG图形的位置,如图形放大或缩小后的位置，提高了 SVG图形的用户交互性。【专利附图】
【附图说明】
[0010]图1是本发明图形移动控制系统的运行环境示意图。
[0011]图2是图形移动控制系统的功能模块图。
[0012]图3是本发明图形移动控制方法的较佳实施例的流程图。
[0013]图4是SVG图形的图形显示区域及事件响应区域的示意图。
[0014]主要元件符号说明
【权利要求】
1.一种图形移动控制系统，应用于电子装置，其特征在于，该系统包括: 设置模块，用于在电子装置的显示设备上创建一个指定图形的图形显示区域及事件响应区域； 第一侦测模块，用于获取该事件响应区域内的鼠标事件，根据鼠标的当前位置坐标确定该图形显示区域的新位置；及 显示模块，用于在该图形显示区域的新位置重新显示该指定图形，以实现该指定图形在显示设备上的拖拽操作。
2.如权利要求1所述的图形移动控制系统，其特征在于，该系统还包括: 第二侦测模块，用于当接收到一个鼠标弹起事件时，结束该指定图形在显示设备上的拖拽操作。
3.如权利要求1所述的图形移动控制系统，其特征在于，所述指定图形为可缩放矢量图形。
4.如权利要求1所述的图形移动控制系统，其特征在于，所述图形显示区域为包围该指定图形的第一矩形，所述事件响应区域为包围该图形显示区域的第二矩形。
5.如权利要求1所述的图形移动控制系统，其特征在于，所述第一侦测模块获取该事件响应区域内的鼠标事件，根据鼠标的当前位置坐标确定该图形显示区域的新位置包括: 当第一侦测模块侦测到该事件响应区域内的鼠标下按事件后，如果继续侦测到鼠标移动事件，则根据鼠标的当 前位置坐标对该图形显示区域做平移操作，从而确定该图形显示区域的新位置。
6.如权利要求5所述的图形移动控制系统，其特征在于，所述第一侦测模块根据鼠标的当前位置坐标对该图形显示区域做平移操作包括: 根据该鼠标的当前位置坐标和上一次的位置坐标计算一个平移向量；及根据该平移向量对该图形显示区域做平移操作，该指定图形跟随该图形显示区域同步做平移操作。
7.如权利要求5所述的图形移动控制系统，其特征在于，所述第一侦测模块还用于: 当侦测到该事件响应区域内的下按事件时，将图形显示区域的元素赋值给一个预先创建的元素变量；及 将该元素变量对应的元素添加到图形显示区域的父元素下，设置该元素变量的指针事件的属性为none。
8.如权利要求7所述的图形移动控制系统，其特征在于，所述第一侦测模块还用于: 当侦测到该事件响应区域内的移动事件时，判断是否存在该元素变量； 如果存在该元素变量，则将鼠标的当前位置坐标赋值给该元素变量，利用该元素变量中的该鼠标的当前位置坐标和上一次的位置坐标计算一个平移向量。
9.如权利要求7所述的图形移动控制系统，其特征在于，该系统还包括: 第二侦测模块，用于当接收到一个鼠标弹起事件时，判断是否存在该元素变量；及 如果存在该元素变量，则设置该元素变量的指针事件的属性为all，并将该元素变量赋值为null。
10.一种图形移动控制方法，应用于电子装置，其特征在于，该方法包括: 设置步骤，在电子装置的显示设备上创建一个指定图形的图形显示区域及事件响应区域； 第一侦测步骤，获取该事件响应区域内的鼠标事件，根据鼠标的当前位置坐标确定该图形显示区域的新位置 '及 显示步骤，在该图形显示区域的新位置重新显示该指定图形，以实现该指定图形在显示设备上的拖拽操作。
11.如权利要求10所述的图形移动控制方法，其特征在于，该方法还包括: 第二侦测步骤，当接收到一个鼠标弹起事件时，结束该指定图形在显示设备上的拖拽操作。
12.如权利要求10所述的图形移动控制方法，其特征在于，所述指定图形为可缩放矢量图形。
13.如权利要求10所述的图形移动控制方法，其特征在于，所述图形显示区域为包围该指定图形的第一矩形，所述事件响应区域为包围该图形显示区域的第二矩形。
14.如权利要求10所述的图形移动控制方法，其特征在于，所述第一侦测步骤包括: 当第一侦测模块侦测到该事件响应区域内的鼠标下按事件后，如果继续侦测到鼠标移动事件，则根据鼠标的 当前位置坐标对该图形显示区域做平移操作，从而确定该图形显示区域的新位置。
15.如权利要求14所述的图形移动控制方法，其特征在于，所述步骤根据鼠标的当前位置坐标对该图形显示区域做平移操作包括: 根据该鼠标的当前位置坐标和上一次的位置坐标计算一个平移向量；及根据该平移向量对该图形显示区域做平移操作，该指定图形跟随该图形显示区域同步做平移操作。
16.如权利要求14所述的图形移动控制方法，其特征在于，所述第一侦测步骤还包括: 当侦测到该事件响应区域内的下按事件时，将图形显示区域的元素赋值给一个预先创建的元素变量；及 将该元素变量对应的元素添加到图形显示区域的父元素下，设置该元素变量的指针事件的属性为none。
17.如权利要求16所述的图形移动控制方法，其特征在于，所述第一侦测步骤还包括: 当侦测到该事件响应区域内的移动事件时，判断是否存在该元素变量； 如果存在该元素变量，则将鼠标的当前位置坐标赋值给该元素变量，利用该元素变量中的该鼠标的当前位置坐标和上一次的位置坐标计算一个平移向量。
18.如权利要求16所述的图形移动控制方法，其特征在于，该方法还包括: 第二侦测步骤，当接收到一个鼠标弹起事件时，判断是否存在该元素变量 '及 如果存在该元素变量，则设置该元素变量的指针事件的属性为all，并将该元素变量赋值为null。
【文档编号】G06F3/0484GK103631474SQ201210310054
【公开日】2014年3月12日 申请日期:2012年8月28日 优先权日:2012年8月28日
【发明者】李忠一, 谢德意, 陶帅军, 易志强, 姚俊超 申请人:鸿富锦精密工业（深圳）有限公司, 鸿海精密工业股份有限公司