Как вызвать методы Raphael на объектах JQuery? - PullRequest
Новая
       1

Как вызвать методы Raphael на объектах JQuery?

2 голосов
/ 15 ноября 2010

Я создаю несколько кругов, используя Рафаэля. Когда пользователь нажимает кнопку, я хочу анимировать эти круги (увеличивая их радиус). Как мне это сделать?

Например, вот мой пример кода: 

<!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 оболочкой вокруг круга Рафаэля?]

Ответы [ 2 ]

6 голосов
/ 15 ноября 2010

Прочитав Raphaël Reference , кажется, что вы можете сделать это, используя собственные методы Raphaël Event 

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

В той же части документации также отмечается, что вы можете использовать библиотеки, такие как jQuery, но вы должны передать узел, например: 

$(circle.node)

Где кружок - это объект, возвращенный из вызова 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);
    });
});
4 голосов
/ 15 ноября 2010

Ваш селектор "круг" не нацеливается ни на что - для вас нет элемента круга. Тем не менее, вы можете сделать это: 

circle1 = paper.circle(50, 75, 30); 
circle2 = paper.circle(150, 75, 30); 

$("button").click(function() { 
    circle1.animate({ r: 100 }, 500);
    circle2.animate({ r: 100 }, 500);
});

Я не могу сказать вам, можете ли вы анимировать () круги на основе радиуса, но по крайней мере это дает вам объект jQuery для работы.

...