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

回答

相關問題