当前位置： 文江博客话题详情

svg 拉斐尔 contextMenu 右键单击​​ TT sos

发布于 2024-11-08 22:31:28 字数 4491 浏览 0 评论 0原文

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 图像。

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

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

原文

Does Raphael support having right click menu??
I'm looking into how to best visualise a UML like diagram, but also
have the ability for the user to hover over one fo the items and say
"create relationship" or "create new node" (so a right click menu
would be good). I'm trying to understand if Raphael would help me out.

my question Similar to the above.

i hava javascript support right click menu about svg demo.

svgmenu.js file:

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 file:

<?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 file:

<!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>

but....
i want to use RaphaelJs to create svg gragh.

some raphael(reference:http://raphaeljs.com/reference.html) code:

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);

now...
i hava raphaelJs move function.
i hava javascript right menu Redefinition function.
i want Combining these two functions.
how can i do?
if you hava any idea. leave your answer. Thank you very much.
by the way:
if the source code has some wrong also can be pointed out that

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

橘香 2024-11-15 22:31:28
$(c.node).bind("contextmenu", function(){
    alert(0);
});

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

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

Please try the code above, $ == jQuery.

回复 原文
遗失的美好 2024-11-15 22:31:28

这是使用 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 是您的拉斐尔元素，如圆形或椭圆形。

This is how you could add a context menu to an svg element using DOJO. It will appear on right click.

var contextMenu = new dijit.Menu();

contextMenu.addChild(
    new dijit.MenuItem( {
        label:"Menu item", 
        onClick:function(e){ log.debug("Clicked"); } 
}));

contextMenu.bindDomNode(raphaelElement[0] );

RaphaelElement is a your raphael element, like a circle or ellipse.

回复 原文
~没有更多了~

关于作者

等风来

暂无简介

0 文章
0 评论
679 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

遂心如意

文章 0 评论 0

5513090242

文章 0 评论 0

巷雨优美回忆

文章 0 评论 0

junpengz2000

文章 0 评论 0

13郎

文章 0 评论 0

qq_xU4RDg

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文