Cette section est close pour le moment.
Mais je n'arrête pas la veille, loin de là. Retrouvez mes projets sur Github et sur cette page qui sera à jour plus régulierement


Ressources

Définition de ressource : (nom féminin) Qui peut fournir ce dont on a besoin.
Vous l'aurez compris, sur cette page ce ne sont pas vraiment des tutoriels, c'est plutôt des penses-bêtes plus ou moins fournis mais qui vous permettront d'avoir des bases concernant la programmation.
Recherche par tag

KineticJS une librairie pour utiliser les canvas HTML5 facilement

KineticJS une librairie pour utiliser les canvas HTML5 facilement
Publication : Le 25/03/2013 à 23:37:15

Introduction

La librairie javascript Kinetic.Js permet de développer facilement des canvas, une nouveauté d'HTML5.

Dans cette ressource, nous allons voir deux exemples simples, la création d'un histogramme et d'un camembert. Plus tard j'écrirai une autre ressource sur un exemple plus développé.

Comment ça marche?

Tout simplement, il suffit d'intégrer le fichier js dans le de notre site.

Il faudra ensuite créer une div qui contiendra notre canvas.

Ensuite, au chargement de notre page, il faudra instancier notre div.
<html>
<head>
<script src="path/to/kinetic.js"></script>
<script>
/*
* Chargement de du canvas
*/
window.onload = function() {
var canvas = new Kinetic.Stage({
container: "kinetic",
width: 500,
height: 500
});
var thecontent = new Kinetic.Layer(); // Contient les infos
/*
* Ici nous allons créer nos cadres / lignes / textes
*/

canvas.add(thecontent); // Ajoute au canvas la dernière 'frame'
};
</script>
</head>
<body>
<canvas id="kinetic"></canvas>
</body>
</html>

Création d'un histogramme

Pré-requis :

- Nous avons un tableau php contenant différentes informations :
<?php
$array = array(
array('id' => 'rouge', 'fill' => 'red', 'height' => rand(20, 200)),
array('id' => 'bleu', 'fill' => 'blue', 'height' => rand(20, 200)),
array('id' => 'vert', 'fill' => 'green', 'height' => rand(20, 200)),
array('id' => 'jaune', 'fill' => 'yellow', 'height' => rand(20, 200)),
array('id' => 'orange', 'fill' => 'orange', 'height' => rand(20, 200)),
array('id' => 'violet', 'fill' => 'purple', 'height' => rand(20, 200))
);
?>
Nous allons créer une ligne pour représenter l'axe des abscisses et des ordonnées.

Pour cela nous allons utiliser la classe Kinetic.Line()
Cette classe prends énormément de paramètres en compte, mais nous allons voir que les bases. Vous les trouverez dans la documentation.

Nous allons donc créer l'épaisseur du trait avec 'strokeWidth' et gérer la trajectoire avec 'points'.

Dans le paramètre 'point' il faut spécifier l'abscisse et l'ordonnée de chaque point. Il faut partir du coin en bas à gauche de la div.

Ce qui donne :
var abscisse_ordonnee = new Kinetic.Line({
points: [
40,40, 
40,260,
450,260
],
strokeWidth: 2
});
thecontent.add(abscisse_ordonnee); // On ajoute
Ensuite nous allons créer les rectangles représentants les données.
Nous avons vu plus haut qu'une array() en PHP contient les informations, nous allons donc le parcourir.

Nous allons partir de la coordonnée [50, 260] et la taille du rectangle sera de 55px.

Pour créer un rectangle, on utilise la classe Kinetic.Rect().
Les paramètres x, y, width, height, fill et strokeWidth seront utilisés. Leurs noms est assez clair pour ne pas avoir à les décrire :
<?php
$width_default = 55;
$x = 50;
$y = 260;
foreach ($array as $item) {
?>
var rectangle = new Kinetic.Rect({
x: <?php echo $x ?>,
y: <?php echo $y - $item['height'] ?>,
width: <?php echo $width_default ?>,
height: <?php echo $item['height'] ?>,
fill:"<?php echo $item['fill'] ?>",
strokeWidth: 1
});

thecontent.add(rectangle);
<?php
$x += $width_default + 10;
}
?>
Et pour terminer on va écrire sous chaque rectangle le nom de la donnée.

Il faut donc décaler la coordonnée de départ. On va commencer sur [50, 260].

Dans les paramètres on va utiliser : x, y, text; fontSize, fontFamily , Fill, width et align. Dans notre exemple on trouvera :
<?php
$x = 50;
$y = 260;
foreach ($array as $item) {
?>
var texte = new Kinetic.Text({
x: <?php echo $x ?>,
y: <?php echo $y ?>,
text: "<?php echo $item['id'] ?>",
fontSize: 11,
fontFamily: "verdana",
Fill: "grey",
width: <?php echo $width_default ?>,
align: "left"
});
thecontent.add(texte);
<?php
$x += $width_default + 10; // On décale l'axe des abscisses
}
?>

Création d'un camembert.

Nous allons modifier notre array() PHP qui contient les données afin d'avoir des valeurs fixes :
<?php
$array = array(
    array('id' => 'rouge', 'fill' => 'red', 'height' => 30),
    array('id' => 'bleu', 'fill' => 'blue', 'height' => 20),
    array('id' => 'vert', 'fill' => 'green', 'height' => 20),
    array('id' => 'jaune', 'fill' => 'yellow', 'height' => 15),
    array('id' => 'orange', 'fill' => 'orange', 'height' => 15)
);
?>
Cette fois, nous allons travailler avec la classe Kinetic.Wedge().

Trois paramètres sont importants dans cette classe :
- radius pour déterminer le rayon.
- angleDeg l'angle souhaité en degré.
- rotationDeg le point de départ de l'angle.

Pour centrer notre camembert dans notre canvas, on va utiliser deux fonctions : getWidth() et getHeight().

Ce qui donne :
<?php
$start = 0; // l'angle de départ, on va partir vers 0°
foreach ($array as $item) {
$item['height'] = 360 * $item['height'] / 100; // l'angle voulu 
?>
var wedge = new Kinetic.Wedge({
x: canvas.getWidth() / 2,
y: canvas.getHeight() / 2,
radius: 120,
angleDeg: <?php echo $item['height'] ?>,
fill: '<?php echo $item['fill'] ?>',
stroke: 'black',
strokeWidth: 1,
rotationDeg: <?php echo $start ?>
});
thecontent.add(wedge);
<?php
$start += $item['height']; // On décale l'angle de départ du tracé
}
?>

Conclusion

Cette librairie permet de bien travailler avec les canvas facilement. Bien documenté et mise à jour régulièrement, vous pouvez vous tourner vers elle sans problème!

Sur le même thème

KineticJS une librairie pour utiliser les canvas HTML5 facilement
Publication : Le 25/03/2013 à 23:37:15

Tags

Tags : jQuery - js / HTML

Suggestion :

Utiliser un hack pour structurer vos pages en HTML5 sur IE

Utiliser un hack pour structurer vos pages en HTML5 sur IE