Question

我正在与Raphael合作，我认为我的使用方式不会利用一些看似有用的功能。

例如，我试图在Set（一组元素）上添加一个侦听器，这种方式在鼠标悬停在任何这些元素上时，脚本会在整个集合上触发动画。

当你向一个集合添加一个监听器时，Raphael会将监听器添加到每个元素中并分别为它们设置动画。

就像你在这个例子http://jsfiddle.net/4VYHe/3/中看到的那样，我想要同一组中的所有矩形（set = 10个矩形的水平组），在任何一个上改变鼠标上的颜色属性。

我在raphael文档中找到了一些方法，我认为必须有助于实现这一目标。但我很难理解这些方法的工作原理。

例如：

前夕对象（http://raphaeljs.com/reference.html#eve）
Element.animateWith（）方法（http://raphaeljs.com/reference.html#Element.animateWith）
Raphael.animation（）方法（http://raphaeljs.com/reference.html#Raphael.animation）

拉斐尔图书馆似乎非常强大，我真的想让它正常工作，我不想写各种不同的javascript黑客，因为我认为这些工具必须让更多的工作完成优雅的方式。

如果您认为我使用了错误的库，我仍然会接受各种建议。提前谢谢。

--- --- EDIT

这是一个有效的例子（http://jsfiddle.net/4VYHe/6/）。但这是一个缺乏效率和优雅的黑客。我想要一些正确使用正确工具的东西。

此页面上有一些信息。 http://www.irunmywebsite.com/raphael/additionalhelp.php?v=2#PAGETOP。几个例子，但没有任何解释拉斐尔如何运作的例子。

Answer 1

看看这个fiddle，我认为它正在做你想要的。根本区别在于您希望在集合上调用动画，而不是this。看来，当您向集合添加处理程序时，this引用集合中的各个元素（迭代以分配处理程序），而不是集合本身。

请注意，我将处理程序函数拉出到getHoverHandler函数中：

function getHoverHandler(fillColor) {
     var cSet = set;

     return function(){
          cSet.animate({fill: fillColor}, 300);
      };
}

set.hover(getHoverHandler('#000'),
          getHoverHandler('#FFF'));

为了打破关闭。如果您尝试这样做：

set.hover(function(){
            set.animate({fill: '#000'}, 300)
        }, function(){
            set.animate({fill: '#FFF'}, 300)
        });

当你循环时，set会不断变化，闭包会保持对此的意识。因此，所有处理程序都将作用于最后一行框。

如果您不了解javascript闭包，可能需要查看此article。它很古老，但是用非常简单的语言，它帮助了我，因为我试图绕过它们。

Answer 2

Kreek在上面的评论中绝对正确。集合是SVG和VML之间不一致的解决方法。

在上面的示例中，您遇到的问题与your previous question中遇到的问题相同。在匿名函数中使用这个几乎总是不会按预期的方式工作，因为这个不会指代您的想法。请查看this discussion，特别是评论部分中的前两条评论。（顺便说一句，评论者使用“自我”作为“这个”的参考，这比我的“那个”要好得多，这表明总有人做得比你自己好“

无论如何，考虑到这一点，我cloned你的小提琴，将你的集合包裹在一个对象中，并将事件放入对象构造函数中。通过执行此操作，事件可以引用 that.set 并同时为集合中的所有对象设置动画。

这是一个小而基本的概念，可以帮助您完成任何Raphael（或javascript）开发。

这不会直接回答您的问题，但希望澄清您似乎发现的一些问题。我无法评论你提到的动画电话，但我认为拉斐尔作为一个图书馆绝对值得坚持。

<磷>氮

有人可以澄清拉斐尔的文件吗？（或知道某人已经完成的地方）

2 个答案:

有人可以澄清拉斐尔的文件吗？ （或知道某人已经完成的地方）

2 个答案:

有人可以澄清拉斐尔的文件吗？（或知道某人已经完成的地方）