Может кто-нибудь уточнить документацию Рафаэля?(или знать место, в котором кто-то уже это сделал)

Question

Я работаю с Рафаэлем и думаю, что использую его таким образом, чтобы не использовать некоторые функции, которые кажутся полезными.

Например, я пытаюсьдобавьте слушателя в набор (группу элементов) таким образом, чтобы при наведении указателя мыши на любой из этих элементов скрипт запускал анимацию для всего набора.

Когда вы добавляете слушателя в наборРафаэль добавляет слушателя к каждому из элементов и анимирует их отдельно.

Как вы видите в этом примере http://jsfiddle.net/4VYHe/3/, в котором я хочу, чтобы все прямоугольники в одном наборе (set = горизонтальные группыиз 10 прямоугольников), измените атрибут цвета при наведении мыши на любой из них.

Я нашел несколько методов в документации Raphael, которые, я думаю, должны помочь в достижении этого.Но мне трудно понять, как работают эти методы.

Например:

• объект Евы (http://raphaeljs.com/reference.html#eve)
• ЭлементМетод .animateWith () (http://raphaeljs.com/reference.html#Element.animateWith)
• метод Raphael.animation () (http://raphaeljs.com/reference.html#Raphael.animation)

Библиотека Raphael выглядит очень мощной, и я очень хочучтобы заставить его работать должным образом, я не хочу писать всевозможные хаки javascript, потому что я думаю, что эти инструменты должны выполнять работу более элегантным образом.

Если вы думаете, что яЯ использую неправильную библиотеку. Я по-прежнему открыт для любых советов. Заранее спасибо.

--- EDIT ---

Это рабочий пример (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)
        });

по мере прохождения цикла, набор будет продолжать меняться, а замыкания будут поддерживать осведомленность об этом.В результате все обработчики будут работать с последним рядом блоков.

Если вы не понимаете закрытие javascript, возможно, вы захотите взглянуть на эту статью .Он старый, но довольно простым языком, и он мне помог, поскольку я пытался обдумать их.

Answer 2

Крик абсолютно прав в этом комментарии выше.Наборы - это обходной путь для несоответствий между SVG и VML.

В приведенном выше примере вы столкнулись с той же проблемой, с которой столкнулись в в своем предыдущем вопросе .Использование this в анонимной функции почти всегда не будет работать так, как вы ожидаете, так как this не будет ссылаться на то, что вы думаете.Посмотрите на это обсуждение , особенно первые два комментария в разделе комментариев.(Кроме того, комментатор использует «я» в качестве ссылки на «это», что намного лучше, чем мое «то», что говорит о том, что всегда кто-то делает это лучше, чем вы)

В любом случае,Имея это в виду, я клонировал вашу скрипку, обернул ваш набор в объект и поместил события в конструктор объекта.Делая это, событие может затем ссылаться на that.set и анимировать все объекты в наборе одновременно.

Это небольшая, но фундаментальная концепция, которая поможет вам на протяжении любого Рафаэля(или javascript) разработка, которую вы делаете.

Это не отвечает на ваш вопрос напрямую, но, надеюсь, проясняет некоторые проблемы, которые вы, кажется, обнаруживаете.Я не могу комментировать анимации вызовов вы упомянули, но я думаю, что Рафаэль, как библиотека, безусловно, стоит настойчивой с.

1022 * N.