Raphael JS：如何从 Dom 对象（Element.node）中获取 Raphael 元素？

Posted 2023-03-06

【中文标题】Raphael JS：如何从 Dom 对象（Element.node）中获取 Raphael 元素？

【英文标题】：Raphael JS: How to get Raphael element from Dom object(Element.node)?

【发布时间】：2012-08-06 20:39:28

【问题描述】：

我尝试使用 Raphael 的节点函数来获取一个 DOM 对象并为上下文菜单添加一个事件处理程序。 但是我需要从 DOM 对象的事件处理程序中获取 Raphael 元素吗？

为了清楚起见，示例代码应该是这样的

var circle = paper.circle(100, 100, 100);
var domObject = circle.node;
var ele = domObject.get(0).raphael; // It's required in the domObject's event handler

有谁知道如何实现它？

【问题讨论】：

嗨，丹。您没有使用 Raphael 的 click、hover 或 mouse* 函数进行事件处理有什么特别的原因吗？您没有理由不自己编写，但我必须警告您，您在上面描述的模式——循环链接 dom 对象和 javascript 对象——是名副其实的内存泄漏秘诀。

我同意 kevin 的观点……你甚至在 Raphael 中拥有 eve() 功能来链接自定义事件……

感谢 Kevin 和 Aukhan，我试过了，因为我想为 Raphael Element 添加上下文菜单。我尝试使用的上下文菜单（abeautifulsite.net/blog/2008/09/jquery-context-menu-plugin）似乎需要一个 DOM 对象......请原谅我的幼稚问题，因为我不熟悉 Raphael JS 或 javascript。再说一遍，有没有什么好方法可以为 Raphael Element 添加上下文菜单？提前致谢！

【参考方案1】：

只需很少的额外工作即可直接完成这项工作。假设您有所有可用的 jquery contextMenu 资源（js、css、任何图像）和 Raphael 论文paper：

var x = 200, y = 200, r = 100, fs = 36;
var circle = paper.circle( x, y, r ).attr(  fill: 'red', 'fill-opacity': 0.5  );
var label = paper.text( x, y, "CLICK" ).attr(  fill: 'white', 'fill-opacity': 0.75, 'font-size': fs, 'font-weight': 800  );
var set = paper.set( circle, label );
$(set.node).contextMenu(  menu: 'myMenu'  );

您可以看到此代码mocked up at my website。上下文菜单与我的 css 冲突存在一些问题，但您可以看到基本功能。

【讨论】：

Kevin，如果我没有 jQuery 怎么办？