#Barcamp : Canvas HTML contexte 2D

Depuis l’arrivée de HTML5 et de ses nouveaux éléments, les sites et applications web peuvent profiter de fonctionnalités de dessin en 2D et 3D dans le navigateur. L’élément qui nous intéresse ici est <canvas>. Il s’agit d’un espace de pixels initialement transparents, armés de Javascript pour réaliser un bon nombre de fonctions graphiques, partant du simple tracé de courbe pour aller jusqu’aux animations et jeux vidéo.

Pour déclarer un canvas il suffit d’utiliser la balise dans le HTML.

À partir de ce moment, tout ce passe côté JS

Il suffit de cibler le canvas par son ID puis de lui donner un context :

Dans ce billet je vais me focaliser sur le contexte en 2D.

Après cette étape préliminaire, nous avons à notre disposition une grille de pixel dont le point d’origine est en haut à gauche à la position (0,0).

Tracer des lignes

Bon avoir une grille c’est bien mais le mieux est de pouvoir dessiner donc voyons comment peut-on tirer des trait dans espace.

Un tracé est d’abord initialisé par la méthode beginPath(). Le point de référence de début du tracé est désigné avec moveTo(x,y). Il s’agit en quelque sorte de décider à partir de quel emplacement le pinceau va être posé. Puis vient le tracé de la ligne elle-même avec la méthode lineTo(x,y) qui va ajouter un segment au chemin qui fut débuté par beginPath(). On peut ajouter autant de segments que l’on veut, puis éventuellement « fermer » la forme pour revenir automatiquement au point de départ avecclosePath() .

Notre dessin est donc sur le papier mais, avant qu’il n’apparaisse sur notre écran il faut le remplir avec une des deux propriétés suivantes :

Pour agir sur les couleur du dessin il faut agir sur deux propriétés, fillStyle et strokeStyle:

fillStyle et strokeStyle accepte les noms des couleurs, leurs codes hexadécimal, ou encore leurs valeurs en rgb.

Il existe aussi la propriété lineWidth qui permet de modifier l’épaisseur du trait.

Forme Géometrique

Rectangle

Désormais nous savons comment poser notre crayon, l’utiliser pour tracer des ligne mais tout faire de A à Z serait long et fastidieux surtout si l’on souhaite dessiner des cercles ou autres élipses. Heureusement pour nous il existe des propriétés pour nous aider.

Pour dessiner un rectangle :

fillRect(startx, starty, hauteur, largeur)

A l’inverse clearRect permet d’effacer une portion de rectangle donné.

clearRect(startx, starty, hauteur, largeur)

Cercle

Les traits droits c’est bien, mais pouvoir faire des cercles ou des arcs de cercle c’est très pratique. Deux méthodes existent : arcTo() et surtout arc(). Le prototype de cette dernière fonction définit les coordonnées centrales de l’arc, son rayon (toujours en pixels), l’angle de début et de fin, et enfin dans quel sens le pinceau va tourner grâce à un booléen.

arc( x, y, radius, startAngle, endAngle, sensAntiHoraire )

N.B : Sachant que l’on est dans une configuration trigonométrique les angles sont définis en radians avec Math.PI (un tour complet de cercle = 2*Math.PI) et le sens de rotation est contraire aux aiguilles d’une montre lorsqu’il vaut true.

Courbe spécifique

Nous savons faire des formes et des droites, passons à quelque chose de plus spécifique :

La courbe de bézier permet de définir deux points d’inflection (cp1x, cp1y) et (cp2x, cp2y) pour changer de direction durant le tracé du même segment de courbe jusqu’au point de destination (destx, desty).

bezierCurveTo( cp1x, cp1y, cp2x, cp2y, destx, desty )

La courbe quadratique nécessite un point de contrôle en moins. Elle tracera une courbe à partir du point courant, jusqu’au point de destination (destx, desty) en étirant vers le point de contrôle (cpx, cpy).

quadraticCurveTo( cpx, cpy, destx, desty )

Dégradés

Pour aller un peu plus loin avec les couleurs il est possible de réaliser ses propres dégradés

Pour affecter un dégradé à un remplissage, il faut d’abord l’initialiser et définir quelles sont ses couleurs et points d’arrêt (étapes dans le dégradé).

Les deux principaux types de dégradés sont :

  • linéaire (createLinearGradient) le long d’un axe
  • radial (createRadialGradient) avec un centre et une extension circulaire

L’essentiel est de définir une couleur de départ et d’arrivée avec addColorStop(p,couleur). Son premier paramètre est la position de la couleur dans le dégradé, entre 0 (départ) et 1 (fin).

On peut aussi ajouter des points intermédiaires pour introduire des couleurs supplémentaires avec la même méthode.

Le prototype de création d’un dégradé linéaire est createLinearGradient( x0, y0, x1, y1 ) où le couple x0,y0 est le point de départ de l’axe et le couple  x1,y1 en est l’arrivée.

Une fois le dégradé préparé il faut l’assigner à la propriété fillStyle.

Pour un dégradé radial la méthode est semblable : createRadialGradient( x0, y0, r0 , x1 , y1, r1 ) où le couple x0,y0 est le point central du cercle de départ et le couple  x1,y1 de celui d’arrivée.

Tracer du texte sur un canvas serait extrêmement difficile sans  fonctions spécifiques de texte.

  • fillText('Hello world', coordx, coordy) produira des lettres pleines (dont la couleur sera celle de fillStyle)
  • strokeText('Hello world!', coordx, coordy)produira uniquement le contour des lettres (dont la couleur sera celle définie au préalable par strokeStyle).

Une méthode complémentaire permet de mesurer à l’avance l’espace occupé par un texte en pixels : measureText('Hello world'). Cette fonctionnalité sera bien pratique pour éviter que le texte n’apparaisse pas entièrement quand la fenêtre ou quand l’écran n’a pas forcément la résolution attendue.

Plusieurs propriétés du contexte définissent le style du texte :

  • font : police, avec une syntaxe semblable à celle rencontrée en CSS
  • textAlign : alignement horizontal
  • baseline : ligne de base (alignement vertical)

Avec Canvas il est possible d’appliquer des effets, tel que la transparence, la composition de pixel ou encore des effets de transformations.

Il est encore possible de faire du traitement d’image en et ainsi récuperer un tableau de pixel contenant leur valeur RGB, mais ceci sera traité dans un autre article.

Source : Alsacréation

#Barcamp : Animation et transition CSS3

Animation.

Les animations CSS rendent possible la création de transitions animées depuis une décoration CSS à une autre. Les animations consistent en deux composants : un style décrivant l’animation et un ensemble de keyframes qui indique les états de début et de fin du style CSS de l’animation, ainsi que des points de passage intermédiaires.

Il y à trois avantages à utiliser les animations en css plutôt qu’en javascript :

  • Elles sont faciles à utiliser pour les animations simples. Leur création est possible sans aucune connaissance en JavaScript.
  • Les animations sont fluides, même avec un système plutôt chargé. De simples animations JavaScript peuvent parfois être lentes (sauf si elles sont réalisées intelligemment).
  • Laisser le navigateur contrôler la séquence d’animation permet au navigateur d’optimiser sa performance et son efficacité.

Comment déclarer une animation ?

Pour créer une animation il faut la déclarer grâce au décorateur @keyframe, la nommer et définir ses propriétés à l’intérieur.

Les propriété sont définit à un instant T de l’animation. Il faut donc s’imaginer une barre de progression. Cette barre à pour unité le %. Donc le point de départ est 0%, et le point d’arrivée est 100%. le 0% et le 100% possèdent des alias qui sont plus intuitif, from et to :

Notre animation slidein est donc créer, mais cela n’est pas suffisant il faut maintenant la configurer.

Configurer une animation.

Pour configurer  l’animation on choisit l’élément à animer ici une balise p, et grâce à la propriété animation, en définir le comportement :

ici, on définit que la durée de l’animation est de 3 secondes, et le nom de la keyframe utilisée.

il existe plusieurs sous propriétés d’animation :

  • animation-name : le nom de l’animation à utiliser.
  • animation-duration :  le temps total de l’animation.
  • animation-timing-function : la méthode d’interpolation (accélération, décélération). Voici quelques valeurs possibles : linear, ease, ease-in, ease-out, ease-in-out, steps (nombre, start | end), cubic-bezier( p1, p2, p3, p4)
  • animation-iteration-count : le nombre de répétition de l’animation. La valeur infinite permet de jouer une animation en continu.
  • animation-direction : permet de jouer une animation en sens inverse (en fonction du cycle).
  • animation-play-state : mettre en pause l’animation. En cours d’étude de suppression par le W3C.
  • animation-delay : le temps avant que l’animation ne démarre.
  • animation-fill-mode : conserver l’état de l’animation avant le début où après la fin de celle-ci.

 

Transition CSS

Les transition CSS permettent d’animer les pages web très simplement. Pour ce faire deux propriétés nécessaire au minimum :

transition-property : précise les propriétés à transformer

transition-duration : précise la durée de transition

Optionnellement on à aussi :

transition-timing-function permet de faire des accélération, décélaration etc…

transition-delay : précise le retard (ou l’avance) de la transition

 

Une transition s’écrit de la manière suivante :

La valeur all anime toute les propriétés animables. On peut aussi préciser la/les propriétés que l’on veux animer. Vient ensuite la durée de transition qui peut être préciser en s ou ms et enfin l’effet voulu ici ease-out.

L’effet de transition est présent, mais il faut l’activer donc les pseudo-classe ont une grande importance ici pour appliquer la transition au survol ou sur le focus.

 

Source :

encodage UTF-8 TinyMCE

Si vous utilisez l’éditeur de texte TinyMCe sur vos sites web, il est possible que les accents ne soit pas encodés en UTF-8, dans votre base de donnée.

Pour résoudre ce problème, il faut spécifier dans le fichier config/tynimce.yml la ligne suivante :


entity_encoding : raw

source : http://www.developpez.net/forums/d821435/php/scripts/editeurs/tinymce/recuperer-contenu-d-textearea-tinymce-insere-base-donnee/

Rails : pluralité des routes

Lors de la création des routes, Rails ajoute automatiquement un ‘s’ a la fin du nom. Si vos noms de route sont en français, que la pluralité du mot est irrégulière, et que cela vous irrite au plus profond de vôtre âme, voici la marche à suivre pour outrepasser la méthode de pluralisation par défaut de Rail.

Dans le fichier config/initializers/inflections.rb il faut ajouter les lignes suivantes :


ActiveSupport::Inflector.inflections(:en) do |inflect|
inflect.irregular 'module_niveau', 'module_niveaux'
end

http://stackoverflow.com/questions/6178900/overide-default-pluralize-for-model-name-in-rails3

Surcharger une classe ruby dans un projet rails

Pour la surcharge d’une classe native (ex: Date), il faut placer le fichier date.rb dans le dossier config/initializers.

source : http://stackoverflow.com/questions/15414831/ruby-determine-season-fall-winter-spring-or-summer