Question

我之前曾与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);时（点击一个圈子）我会收到：

[object SVGCircleElement]

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

_node.attr不是函数

（我试图改变attr（），因为这是最简单的函数）。

我使用node，evt.target，evt.currentTarget等尝试了许多变体，但我确定我只是遗漏了evt.target的愚蠢内容，因为它会在警报时产生正确的输出。

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

我很感激你能给予的任何帮助。

谢谢。

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

Answer 1

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

我能够将SVG形状链接到形状的raphael手柄。

基本上，您首先必须维护一个指向与zpd插件对象绑定的raphael纸张对象的指针。我是通过在var opts = {...}行

之后创建一个raphPaper声明来实现的

var raphPaper = null;

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

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

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

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

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

1 个答案: