svg右键单击T.T sos
svg右键单击T.T sos
提问于 2011-05-23 09:06:36
拉斐尔支持右击菜单吗？？我正在研究如何最好地可视化一个UML喜欢的图表，但也有能力让用户悬停在一个项目，并说“创建关系”或“创建新的节点”(所以右击菜单会很好)。我在试着理解拉斐尔是否会帮我。
我的问题与上述类似。
我有javascript支持右击菜单有关svg演示。
svgmenu.js文件：
var CurveControl = null;
var SvgMainMapDoc = null;
function winLoad(){
CurveControl = document.getElementById('NavigateControl');
if(CurveControl==null)
return;
SvgMainMapDoc = CurveControl.getSVGDocument();
faireMenus("menu1");
}
function faireMenus(udefMenuID){//== udefMenuID:svg预定义的菜单编码
var udef_menu = udefMenuID;
var mydoc = SvgMainMapDoc;
var contextMenu = CurveControl.window.contextMenu;
var menuXml = CurveControl.window.printNode(mydoc.getElementById(udef_menu));
//alert(menuXml);
CurveControl.window.Titi = Titi;
CurveControl.window.printit = printit;
CurveControl.window.colorit = colorit;
CurveControl.window.showmsg = showmsg;
changeMenus(menuXml);
}
function changeMenus(menuXml){//== xml格式的菜单字符串
var contextMenu = CurveControl.window.contextMenu;
var newMenuRoot = CurveControl.window.parseXML(menuXml, contextMenu);
contextMenu.replaceChild(newMenuRoot, contextMenu.firstChild);
}
function Titi()
{
var msg = "test";
alert(msg);
}
function printit(){
if (confirm('确定打印吗？')){
try {
if(parent) parent.print();
}
catch(e){}
}
}
function colorit(clr){ //背景色函数
var myob = SvgMainMapDoc.getElementById("rect_back");
if(myob) myob.setAttribute("fill", clr);
}
function showmsg(msg){
alert(msg);
}svgmenu.svg文件：
<?xml version="1.0" encoding="utf-8" ?>
<svg id="cont" viewBox="0 0 450 320" width="450" height="320"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
xml:space="preserve" preserveAspectRatio="none">
<defs>
<menu id='menu1'>
<header>Menu utilisateur</header>
<item action="CopySVG" id="CopySVG">复制图形</item>
<separator/>
<menu>
<header>背景颜色</header>
<item onactivate="colorit('white')">白色</item>
<item onactivate="colorit('black')">黑色</item>
<item onactivate="colorit('#D0D063')">黄色</item>
<item onactivate="colorit('green')">绿色</item>
<separator/>
<item onactivate="colorit('#008083')">默认</item>
</menu>
<separator/>
<item action="Pause" id="Pause">暂停</item>
<separator/>
<item id='Menu1.2' onactivate='printit(this)'>打印</item>
<separator/>
<item id='Menu1.1' onactivate='Titi()'>操作说明</item>
</menu>
<menu id='menu2'>
<item id='Menu1.2' onactivate="showmsg('控件ID')">控件ID</item>
</menu>
</defs>
<g id="elements">
<rect id="rect_back" class="Gas" x="0" y="0" width ="450" height="320" fill="#ffff33">
</rect>
<rect id="gas_1" class="Gas" x="0" y="0" width ="145" height="145" fill="#00ff33" onmouseover="faireMenus('menu2')" onmouseout="faireMenus('menu1')">
</rect>
</g>
</svg>svgmenu.html文件：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<script language="JavaScript" src="svgmenu.js"></script>
</head>
<body onload="winLoad()">
<embed id="NavigateControl" width="100%" height="100%" src="svgmenu.svg" type="image/svg+xml" >
</body>
</html>但是..。我想使用RaphaelJ来创建svg图。
一些拉斐尔(参考：http://raphaeljs.com/reference.html)代码：
var c = R.circle(100, 100, 50).attr({
fill: "hsb(.8, 1, 1)",
stroke: "none",
opacity: .5
});
var start = function () {
// storing original coordinates
this.ox = this.attr("cx");
this.oy = this.attr("cy");
this.attr({opacity: 1});
},
move = function (dx, dy) {
// move will be called with dx and dy
this.attr({cx: this.ox + dx, cy: this.oy + dy});
},
up = function () {
// restoring state
this.attr({opacity: .5});
};
c.drag(move, start, up);现在..。i有一个移动函数。我有javascript右菜单重定义功能。我想把这两种功能结合起来。我能做什么？，如果你有任何想法的话。留下你的答案。非常感谢。顺便问一下:如果源代码有一些错误，也可以指出
Stack Overflow用户
发布于 2012-04-20 05:28:01
这就是如何使用DOJO向svg元素添加上下文菜单的方法。它将出现在右击。
var contextMenu = new dijit.Menu();
contextMenu.addChild(
new dijit.MenuItem( {
label:"Menu item",
onClick:function(e){ log.debug("Clicked"); }
}));
contextMenu.bindDomNode(raphaelElement[0] );RaphaelElement是您的raphael元素，就像圆圈或椭圆。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/6095081
复制相关文章
相似问题
腾讯云开发者
