CN104461260A - 一种实现svg自定义鼠标右键菜单的方法 - Google Patents
一种实现svg自定义鼠标右键菜单的方法 Download PDFInfo
- Publication number
- CN104461260A CN104461260A CN201410694282.XA CN201410694282A CN104461260A CN 104461260 A CN104461260 A CN 104461260A CN 201410694282 A CN201410694282 A CN 201410694282A CN 104461260 A CN104461260 A CN 104461260A
- Authority
- CN
- China
- Prior art keywords
- self
- defining
- clickmenu
- svg
- menu
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
- G06F3/0482—Interaction with lists of selectable items, e.g. menus
Abstract
本发明公开了一种实现SVG自定义右键菜单的方法,包括下列步骤:(1)阻止默认的网页右键菜单行为,(2)创建自定义菜单,(3)显示自定义右键菜单,(4)隐藏自定义右键菜单。本发明方法具有浏览器兼容性,支持对SVG图形整体以及SVG图形中部分对象添加右键菜单。与现有技术相比,本发明具有以下优点:1、浏览器兼容性,支持InternetExplorer,googlechrome浏览器,firefox浏览器,Safari浏览器,opera浏览器,无需安装插件。2、支持对SVG图形整体以及SVG图形中部分对象添加右键菜单。
Description
技术领域
本发明涉及计算机领域,尤其涉及一种实现SVG自定义右键菜单的方法。
背景技术
SVG(Scalable vector graphics,可缩放矢量图形) 是基于XML(Extensible Markup Language,可扩展标记语言)用于描述二维矢量图形的一种图形格式。使用鼠标右键菜单对SVG进行操作可丰富对SVG的交互操作。然而,SVG本身并不提供鼠标右键菜单,在SVG图形上点击鼠标右键出现的是浏览器提供的鼠标右键菜单。现有的右键重构方法通过在Adobe SVG Viewer 3.0(ASV3)的脚本环境中重构菜单的内容和样式的来实现自定义右键菜单,仅针对安装了Adobe SVG Viewer插件的浏览器,同时该方法只能对SVG图形整体添加右键菜单,而不能对SVG图形中的部分对象添加右键菜单。
发明内容
本发明主要是解决现有技术所存在的技术问题;提供了一种支持Internet Explorer,google chrome浏览器,firefox浏览器,Safari 浏览器,opera浏览器,无需安装插件的实现SVG自定义鼠标右键菜单的方法。
本发明还有一目的是解决现有技术所存在的技术问题;提供了一种持对SVG图形整体以及SVG图形中部分对象添加右键菜单的实现SVG自定义鼠标右键菜单的方法。
本发明的上述技术问题主要是通过下述技术方案得以解决的:
一种实现SVG自定义鼠标右键菜单的方法,其特征在于,包括以下步骤:
步骤1,阻止网页右键模块基于SVG 脚本阻止默认的网页右键菜单行为,具体是,当触发客户端的右键菜单事件时,返回false值。
步骤2,创建右键菜单模块利用SVG预定义的矩形和文本创建自定义右键菜单,初始状态下,设置自定义右键菜单visibility属性值定义为hidden,并将自定义右键菜单叠加在SVG图形的最上层。
步骤3,显示模块设置自定义函数,并基于步骤2创建的自定义右键菜单根据鼠标的坐标和网页窗口计算当前自定义右键菜单坐标并显示自定义右键菜单;具体方法是:
显示模块绑定自定义函数至鼠标右键单击事件,鼠标右键单击事件目标源为SVG元素,显示模块首先判断鼠标按键是否为右键,若按键动作是右键,则获取鼠标当前位置坐标,计算当前自定义右键菜单坐标位置,通过改变组成自定义菜单的矩形、文本的x、y属性值使得自定义右键菜单左上角坐标与鼠标当前位置坐标相同,并将自定义右键菜单visibility属性值设置为visible;若按键动作不为右键则不执行操作。
步骤4,隐藏菜单模块设置自定义函数隐藏自定义右键菜单,绑定该自定义函数至鼠标左键单击事件,当鼠标左键单击SVG图形上除自定义右键菜单外的其它地方时自定义右键菜单隐藏。鼠标左键单击事件目标源为除自定义右键菜单外的其他SVG图形,自定义函数通过将自定义右键菜单“visibility”属性值设置为“hidden”来实现右键菜单的隐藏。
因此,本发明具有如下优点:1. 浏览器兼容性,支持Internet Explorer,google chrome浏览器,firefox浏览器,Safari 浏览器,opera浏览器,无需安装插件;2. 支持对SVG图形整体以及SVG图形中部分对象添加右键菜单。
附图说明
图1 为本发明的方法流程示意示意图。
具体实施方式
下面通过实施例,并结合附图,对本发明的技术方案作进一步具体的说明。
实施例:
如图1所示,本发明包括如下步骤:
步骤1,阻止网页右键模块基于SVG 脚本阻止默认的网页右键菜单行为,具体是,当触发客户端的右键菜单事件时,返回false值。
步骤2,创建右键菜单模块利用SVG预定义的矩形和文本创建自定义右键菜单,初始状态下,设置自定义右键菜单visibility属性值定义为hidden,并将自定义右键菜单叠加在SVG图形的最上层。
步骤3,显示模块设置自定义函数,并基于步骤2创建的自定义右键菜单根据鼠标的坐标和网页窗口计算当前自定义右键菜单坐标并显示自定义右键菜单;具体方法是:
显示模块绑定自定义函数至鼠标右键单击事件,鼠标右键单击事件目标源为SVG元素,该元素可以是SVG元素(<svg>),形状元素(矩形 <rect>、圆形 <circle>、椭圆 <ellipse>、线 <line>、折线 <polyline>、多边形 <polygon>、路径 <path>),容器元素(<g>),显示模块首先判断鼠标按键是否为右键,若按键动作是右键,则获取鼠标当前位置坐标,计算当前自定义右键菜单坐标位置,通过改变组成自定义菜单的矩形、文本的x、y属性值使得自定义右键菜单左上角坐标与鼠标当前位置坐标相同,并将自定义右键菜单visibility属性值设置为visible;若按键动作不为右键则不执行操作。
步骤4,隐藏菜单模块设置自定义函数隐藏自定义右键菜单,绑定该自定义函数至鼠标左键单击事件,当鼠标左键单击SVG图形上除自定义右键菜单外的其它地方时自定义右键菜单隐藏。鼠标左键单击事件目标源为除自定义右键菜单外的其他SVG图形,自定义函数通过将自定义右键菜单“visibility”属性值设置为“hidden”来实现右键菜单的隐藏。
本文中所描述的具体实施例仅仅是对本发明精神作举例说明。本发明所属技术领域的技术人员可以对所描述的具体实施例做各种各样的修改或补充或采用类似的方式替代,但并不会偏离本发明的精神或者超越所附权利要求书所定义的范围。
Claims (1)
1.一种实现SVG自定义鼠标右键菜单的方法,其特征在于,包括以下步骤:
步骤1,阻止网页右键模块基于SVG 脚本阻止默认的网页右键菜单行为,具体是,当触发客户端的右键菜单事件时,返回false值;
步骤2,创建右键菜单模块利用SVG预定义的矩形和文本创建自定义右键菜单,初始状态下,设置自定义右键菜单visibility属性值定义为hidden,并将自定义右键菜单叠加在SVG图形的最上层;
步骤3,显示模块设置自定义函数,并基于步骤2创建的自定义右键菜单根据鼠标的坐标和网页窗口计算当前自定义右键菜单坐标并显示自定义右键菜单;具体方法是:
显示模块绑定自定义函数至鼠标右键单击事件,鼠标右键单击事件目标源为SVG元素,显示模块首先判断鼠标按键是否为右键,若按键动作是右键,则获取鼠标当前位置坐标,计算当前自定义右键菜单坐标位置,通过改变组成自定义菜单的矩形、文本的x、y属性值使得自定义右键菜单左上角坐标与鼠标当前位置坐标相同,并将自定义右键菜单visibility属性值设置为visible;若按键动作不为右键则不执行操作;
步骤4,隐藏菜单模块设置自定义函数隐藏自定义右键菜单,绑定该自定义函数至鼠标左键单击事件,当鼠标左键单击SVG图形上除自定义右键菜单外的其它地方时自定义右键菜单隐藏;鼠标左键单击事件目标源为除自定义右键菜单外的其他SVG图形,自定义函数通过将自定义右键菜单“visibility”属性值设置为“hidden”来实现右键菜单的隐藏。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201410694282.XA CN104461260A (zh) | 2014-11-27 | 2014-11-27 | 一种实现svg自定义鼠标右键菜单的方法 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201410694282.XA CN104461260A (zh) | 2014-11-27 | 2014-11-27 | 一种实现svg自定义鼠标右键菜单的方法 |
Publications (1)
Publication Number | Publication Date |
---|---|
CN104461260A true CN104461260A (zh) | 2015-03-25 |
Family
ID=52907406
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN201410694282.XA Pending CN104461260A (zh) | 2014-11-27 | 2014-11-27 | 一种实现svg自定义鼠标右键菜单的方法 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN104461260A (zh) |
Cited By (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN106815023A (zh) * | 2017-01-09 | 2017-06-09 | 山东华软金盾软件股份有限公司 | 一种接管windows系统开始菜单的方法 |
CN107665117A (zh) * | 2017-10-20 | 2018-02-06 | 郑州云海信息技术有限公司 | 一种gnome桌面右键定制化方法及系统 |
CN116010015A (zh) * | 2023-03-27 | 2023-04-25 | 西安热工研究院有限公司 | 监控画面右键菜单生成方法、装置、设备和存储介质 |
Citations (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN101071361A (zh) * | 2007-05-31 | 2007-11-14 | 腾讯科技(深圳)有限公司 | 一种自定义右键菜单的方法及系统 |
CN101354702A (zh) * | 2008-05-05 | 2009-01-28 | 国网南京自动化研究院 | 一种基于iec61970标准的电力系统图形的交互性实现方法 |
CN103049164A (zh) * | 2011-10-14 | 2013-04-17 | 上海可鲁系统软件有限公司 | 一种动态矢量图形快速响应操作的方法及其控制设备 |
KR20140019627A (ko) * | 2012-08-06 | 2014-02-17 | 인크로스 주식회사 | 웹 어플리케이션 저작도구 및 저작 방법 |
-
2014
- 2014-11-27 CN CN201410694282.XA patent/CN104461260A/zh active Pending
Patent Citations (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN101071361A (zh) * | 2007-05-31 | 2007-11-14 | 腾讯科技(深圳)有限公司 | 一种自定义右键菜单的方法及系统 |
CN101354702A (zh) * | 2008-05-05 | 2009-01-28 | 国网南京自动化研究院 | 一种基于iec61970标准的电力系统图形的交互性实现方法 |
CN103049164A (zh) * | 2011-10-14 | 2013-04-17 | 上海可鲁系统软件有限公司 | 一种动态矢量图形快速响应操作的方法及其控制设备 |
KR20140019627A (ko) * | 2012-08-06 | 2014-02-17 | 인크로스 주식회사 | 웹 어플리케이션 저작도구 및 저작 방법 |
Cited By (5)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN106815023A (zh) * | 2017-01-09 | 2017-06-09 | 山东华软金盾软件股份有限公司 | 一种接管windows系统开始菜单的方法 |
CN106815023B (zh) * | 2017-01-09 | 2020-05-05 | 山东华软金盾软件股份有限公司 | 一种接管windows系统开始菜单的方法 |
CN107665117A (zh) * | 2017-10-20 | 2018-02-06 | 郑州云海信息技术有限公司 | 一种gnome桌面右键定制化方法及系统 |
CN116010015A (zh) * | 2023-03-27 | 2023-04-25 | 西安热工研究院有限公司 | 监控画面右键菜单生成方法、装置、设备和存储介质 |
CN116010015B (zh) * | 2023-03-27 | 2023-07-11 | 西安热工研究院有限公司 | 监控画面右键菜单生成方法、装置、设备和存储介质 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN103019516B (zh) | 用于显示页面的方法和设备 | |
US10346013B2 (en) | Manipulating graphical objects | |
US9881404B2 (en) | Manipulating graphical objects | |
KR102118223B1 (ko) | 크로스 윈도우 애니메이션 | |
KR101494844B1 (ko) | 메타 데이터를 이용한 차트 변환 시스템 및 그 방법 | |
WO2009059062A3 (en) | Resolution independent layout | |
WO2012048162A8 (en) | System and method for extending a visualization platform | |
CN101763234B (zh) | 一种模拟各种屏幕分辨率的方法及其装置 | |
WO2008058159A3 (en) | System and method for creating integrated web form and database applications | |
EP2933738A1 (en) | Using server side font preparation to achieve WYSIWYG and cross platform fidelity on web based word processor | |
US9460059B2 (en) | Method and apparatus for visualizing the underlying structure of a document using an interactive viewport overlay | |
JP2013520726A5 (zh) | ||
CN103034410B (zh) | 页面显示的方法及设备 | |
CN104461260A (zh) | 一种实现svg自定义鼠标右键菜单的方法 | |
CN104424318A (zh) | 页面元素的控制方法及装置 | |
CN104461580A (zh) | 一种Web用户界面实现方法 | |
CN102314287A (zh) | 互动显示系统及方法 | |
WO2018160423A1 (en) | Markup code generator | |
CN102915349A (zh) | 在浏览器中显示网页的方法及在浏览器中显示的网页组件 | |
CN103970763A (zh) | 三维图像展示系统及方法 | |
CN105022654A (zh) | 一种可视化页面制作方法和装置 | |
KR20120012490A (ko) | 웹페이지에 대한 하이퍼링크를 동적 스크린 이미지로 문서 편집기상에서 연결하는 방법 | |
GB201216667D0 (en) | Inside - on-line virtual reality immersion and integration system | |
AU2013299742B2 (en) | Manipulating graphical objects | |
CN109725883A (zh) | 一种工业管控软件游戏化实现方法 |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
C06 | Publication | ||
PB01 | Publication | ||
SE01 | Entry into force of request for substantive examination | ||
RJ01 | Rejection of invention patent application after publication | ||
RJ01 | Rejection of invention patent application after publication |
Application publication date: 20150325 |