将 Raphael 对象存储在 ZPD 插件的变量中答案

【问题标题】：Store Raphael object in variable from ZPD plugin将 Raphael 对象存储在 ZPD 插件的变量中
【发布时间】：2011-10-11 22:40:38
【问题描述】：

我之前曾与 Raphael 合作过，但我回到了我的项目并决定完全重新编写它以提高性能和一般代码质量。无论如何，该应用程序使用 Raphael 创建思维导图（如果您阅读了我之前的问题，您将对整个应用程序有更多的了解）。

所以我使用 paper.circle() 等在画布上创建节点，为了避免使用 .drag() 进行不必要的工作，我决定使用Raphael ZPD plugin。这个插件太复杂了，我无法完全理解，但我打算稍微编辑一下。 我想将活动节点存储在变量 _node 中。 为此，我认为只需获取 evt.target 并分配它，但显然并非如此。

这是插件的一部分（我认为作业应该去的地方）：

/**
 * Handle mouse button release event.
 */
me.handleMouseUp = function(evt) {
    if (evt.preventDefault)
        evt.preventDefault();

    evt.returnValue = false;

    var svgDoc = evt.target.ownerDocument;

    if ((me.state == 'pan' && me.opts.pan) || (me.state == 'move' && me.opts.drag)) {
        // Quit pan mode
        me.state = '';
    }
};

当使用alert(evt.target);时（点击圆圈时）我得到：

[对象 SVGCircleElement]

这意味着evt.target 正在获取单个元素（因为它会因其他形状而变化），但随后在分配失败后尝试操作_node。我收到以下错误消息：

_node.attr 不是函数

（我尝试更改 attr()，因为这是最简单的函数）。

我使用 node、evt.target、evt.currentTarget 等尝试了许多变体，但我确定我只是错过了 evt.target 的一些愚蠢的东西，因为它会在警报时产生正确的输出。

我了解me. 在代码中的其他位置定义，因此如果需要，请查看上面的链接（似乎比在此处发布完整插件更好）。

如果您能提供任何帮助，我将不胜感激。

谢谢。

更新：我现在 100% 确定应该将 evt.target 存储在 _node 中，但 SVG、DOM 和 Raphael 之间似乎没有直接联系.关于如何将 SVG 元素链接回 Raphael 的任何想法？

【问题讨论】：

标签： javascript jquery raphael

【解决方案1】：

我上周开始使用这个插件，并且遇到了同样的问题。

我能够将 SVG 形状链接回形状的拉斐尔句柄。

基本上，您首先必须维护一个指向与 zpd 插件对象相关联的 raphael 纸对象的指针。我通过在 var opts = {...} 行之后创建一个 raphPaper 声明来做到这一点

var raphPaper = null;

这样 raphPaper 对象将像 opts 对象一样可用。

当 raphael 创建一个形状时，它会分配两个变量（我发现）：.raphael 和 .raphaelid .raphael 是一个布尔值，告诉我们 SVG 形状是否由 raphael 创建，.raphaelid 为我们提供 SVG 形状的 raphael 内部 id。因此，要获取 raphael 元素，我们只需在纸对象 (raphPaper) 上使用 getById。

if(evt.target.raphael){
    var raphShp = raphPaper.getById(evt.target.raphaelid);
}

因此，对于您的问题，您只需将 raphShp 分配给 _node 或您想要访问的任何变量。

【讨论】：