floss:python:cairo-tutoriel

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentes Révision précédente
Prochaine révision
Révision précédente
floss:python:cairo-tutoriel [2012/02/27 15:24] villersdfloss:python:cairo-tutoriel [2012/03/28 03:12] (Version actuelle) – [Installation de Pycairo sous Windows] villersd
Ligne 1: Ligne 1:
 ====== Tutoriel sur Cairo pour les programmeurs Python ====== ====== Tutoriel sur Cairo pour les programmeurs Python ======
 +
 +//Texte original en anglais de Michael Urman.//
  
 [[http://cairographics.org/|Cairo]] est une puissante bibliothèque graphique 2D. [[http://cairographics.org/|Cairo]] est une puissante bibliothèque graphique 2D.
Ligne 14: Ligne 16:
 Ce tutoriel se base essentiellement sur la **traduction du [[http://www.tortall.net/mu/wiki/CairoTutorial|"Cairo Tutorial for Python Programmers"]], avec l'aimable autorisation de l'auteur original, Michael Urman** (Copyright © 2005-2008 Michael Urman). Le texte traduit, les images et codes python issus du site de M. Urman restent donc sous la licence [[http://www.gnu.org/copyleft/gpl.html|GPL]]. Ce tutoriel se base essentiellement sur la **traduction du [[http://www.tortall.net/mu/wiki/CairoTutorial|"Cairo Tutorial for Python Programmers"]], avec l'aimable autorisation de l'auteur original, Michael Urman** (Copyright © 2005-2008 Michael Urman). Le texte traduit, les images et codes python issus du site de M. Urman restent donc sous la licence [[http://www.gnu.org/copyleft/gpl.html|GPL]].
  
-Lorsque la première personne est utilisée dans le texte traduit, il faut comprendre "Michaël Urman". Si des informations sont ajoutées indépendantes de la traduction, ce sera clairement spécifié, et placé en fin de document. +Lorsque la première personne est utilisée dans le texte traduit, il faut comprendre "Michael Urman". Si des informations sont ajoutées indépendantes de la traduction, ce sera clairement spécifié, et placé en fin de document. 
 </note> </note>
  
Ligne 25: Ligne 27:
 Afin d'expliquer les opérations utilisées par Cairo, nous avons d'abord examiner de manière schématique la façon de dessiner de Cairo. Il y a seulement quelques concepts impliqués, qui sont ensuite appliqués à plusieurs reprises par les différentes méthodes. Je vais d'abord décrire les noms : destination, source, masque, chemin, et contexte. Ensuite je décrirai les [[http://www.tortall.net/mu/wiki/CairoTutorial#verbs|verbes]] qui offrent les moyens de manipuler les noms et d'en tirer les graphiques que vous souhaitez créer. Voici [[http://www.tortall.net/mu/wiki/CairoTutorial/diagram.py?raw|le code]] à l'origine de la confection de tous les diagrammes, mais je vous conseille de ne pas le lire maintenant. Afin d'expliquer les opérations utilisées par Cairo, nous avons d'abord examiner de manière schématique la façon de dessiner de Cairo. Il y a seulement quelques concepts impliqués, qui sont ensuite appliqués à plusieurs reprises par les différentes méthodes. Je vais d'abord décrire les noms : destination, source, masque, chemin, et contexte. Ensuite je décrirai les [[http://www.tortall.net/mu/wiki/CairoTutorial#verbs|verbes]] qui offrent les moyens de manipuler les noms et d'en tirer les graphiques que vous souhaitez créer. Voici [[http://www.tortall.net/mu/wiki/CairoTutorial/diagram.py?raw|le code]] à l'origine de la confection de tous les diagrammes, mais je vous conseille de ne pas le lire maintenant.
  
-Si vous trouvez les descriptions ci-dessous trop clairsemée, Donn Ingle a créé des diagrammes synoptiques en SVG qui tentent de lier le tout. Ils nécessitent [[http://inkscape.org/|Inkscape]] (ou un programme similaire) pour afficher, ainsi que deux polices spécifiques pour l'apparence correcte. Zoomez sur chaque «pages» au fur et à mesure de votre lecture. Comme Donn demande de télécharger et partager les diagrammes si on les trouve utiles, vous pourrez les télécharger en suivant ce lien.+Si vous trouvez les descriptions ci-dessous trop clairsemée, Donn Ingle a créé des diagrammes synoptiques en SVG qui tentent de relier le tout. Ils nécessitent [[http://inkscape.org/|Inkscape]] (ou un programme similaire) pour l'affichage, ainsi que deux polices spécifiques pour une apparence correcte. Zoomez sur chaques «pages» au fur et à mesure de votre lecture. Comme Donn demande de télécharger et partager les diagrammes si on les trouve utiles, vous pourrez les télécharger en suivant ce [[https://docs.google.com/leaf?id=0ByXVQD8awBcLYjc2ZWVmZmItMDlmMi00MWUzLThkMTUtMzNhNTU0YjI3M2M2&amp;hl=en|lien]].
  
 ==== Noms ==== ==== Noms ====
Ligne 31: Ligne 33:
 Les noms de Cairo sont un peu abstraits. Pour les rendre concrets, Michael Urman nous propose des diagrammes qui illustrent la façon dont ils interagissent. Les trois premiers noms sont les trois couches dans les schémas que vous voyez dans cette section. Le quatrième nom, le chemin, est placé sur la couche intermédiaire lorsque c'est pertinent. Le dernier nom, le contexte, n'est pas représenté. Les noms de Cairo sont un peu abstraits. Pour les rendre concrets, Michael Urman nous propose des diagrammes qui illustrent la façon dont ils interagissent. Les trois premiers noms sont les trois couches dans les schémas que vous voyez dans cette section. Le quatrième nom, le chemin, est placé sur la couche intermédiaire lorsque c'est pertinent. Le dernier nom, le contexte, n'est pas représenté.
  
-{{ :floss:python:cairo:destination.png?direct&|}}=== Destination === +=== Destination === 
 +{{ :floss:python:cairo:destination.png?direct&|}}
 La destination est la [[http://www.cairographics.org/manual/cairo-surfaces.html|surface]] sur laquelle vous dessinez. Elle peut être liée à une matrice de pixels, ou elle pourrait être liée à un fichier SVG ou PDF, ou autre chose. Cette surface recueille les éléments de votre graphique lorsque vous les appliquez, vous permettant de construire un travail complexe, comme une peinture sur une toile. La destination est la [[http://www.cairographics.org/manual/cairo-surfaces.html|surface]] sur laquelle vous dessinez. Elle peut être liée à une matrice de pixels, ou elle pourrait être liée à un fichier SVG ou PDF, ou autre chose. Cette surface recueille les éléments de votre graphique lorsque vous les appliquez, vous permettant de construire un travail complexe, comme une peinture sur une toile.
 +\\ 
 +\\ 
 +\\ 
 +\\ 
  
-{{ :floss:python:cairo:source.png?direct&|}}=== Source === +=== Source === 
 +{{ :floss:python:cairo:source.png?direct&|}}
 La source est la «peinture» avec laquelle vous allez travailler. Elle est présentée telle qu'elle est (un noir uni pour plusieurs exemples) ou de manière translucide pour montrer les couches inférieures. Contrairement à la vraie peinture, elle ne doit pas nécessairement être une seule couleur, cela peut être un [[http://www.cairographics.org/manual/cairo-cairo-pattern-t.html|motif]] de ou même une [[http://www.cairographics.org/manual/cairo-surfaces.html|surface]] de destination préalablement créée. En outre, contrairement à la peinture réelle, la source peut contenir une information sur la transparence, le [[http://en.wikipedia.org/wiki/Alpha_compositing|canal Alpha]]. La source est la «peinture» avec laquelle vous allez travailler. Elle est présentée telle qu'elle est (un noir uni pour plusieurs exemples) ou de manière translucide pour montrer les couches inférieures. Contrairement à la vraie peinture, elle ne doit pas nécessairement être une seule couleur, cela peut être un [[http://www.cairographics.org/manual/cairo-cairo-pattern-t.html|motif]] de ou même une [[http://www.cairographics.org/manual/cairo-surfaces.html|surface]] de destination préalablement créée. En outre, contrairement à la peinture réelle, la source peut contenir une information sur la transparence, le [[http://en.wikipedia.org/wiki/Alpha_compositing|canal Alpha]].
 +\\ 
 +\\ 
 +\\ 
 +\\ 
  
-{{ :floss:python:cairo:the-mask.png?direct&|}}=== Masque (mask) === 
  
 +=== Masque (mask) ===
 +{{ :floss:python:cairo:the-mask.png?direct&|}}
 Le masque est l'élément le plus important : il contrôle l'endroit où vous appliquez la source vers la destination. On le montrera comme une couche jaune avec des trous là où la source peut traverser. Lorsque vous appliquez un verbe de dessin, c'est comme si vous tamponnez la source sur la destination. Partout où le masque le permet, la source est copiée. Là où le masque l'interdit, rien ne passe. Le masque est l'élément le plus important : il contrôle l'endroit où vous appliquez la source vers la destination. On le montrera comme une couche jaune avec des trous là où la source peut traverser. Lorsque vous appliquez un verbe de dessin, c'est comme si vous tamponnez la source sur la destination. Partout où le masque le permet, la source est copiée. Là où le masque l'interdit, rien ne passe.
 +\\  
 +\\  
 +\\  
 +\\  
 +   
 +  
 === Chemin (path) === === Chemin (path) ===
  
Ligne 79: Ligne 95:
 === Afficher du texte / glyphes (Show Text / Glyphs) === === Afficher du texte / glyphes (Show Text / Glyphs) ===
  
-{{ :floss:python:cairo:showtext.png?direct&|}}L'opération [[http://www.cairographics.org/manual/cairo-text.html#cairo-show-text|//show_text()//]] forme le masque à partir d'un texte. On peut s'imaginer plus facilement //show_text()// comme un raccourci sur la création d'un chemin avec [[http://www.cairographics.org/manual/cairo-Paths.html#cairo-text-path|text_path()]] suivi du remplissage [[http://www.cairographics.org/manual/cairo-cairo-t.html#cairo-fill|//fill()//]] pour son transfert. Soyez conscients que show_text() enregistre temporairement les [[http://fr.wikipedia.org/wiki/Glyphes|glyphes]], ce qui est d'autant plus efficace si vous travaillez avec beaucoup de texte.+{{ :floss:python:cairo:showtext.png?direct&|}}L'opération [[http://www.cairographics.org/manual/cairo-text.html#cairo-show-text|show_text()]] forme le masque à partir d'un texte. On peut s'imaginer plus facilement //show_text()// comme un raccourci sur la création d'un chemin avec [[http://www.cairographics.org/manual/cairo-Paths.html#cairo-text-path|text_path()]] suivi du remplissage [[http://www.cairographics.org/manual/cairo-cairo-t.html#cairo-fill|//fill()//]] pour son transfert. Soyez conscients que show_text() enregistre temporairement les [[http://fr.wikipedia.org/wiki/Glyphes|glyphes]], ce qui est d'autant plus efficace si vous travaillez avec beaucoup de texte.
  
 [[http://www.tortall.net/mu/wiki/CairoTutorial/diagram.py?raw|Tutoriel Cairo : Diagrams]] (section #text) [[http://www.tortall.net/mu/wiki/CairoTutorial/diagram.py?raw|Tutoriel Cairo : Diagrams]] (section #text)
Ligne 92: Ligne 108:
 === Peindre (paint) === === Peindre (paint) ===
  
-{{ :floss:python:cairo:paint.png?direct&|}}L'opération peindre [[http://www.cairographics.org/manual/cairo-cairo-t.html#cairo-paint|//paint()//]] utilise un masque qui transfère l'ensemble de la //source// vers la //destination//. Certaines personnes considèrent cela comme un masque infiniment grand, et d'autres considèrent cela comme une absence de masque; le résultat est le même. L'opération liée à [[http://www.cairographics.org/manual/cairo-cairo-t.html#cairo-paint-with-alpha|paint_with_alpha()]] permet semblablement le transfert de la totalité de la source sur la destination, mais il ne transfère que le pourcentage spécifié de la couleur.+{{ :floss:python:cairo:paint.png?direct&|}}L'opération peindre [[http://www.cairographics.org/manual/cairo-cairo-t.html#cairo-paint|paint()]] utilise un masque qui transfère l'ensemble de la //source// vers la //destination//. Certaines personnes considèrent cela comme un masque infiniment grand, et d'autres considèrent cela comme une absence de masque; le résultat est le même. L'opération liée à [[http://www.cairographics.org/manual/cairo-cairo-t.html#cairo-paint-with-alpha|paint_with_alpha()]] permet semblablement le transfert de la totalité de la source sur la destination, mais il ne transfère que le pourcentage spécifié de la couleur.
  
 [[http://www.tortall.net/mu/wiki/CairoTutorial/diagram.py?raw|Tutoriel Cairo : Diagrams]] (section #paint) [[http://www.tortall.net/mu/wiki/CairoTutorial/diagram.py?raw|Tutoriel Cairo : Diagrams]] (section #paint)
Ligne 198: Ligne 214:
 [[http://www.tortall.net/mu/wiki/CairoTutorial/draw.py?raw|Tutoriel Cairo: Drawing]] (section #lineto) [[http://www.tortall.net/mu/wiki/CairoTutorial/draw.py?raw|Tutoriel Cairo: Drawing]] (section #lineto)
  
-  cr.line_to (0.5, 0.375) +  cr.line_to(0.5, 0.375) 
-  cr.rel_line_to (0.25, -0.125)+  cr.rel_line_to(0.25, -0.125)
  
 === Arcs === === Arcs ===
Ligne 208: Ligne 224:
 [[http://www.tortall.net/mu/wiki/CairoTutorial/draw.py?raw|Tutoriel Cairo: Drawing]] (section #arc) [[http://www.tortall.net/mu/wiki/CairoTutorial/draw.py?raw|Tutoriel Cairo: Drawing]] (section #arc)
  
-  cr.arc (0.5, 0.5, 0.25 * sqrt(2), -0.25 * pi, 0.25 * pi)+  cr.arc(0.5, 0.5, 0.25 * sqrt(2), -0.25 * pi, 0.25 * pi)
  
 === Courbes === === Courbes ===
Ligne 264: Ligne 280:
 ===== Trucs et astuces ===== ===== Trucs et astuces =====
  
-Dans les sections précédentes, vous devriez avoir construit une solide connaissance des opérations que Cairo utilise pour créer des images. Dans cette section, j'ai (NDT : pour rappel, Michaël Urman) rassemblé une petite poignée d'extraits que j'ai trouvé particulièrement utiles ou non évidents. Il peut y avoir d'autres façons pour mieux faire ces choses.+Dans les sections précédentes, vous devriez avoir construit une solide connaissance des opérations que Cairo utilise pour créer des images. Dans cette section, j'ai (NDT : pour rappel, Michael Urman) rassemblé une petite poignée d'extraits que j'ai trouvé particulièrement utiles ou non évidents. Il peut y avoir d'autres façons pour mieux faire ces choses.
  
 ==== Largeur de ligne ==== ==== Largeur de ligne ====
Ligne 317: Ligne 333:
   * [[http://zetcode.com/tutorials/cairographicstutorial/]]   * [[http://zetcode.com/tutorials/cairographicstutorial/]]
   * [[http://preshing.com/20110831/penrose-tiling-explained]]   * [[http://preshing.com/20110831/penrose-tiling-explained]]
 +  * [[http://www.cairographics.org/pycairo/|pycairo]]
 +  * [[http://savannah.nongnu.org/projects/things/|Things]] : animations, Python + Pycairo
 +  * [[https://github.com/tbaugis/hamster_experiments]] : animation GNOME Python Cairo GTK
 +
 +
 +==== Installation de Pycairo sous Windows ====
 +L'installation de Pycairo seul peut se faire via les "binary" des sites [[http://www.cairographics.org/pycairo/resources/]] (non testé) et [[http://www.lfd.uci.edu/~gohlke/pythonlibs/#pycairo]] (ce dernier lien a été testé sous win 7 32 bits pour python 2.7 avec une **installation pré-existante du logiciel [[http://www.gimp.org/|GIMP]]** qui inclut les dll nécessaires : **OK**).
 +
 +La [[http://www.cs.rhul.ac.uk/home/tamas/development/igraph/tutorial/install.html|procédure d'installation sous windows de igraph]] peut être suivie pour l'installation de PyCairo (avec des précisions sur les dll à installer manuellement; testé par des étudiants : **OK** ).
  
 +Cependant Pycairo peut être installé en même temps que des programmes qui l'utilisent, notamment [[http://www.pygtk.org/downloads.html|PyGTK]] (non testé),... 
  
  • floss/python/cairo-tutoriel.1330352697.txt.gz
  • Dernière modification : 2012/02/27 15:24
  • (modification externe)