Question

我正在创建一个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对象，因为它甚至还有动画 proto ，但它产生一个Uncaught TypeError：无法读取未定义的属性'0'。

Answer 1

我尝试了你的代码，进行了一些修改，并且$（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 if中有效。我不知道为什么。

如何引用动态创建的Raphael画布？

1 个答案: