svg实现右键自定义菜单
实现SVG右键自定义菜单
svg实现右键自定义菜单例子。具体看例子即可
svgmenu.htm
1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2<html>
3<head>
4<title></title>
5<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
6<meta name=ProgId content=VisualStudio.HTML>
7<meta name=Originator content="Microsoft Visual Studio .NET 7.1">
8<script language="JavaScript" src="svgmenu.js"></script>
9</head>
10<body onload="winLoad()">
11<table border=1 width=100% height=100% border=0>
12 <tr>
13 <td bgcolor=#ff0000>
14 <embed id="NavigateControl" width="100%" height="100%" src="svgmenu.svg" type="image/svg+xml" style="Z-INDEX: 3080">
15 </td>
16 </tr>
17</table>
18</body>
19</html>
svgmenu.svg
1<?xml version="1.0" encoding="utf-8" ?>
2<svg id="cont" viewBox="0 0 45000 32920" width="45000" height="32920"
3 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
4 xml:space="preserve" preserveAspectRatio="none" style="Z-INDEX: 1;">
5
6 <defs>
7 <style type="text/css">
8 <![CDATA[
9 .infomation {
10 font-weight:normal;
11 font-size:200px;}
12 .cursorMove{ cursor:move; }
13 .cursorAuto{ cursor:auto; }
14 ]]>
15 </style>
16 <menu id='menu1'>
17 <header>Menu utilisateur</header>
18 <item action="CopySVG" id="CopySVG">复制图形</item>
19 <separator/>
20 <menu>
21 <header>背景颜色</header>
22 <item onactivate="colorit('white')">白色</item>
23 <item onactivate="colorit('black')">黑色</item>
24 <item onactivate="colorit('#D0D063')">黄色</item>
25 <item onactivate="colorit('green')">绿色</item>
26 <separator/>
27 <item onactivate="colorit('#008083')">默认</item>
28 </menu>
29 <separator/>
30 <item action="Pause" id="Pause">暂停</item>
31 <separator/>
32 <item id='Menu1.2' onactivate='printit(this)'>打印</item>
33 <separator/>
34 <item id='Menu1.1' onactivate='Titi()'>操作说明</item>
35 </menu>
36 <menu id='menu2'>
37 <item id='Menu1.2' onactivate="showmsg('控件ID')">控件ID</item>
38 </menu>
39 </defs>
40 <g id="elements">
41 <rect id="rect_back" class="Gas" x="0" y="0" width ="45000" height="32920" fill="#ffff33">
42 </rect>
43 <rect id="gas_1" class="Gas" x="14260" y="17360" width ="1450" height="1450" fill="#00ff33" onmouseover="faireMenus('menu2')" onmouseout="faireMenus('menu1')">
44 </rect>
45 </g>
46</svg>
47
svgmenu.js
1var CurveControl = null;
2var SvgMainMapDoc = null;
3
4function winLoad()
{
5
CurveControl = document.getElementById('NavigateControl');
6 if(CurveControl==null)
7 return;
8 SvgMainMapDoc = CurveControl.getSVGDocument();
9
10 faireMenus("menu1");
11
}
12//document.onload = winLoad;
13
14//*******************************************************************************************************
15/**//* 自定义右键菜单
16/* hetonghai 2007-03-22
17//*******************************************************************************************************/
18function faireMenus(udefMenuID){//== udefMenuID:svg预定义的菜单编码
19 var udef_menu = udefMenuID;
20 var mydoc = SvgMainMapDoc;
21 var contextMenu = CurveControl.window.contextMenu;
22 var menuXml = CurveControl.window.printNode(mydoc.getElementById(udef_menu));
23 //alert(menuXml);
24 CurveControl.window.Titi = Titi;
25 CurveControl.window.printit = printit;
26 CurveControl.window.colorit = colorit;
27 CurveControl.window.showmsg = showmsg;
28 changeMenus(menuXml);
29}
30function changeMenus(menuXml){//== xml格式的菜单字符串
31 var contextMenu = CurveControl.window.contextMenu;
32 var newMenuRoot = CurveControl.window.parseXML(menuXml, contextMenu);
33 contextMenu.replaceChild(newMenuRoot, contextMenu.firstChild);
34 //setMenuAction(contextMenu.firstChild);
35}
36function setMenuAction(menuRoot){
37 var len = menuRoot.childNodes.length;
38 if(len==0) return;
39
for(var i=0;i<len;i++){
40 var menu = menuRoot.childNodes[i];
41 //alert(menu);continue;
42 if(menu==null||menu.nodeName!="item") continue;
43 var active = menu.attributes['onactivate'];
44 if(active!=null&&active.length>0){
45 menu.addEventListener("activate", active, false);
46
}
47 }
48}
49//--------------------------------------------------------------------------
50function Titi()
51{
52 var msg = "温馨提示：\n 该页面为地图显示页面\n ALT键+鼠标左键:实现图像漫游；\n Ctrl+鼠标左键:图像放大或拉框放大；";
53 msg = msg+"\n Ctrl+Shift+鼠标左键:图像缩小或拉框缩小；";
54 alert(msg);
55}
56function printit(){
57 if (confirm('确定打印吗？')){
58 try {
59 if(parent) parent.print();
60 }
61 catch(e){}
62 }
63}
64function colorit(clr){ //背景色函数
65 var myob = SvgMainMapDoc.getElementById("rect_back");
66 if(myob) myob.setAttribute("fill", clr);
67}
68function showmsg(msg){
69 alert(msg);
70}
svgmenu.htm1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">2
<html>3
<head>4
<title></title>5
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">6
<meta name=ProgId content=VisualStudio.HTML>7
<meta name=Originator content="Microsoft Visual Studio .NET 7.1">8
<script language="JavaScript" src="svgmenu.js"></script>9
</head>10
<body onload="winLoad()">11
<table border=1 width=100% height=100% border=0>12
<tr>13
<td bgcolor=#ff0000>14
<embed id="NavigateControl" width="100%" height="100%" src="svgmenu.svg" type="image/svg+xml" style="Z-INDEX: 3080">15
</td>16
</tr>17
</table>18
</body>19
</html>svgmenu.svg1
<?xml version="1.0" encoding="utf-8" ?> 2
<svg id="cont" viewBox="0 0 45000 32920" width="45000" height="32920" 3
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 4
xml:space="preserve" preserveAspectRatio="none" style="Z-INDEX: 1;"> 5
6
<defs>7
<style type="text/css">8
<![CDATA[9
.infomation { 10
font-weight:normal;11
font-size:200px;}12
.cursorMove{ cursor:move; }13
.cursorAuto{ cursor:auto; }14
]]>15
</style> 16
<menu id='menu1'>17
<header>Menu utilisateur</header>18
<item action="CopySVG" id="CopySVG">复制图形</item>19
<separator/>20
<menu>21
<header>背景颜色</header>22
<item onactivate="colorit('white')">白色</item>23
<item onactivate="colorit('black')">黑色</item>24
<item onactivate="colorit('#D0D063')">黄色</item>25
<item onactivate="colorit('green')">绿色</item>26
<separator/>27
<item onactivate="colorit('#008083')">默认</item> 28
</menu>29
<separator/>30
<item action="Pause" id="Pause">暂停</item>31
<separator/>32
<item id='Menu1.2' onactivate='printit(this)'>打印</item>33
<separator/>34
<item id='Menu1.1' onactivate='Titi()'>操作说明</item>35
</menu> 36
<menu id='menu2'>37
<item id='Menu1.2' onactivate="showmsg('控件ID')">控件ID</item>38
</menu> 39
</defs>40
<g id="elements"> 41
<rect id="rect_back" class="Gas" x="0" y="0" width ="45000" height="32920" fill="#ffff33">42
</rect> 43
<rect id="gas_1" class="Gas" x="14260" y="17360" width ="1450" height="1450" fill="#00ff33" onmouseover="faireMenus('menu2')" onmouseout="faireMenus('menu1')">44
</rect> 45
</g> 46
</svg>47
svgmenu.js1
var CurveControl = null;2
var SvgMainMapDoc = null; 3
4
function winLoad(){5
CurveControl = document.getElementById('NavigateControl');6
if(CurveControl==null)7
return;8
SvgMainMapDoc = CurveControl.getSVGDocument();9
10
faireMenus("menu1");11
}12
//document.onload = winLoad;13
14
//*******************************************************************************************************15
/**//* 自定义右键菜单 16
/* hetonghai 2007-03-2217
//*******************************************************************************************************/18
function faireMenus(udefMenuID){//== udefMenuID:svg预定义的菜单编码 19
var udef_menu = udefMenuID;20
var mydoc = SvgMainMapDoc;21
var contextMenu = CurveControl.window.contextMenu;22
var menuXml = CurveControl.window.printNode(mydoc.getElementById(udef_menu));23
//alert(menuXml);24
CurveControl.window.Titi = Titi;25
CurveControl.window.printit = printit;26
CurveControl.window.colorit = colorit;27
CurveControl.window.showmsg = showmsg;28
changeMenus(menuXml);29
}30
function changeMenus(menuXml){//== xml格式的菜单字符串31
var contextMenu = CurveControl.window.contextMenu;32
var newMenuRoot = CurveControl.window.parseXML(menuXml, contextMenu);33
contextMenu.replaceChild(newMenuRoot, contextMenu.firstChild);34
//setMenuAction(contextMenu.firstChild);35
}36
function setMenuAction(menuRoot){37
var len = menuRoot.childNodes.length;38
if(len==0) return; 39
for(var i=0;i<len;i++){40
var menu = menuRoot.childNodes[i];41
//alert(menu);continue;42
if(menu==null||menu.nodeName!="item") continue;43
var active = menu.attributes['onactivate'];44
if(active!=null&&active.length>0){45
menu.addEventListener("activate", active, false);46
}47
}48
}49
//--------------------------------------------------------------------------50
function Titi()51
{52
var msg = "温馨提示：\n 该页面为地图显示页面\n ALT键+鼠标左键:实现图像漫游；\n Ctrl+鼠标左键:图像放大或拉框放大；";53
msg = msg+"\n Ctrl+Shift+鼠标左键:图像缩小或拉框缩小；";54
alert(msg);55
}56
function printit(){57
if (confirm('确定打印吗？')){ 58
try {59
if(parent) parent.print();60
} 61
catch(e){}62
}63
}64
function colorit(clr){ //背景色函数65
var myob = SvgMainMapDoc.getElementById("rect_back");66
if(myob) myob.setAttribute("fill", clr);67
}68
function showmsg(msg){ 69
alert(msg);70
}
快速的执行是成功的关键！
