如何在jquery对象上调用raphael方法? [英] how to call raphael methods on jquery objects?
问题描述
我正在使用Raphael创建一些圈子.当用户单击按钮时，我想为这些圆设置动画(通过增加其半径).我该怎么做?
I'm creating some circles using Raphael. When a user clicks a button, I want to animate these circles (by growing their radius). How do I do this?
例如，这是我的示例代码:
For example, here's my example code:
<!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>
[一般来说，我不清楚以下两个变量之间的区别:
[In general, I'm not clear what is the difference between the following two variables:
var c = paper.circle(50, 75, 30); // Raphael circle
$("circle").first(); // using jQuery to grab that Raphael circle
jQuery对象是Raphael圆周围的包装器吗?]
Is the jQuery object a wrapper around the Raphael circle?]
推荐答案
通读拉斐尔参考书，看来您可以使用Raphaël自己的事件方法
Reading through the Raphaël Reference, it seems that you can do this using Raphaël's own Event methods
circle.click(function (event) {
this.animate({ r: 100 }, 500);
});
文档的同一部分还指出，您可以使用jQuery之类的库，但是您必须像这样传递节点:
The same part of the documentation also notes that you can use libraries like jQuery, but you have to pass in the node, like this:
$(circle.node)
圆圈是从paper.circle调用返回的对象.
Where circle is the object returned from the paper.circle call.
但是，对于您而言，我认为以下代码将起作用:
In your case, however, I think the following code will work:
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);
});
});
这篇关于如何在jquery对象上调用raphael方法?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
