svg raphael contextMenu右击T.T sos

Raphael是否支持右键菜单？我正在研究如何最好地可视化UML图，但也有有能力让用户悬停在一个项目上，并说 “创建关系”或“创建新节点”（所以右键菜单会很好）。我试图理解拉斐尔是否会帮助我。svg raphael contextMenu右击T.T sos

我的问题与上面类似。

我喜欢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>

但是.... 我想使用RaphaelJs创建svg gragh。

一些拉斐尔（参考：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);

现在... 我HAVA raphaelJs移动功能。我喜欢javascript右键菜单重定义功能。我想结合这两个功能。我该怎么办？ 如果你有任何想法。留下你的答案。非常感谢你。顺便说一句：如果源代码中有一些错误，也可以指出的是

来源

2011-05-23 kaeda_Rukawa

$(c.node).bind("contextmenu", function(){ 
    alert(0); 
});

请尝试上面的代码中，$ == jQuery的。

来源

2011-08-17 08:30:46 sofosogo

不适用于铬。没有绑定方法。 – Bernhard 2016-09-08 06:02:13

这是如何使用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元素，像一个圆或椭圆。

来源

2012-04-20 05:28:01 Greg

svg raphael contextMenu右击T.T sos

回答

相关问题