comment appeler les méthodes raphael sur des objets jquery?

Je crée des cercles en utilisant Raphael. Quand un utilisateur clique sur un bouton, je veux animer ces cercles (en augmentant leur rayon). Comment puis-je faire cela?comment appeler les méthodes raphael sur des objets jquery?

Par exemple, voici mon exemple de 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>

[En général, je ne suis pas clair quelle est la différence entre les deux variables suivantes:

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

est l'objet jQuery une enveloppe autour du cercle de Raphael?]

Source

2010-11-15 grautur

lecture à travers le Raphaël Reference, il semble que vous pouvez le faire en utilisant le propre Event methods

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

La même partie de Raphaël de la documentation note également que vous pouvez bibliothèques d'utilisation comme jQuery, mais vous devez passer dans le nœud, comme ceci:

$(circle.node)

Où cercle est l'objet retourné de l'appel paper.circle.

Dans votre cas, cependant, je pense que le code suivant fonctionnera:

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); 
    }); 
});

Source

2010-11-15 02:39:01

Cool, merci. Oui, ça fonctionne. J'espérais accéder à une sorte d'objet-cercle jQuery, afin que je puisse utiliser les fonctions de délai de jQuery dans mes animations, mais peut-être que c'est trop de problèmes = \. – grautur

@grautur Vous pouvez utiliser 'setTimeout' pour faire cela –

Votre sélecteur "cercle" ne vise rien - il n'y a aucun élément de cercle à cibler. Cependant, vous pouvez le faire:

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); 
});

Je ne saurais vous dire si vous pouvez animer() les cercles en fonction du rayon, mais à tout le moins cela vous donne un objet jQuery pour travailler avec.

Source

2010-11-15 02:38:11

Que voulez-vous dire qu'il n'y a aucun élément de cercle pour moi de cible? – grautur

@grautur Cela signifie que jQuery ne peut pas sélectionner l'élément 'circle' directement, et il ne sert à rien d'utiliser la fonction' animate' de jQuery quand le propre de Raphaël le fera. –

comment appeler les méthodes raphael sur des objets jquery?

Répondre

Questions connexes