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

Question

我正在和拉斐尔合作,我认为我使用的方式不会利用一些看似有用的功能.

例如,我试图在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黑客,因为我认为这些工具必须以更优雅的方式完成工作.

如果您认为我使用了错误的库,我仍然会接受各种建议.先感谢您.

- -编辑 - -

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

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

Answer 1

看看这个小提琴,我认为它正在做你想要的.根本区别在于你想要在集合上调用动画,而不是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闭包,你可能想看看这篇文章.它很旧,但是用非常简单的语言,它帮助了我,因为我试图绕过它们.

Answer 2

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

在上面的示例中,您遇到的问题与上一个问题中遇到的问题相同.在匿名函数中使用它几乎总是不会以你期望的方式工作,因为这不会指你的想法.看一下这个讨论,特别是评论部分的前两个评论.(顺便说一句,评论者使用"自我"作为"这个"的参考,这比我的"那个"要好得多,这表明总有人做得比你自己好"

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

这是一个小而基本的概念,可以帮助您完成任何Raphael(或javascript)开发.

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

N.