首页 > 编程语言> > javascript – 如何在jquery对象上调用raphael方法？

javascript – 如何在jquery对象上调用raphael方法？

2019-10-06 04:35:14 作者：互联网

我正在使用Raphael创建一些圈子.当用户单击按钮时,我想为这些圆圈设置动画(通过增加它们的半径).我该怎么做呢？

例如,这是我的示例代码：

<!DOCTYPE html>
<html>

<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="raphael.js"></script>
<script type="text/javascript">

$(function() {  
var paper = new Raphael("canvas_container", 300, 150);
paper.circle(50, 75, 30);
paper.circle(150, 75, 30);

$("button").click(function() {
    $("circle").each(function(i) {      
        this.animate({ r: 100 }, 500); // Doesn't work.
    });     
});

});
</script>
</head>

<body>
<div id="canvas_container"></div>  
<button>Click me to animate the circles</button>
</body>

</html>

[一般来说,我不清楚以下两个变量之间的区别是什么：

var c = paper.circle(50, 75, 30); // Raphael circle
$("circle").first(); // using jQuery to grab that Raphael circle

jQuery对象是Raphael圈子的包装器吗？]

解决方法:

阅读Raphaël Reference,似乎你可以使用Raphaël自己的Event methods来做到这一点

circle.click(function (event) {
    this.animate({ r: 100 }, 500);
});

文档的相同部分还指出您可以使用像jQuery这样的库,但是您必须传入节点,如下所示：

$(circle.node)

其中circle是paper.circle调用返回的对象.

但是,在您的情况下,我认为以下代码将起作用：

var paper = new Raphael("canvas_container", 300, 150), 
    circles = [];

circles.push(paper.circle(50, 75, 30));
circles.push(paper.circle(150, 75, 30));

$("button").click(function() {
    $.each(circles, function(i, c){
         c.animate({ r: 100 }, 500);
    });
});

标签：javascript,jquery,raphael
来源： https://codeday.me/bug/20191006/1858498.html