Как ссылаться на холст Рафаэля, созданный динамически? - PullRequest
Новая
       0

Как ссылаться на холст Рафаэля, созданный динамически?

2 голосов
/ 24 апреля 2011

Я создаю плагин jQuery, который создает объекты Raphael на лету, допустим, вы делаете ... 

$("div").draw({
  type: 'circle',
  radius: '10',
  color: '#000'
})

И код плагина (просто в качестве примера): 

  $.fn.draw = function( options ) { 
  //settings/options stuff


   var width = $(this).width();
   var height = $(this).height();
   var widget = Raphael($(this)[0], width, height);
   var c = widget.circle(...).attr({...})

   //saving the raphael reference in the element itself
   $(this).data('raphael', {
     circle : c
   })

}

Но тогда я бы хотел иметь возможность обновлять элементы следующим образом: 

$("div").draw({
  type: 'update',
  radius: '20',
  color: '#fff'
});

Я могу "спасти" объект, используя $ (this) .data (). Raphael.circle, нозатем он отказывается анимировать, я знаю, что это объект Raphael, потому что он даже имеет animate proto , но он выдает Uncaught TypeError: Невозможно прочитать свойство '0' из неопределенного).

1 Ответ

4 голосов
/ 24 апреля 2011

Я опробовал ваш код, внес некоторые изменения, и $ (this) .data (). Raphael.circle выполняет анимацию. Это то, что я сделал (я знаю, что это не совсем то же самое, что у вас, но дает суть) 

   $.fn.draw = function( options ) { 
  //settings/options stuff

       if(options.type === 'draw') {
         var width = $(this).width();
         var height = $(this).height();
         var widget = Raphael($(this)[0], width, height);
         var c = widget.circle(100, 100, 50);

         //saving the raphael reference in the element itself
         $(this).data('raphael', {
             circle : c
         });
//$(this).data().raphael.circle.animate() does not work here

        }

        else if(options.type === 'update') {
            $(this).data().raphael.circle.animate({cx: 200, cy: 200});
            //But this works here
        }

}

В этом случае ссылка на элемент с помощью $ (this) .data (). Raphael.circle работает, но только в остальном if. Я не уверен почему.

...