javascript - 如何引用动态创建的Raphael Canvas ？

我正在创建一个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对象，因为它甚至具有动画原型，但它会产生Uncaught TypeError：Cannot读取未定义的属性“ 0”）。

最佳答案

我尝试了您的代码，进行了一些修改，然后$（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引用元素确实可以，但是仅在else中引用。我不知道为什么。

关于javascript - 如何引用动态创建的Raphael Canvas ？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/5769630/