svg raphael contextMenu右键单击T.T sos

编程问答 2022-04-26

问题描述

|| Raphael是否支持具有右键单击菜单？ 我正在研究如何以最佳方式形象化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>
但.... 我想使用RaphaelJs创建svg gragh。 一些raphael（reference：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);
现在... 我有拉斐尔的移动功能。 我拥有javascript右键菜单的重定义功能。 我想结合这两个功能。 我能怎么做？ 如果您有任何想法。留下你的答案。非常感谢你。 顺便说说： 如果源代码有一些错误也可以指出     

解决方法

$(c.node).bind(\"contextmenu\",function(){
    alert(0);
});
请尝试上面的代码，$ == jQuery。     ,这就是使用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元素，例如圆形或椭圆形。     
contextmenuraphaelsossvg单击右键