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:11] – [Interprétation du texte] 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 60: Ligne 76:
 {{ :floss:python:cairo:stroke.png?direct&|}}L'opération [[http://www.cairographics.org/manual/cairo-cairo-t.html#cairo-stroke|stroke()]] utilise un stylo virtuel le long du chemin (//path//). Elle permet le transfert de la //source// à travers le masque (//mask//) sur une ligne mince (ou épaisse) autour du chemin (//path//), en fonction de la largeur du stylo ([[http://www.cairographics.org/manual/cairo-cairo-t.html#cairo-set-line-width|line width]]), du style de ligne ([[http://www.cairographics.org/manual/cairo-cairo-t.html#cairo-set-dash|dash style]]), et des extrémités de ligne ([[http://www.cairographics.org/manual/cairo-cairo-t.html#cairo-set-line-cap|line caps]]). {{ :floss:python:cairo:stroke.png?direct&|}}L'opération [[http://www.cairographics.org/manual/cairo-cairo-t.html#cairo-stroke|stroke()]] utilise un stylo virtuel le long du chemin (//path//). Elle permet le transfert de la //source// à travers le masque (//mask//) sur une ligne mince (ou épaisse) autour du chemin (//path//), en fonction de la largeur du stylo ([[http://www.cairographics.org/manual/cairo-cairo-t.html#cairo-set-line-width|line width]]), du style de ligne ([[http://www.cairographics.org/manual/cairo-cairo-t.html#cairo-set-dash|dash style]]), et des extrémités de ligne ([[http://www.cairographics.org/manual/cairo-cairo-t.html#cairo-set-line-cap|line caps]]).
  
-Tutoriel Cairo : Diagrams (section #stroke)+[[http://www.tortall.net/mu/wiki/CairoTutorial/diagram.py?raw|Tutoriel Cairo : Diagrams]] (section #stroke)
  
   cr.set_line_width(0.1)   cr.set_line_width(0.1)
Ligne 71: Ligne 87:
 {{ :floss:python:cairo:fill.png?direct&|}}L'opération de remplissage ou [[http://www.cairographics.org/manual/cairo-cairo-t.html#cairo-fill|fill()]] utilise plutôt le chemin (//path//), comme les lignes dans un livre de coloriage, et donne accès à la //source//, par l'intermédiaire du masque (//mask//) dont l'orifice est constitué par le chemin. Pour les chemins complexes (chemins avec de multiples sous-chemins fermés -comme un beignet- ou des chemins qui s'auto-intersectent) c'est influencé par la [[http://www.cairographics.org/manual/cairo-cairo-t.html#cairo-set-fill-rule|règle de remplissage]]. Notez que dans le cas du trait le transfert de la source le long du chemin se fait sur la moitié de l'épaisseur du trait de chaque côté de la trajectoire, tandis que le remplissage s'opère jusqu'aux bords définis par le chemin et pas au-delà. {{ :floss:python:cairo:fill.png?direct&|}}L'opération de remplissage ou [[http://www.cairographics.org/manual/cairo-cairo-t.html#cairo-fill|fill()]] utilise plutôt le chemin (//path//), comme les lignes dans un livre de coloriage, et donne accès à la //source//, par l'intermédiaire du masque (//mask//) dont l'orifice est constitué par le chemin. Pour les chemins complexes (chemins avec de multiples sous-chemins fermés -comme un beignet- ou des chemins qui s'auto-intersectent) c'est influencé par la [[http://www.cairographics.org/manual/cairo-cairo-t.html#cairo-set-fill-rule|règle de remplissage]]. Notez que dans le cas du trait le transfert de la source le long du chemin se fait sur la moitié de l'épaisseur du trait de chaque côté de la trajectoire, tandis que le remplissage s'opère jusqu'aux bords définis par le chemin et pas au-delà.
  
-Tutoriel Cairo : Diagrams  (section #fill)+[[http://www.tortall.net/mu/wiki/CairoTutorial/diagram.py?raw|Tutoriel Cairo : Diagrams]]  (section #fill)
  
   cr.set_source_rgb(0, 0, 0)   cr.set_source_rgb(0, 0, 0)
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.
  
-Tutoriel Cairo : Diagrams (section #text)+[[http://www.tortall.net/mu/wiki/CairoTutorial/diagram.py?raw|Tutoriel Cairo : Diagrams]] (section #text)
  
   cr.set_source_rgb(0.0, 0.0, 0.0)   cr.set_source_rgb(0.0, 0.0, 0.0)
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.
  
-Tutoriel Cairo : Diagrams (section #paint)+[[http://www.tortall.net/mu/wiki/CairoTutorial/diagram.py?raw|Tutoriel Cairo : Diagrams]] (section #paint)
  
   cr.set_source_rgb(0.0, 0.0, 0.0)   cr.set_source_rgb(0.0, 0.0, 0.0)
Ligne 103: Ligne 119:
 {{ :floss:python:cairo:mask.png?direct&|}}Les opérations [[http://www.cairographics.org/manual/cairo-cairo-t.html#cairo-mask|mask()]] et [[http://www.cairographics.org/manual/cairo-cairo-t.html#cairo-mask-surface|mask_surface()]] permettent le transfert selon la transparence/opacité d'un motif ou de la surface d'une seconde source. Lorsque le motif ou la surface est opaque, la source courante est transférée à la destination. Lorsque le motif ou la surface est transparente, rien n'est transféré. {{ :floss:python:cairo:mask.png?direct&|}}Les opérations [[http://www.cairographics.org/manual/cairo-cairo-t.html#cairo-mask|mask()]] et [[http://www.cairographics.org/manual/cairo-cairo-t.html#cairo-mask-surface|mask_surface()]] permettent le transfert selon la transparence/opacité d'un motif ou de la surface d'une seconde source. Lorsque le motif ou la surface est opaque, la source courante est transférée à la destination. Lorsque le motif ou la surface est transparente, rien n'est transféré.
  
-Tutoriel Cairo : Diagrams (Section #mask)+[[http://www.tortall.net/mu/wiki/CairoTutorial/diagram.py?raw|Tutoriel Cairo : Diagrams]] (Section #mask)
  
   self.linear = cairo.LinearGradient(0, 0, 1, 1)   self.linear = cairo.LinearGradient(0, 0, 1, 1)
Ligne 124: Ligne 140:
 Il y a trois principaux types de sources dans Cairo: les couleurs, les gradients ou dégradés et les images. Les couleurs sont les plus simples, elles utilisent une teinte et une opacité uniformes pour la source entière. Vous pouvez les sélectionner sans aucune préparation avec [[http://www.cairographics.org/manual/cairo-cairo-t.html#cairo-set-source-rgb|set_source_rgb()]] et [[http://www.cairographics.org/manual/cairo-cairo-t.html#cairo-set-source-rgba|set_source_rgba()]]. L'utilisation de ''set_source_rgb(r, g, b)'' est équivalente à l'usage de ''set_source_rgba( r, g, b, 1.0)'', et elle définit la couleur de votre source en utilisant une opacité complète. Il y a trois principaux types de sources dans Cairo: les couleurs, les gradients ou dégradés et les images. Les couleurs sont les plus simples, elles utilisent une teinte et une opacité uniformes pour la source entière. Vous pouvez les sélectionner sans aucune préparation avec [[http://www.cairographics.org/manual/cairo-cairo-t.html#cairo-set-source-rgb|set_source_rgb()]] et [[http://www.cairographics.org/manual/cairo-cairo-t.html#cairo-set-source-rgba|set_source_rgba()]]. L'utilisation de ''set_source_rgb(r, g, b)'' est équivalente à l'usage de ''set_source_rgba( r, g, b, 1.0)'', et elle définit la couleur de votre source en utilisant une opacité complète.
  
-{{ :floss:python:cairo:setsourcergba.png?direct&|}}Tutoriel Cairo: Drawing (section #rgba)+{{ :floss:python:cairo:setsourcergba.png?direct&|}} 
 +[[http://www.tortall.net/mu/wiki/CairoTutorial/draw.py?raw|Tutoriel Cairo: Drawing]] (section #rgba)
  
   cr.set_source_rgb(0, 0, 0)   cr.set_source_rgb(0, 0, 0)
Ligne 147: Ligne 164:
 Des gradients décrivent une couleur variant progressivement en définissant un emplacement de début et un emplacement d'arrêt ainsi qu'une série de butées le long du chemin. Les gradients linéaires [[http://www.cairographics.org/manual/cairo-cairo-pattern-t.html#cairo-pattern-create-linear|Linear gradients]] sont construits à partir de deux points qui définissent une direction sur laquelle on place les emplacements de début et d'arrêt. Des [[http://www.cairographics.org/manual/cairo-cairo-pattern-t.html#cairo-pattern-create-radial|gradients radiaux]] (//radial gradients//) sont également construits à partir de deux points auxquels sont associés des rayons correspondant au cercle sur lequel on définit les emplacements de début et d'arrêt. Les butées (//stops//) sont ajoutés au dégradé avec [[http://www.cairographics.org/manual/cairo-cairo-pattern-t.html#cairo-pattern-add-color-stop-rgb|add_color_stop_rgb()]] et [[http://www.cairographics.org/manual/cairo-cairo-pattern-t.html#cairo-pattern-add-color-stop-rgba|add_color_stop_rgba()]] qui prennent une couleur comme ''set_source_rgb*()'', ainsi qu'un décalage (//offset//) pour indiquer où il se trouve entre les emplacements de référence. Les couleurs entre les arrêts adjacents sont moyennées sur l'espace pour former un mélange fluide. Enfin, le comportement au-delà des emplacements de référence peut être contrôlé par [[http://www.cairographics.org/manual/cairo-cairo-pattern-t.html#cairo-pattern-set-extend|set_extend()]]. Des gradients décrivent une couleur variant progressivement en définissant un emplacement de début et un emplacement d'arrêt ainsi qu'une série de butées le long du chemin. Les gradients linéaires [[http://www.cairographics.org/manual/cairo-cairo-pattern-t.html#cairo-pattern-create-linear|Linear gradients]] sont construits à partir de deux points qui définissent une direction sur laquelle on place les emplacements de début et d'arrêt. Des [[http://www.cairographics.org/manual/cairo-cairo-pattern-t.html#cairo-pattern-create-radial|gradients radiaux]] (//radial gradients//) sont également construits à partir de deux points auxquels sont associés des rayons correspondant au cercle sur lequel on définit les emplacements de début et d'arrêt. Les butées (//stops//) sont ajoutés au dégradé avec [[http://www.cairographics.org/manual/cairo-cairo-pattern-t.html#cairo-pattern-add-color-stop-rgb|add_color_stop_rgb()]] et [[http://www.cairographics.org/manual/cairo-cairo-pattern-t.html#cairo-pattern-add-color-stop-rgba|add_color_stop_rgba()]] qui prennent une couleur comme ''set_source_rgb*()'', ainsi qu'un décalage (//offset//) pour indiquer où il se trouve entre les emplacements de référence. Les couleurs entre les arrêts adjacents sont moyennées sur l'espace pour former un mélange fluide. Enfin, le comportement au-delà des emplacements de référence peut être contrôlé par [[http://www.cairographics.org/manual/cairo-cairo-pattern-t.html#cairo-pattern-set-extend|set_extend()]].
  
-{{ :floss:python:cairo:setsourcegradient.png?direct&|}}Tutoriel Cairo: Drawing (section #gradient)+{{ :floss:python:cairo:setsourcegradient.png?direct&|}} 
 +[[http://www.tortall.net/mu/wiki/CairoTutorial/draw.py?raw|Tutoriel Cairo: Drawing]] (section #gradient)
  
   radiale = cairo.RadialGradient(0.25, 0.25, 0.1, 0.5, 0.5, 0.5)   radiale = cairo.RadialGradient(0.25, 0.25, 0.1, 0.5, 0.5, 0.5)
Ligne 186: Ligne 204:
 {{ :floss:python:cairo:path-moveto.png?direct&|}}Cairo utilise un système de connecteurs entre points (connect-the-dots) lors de la création des chemins. Commencez au point 1, tracez une ligne vers 2, puis vers 3, et ainsi de suite. Lorsque vous démarrez un chemin, ou quand vous avez besoin de démarrer un nouveau sous-chemin, vous voulez qu'il le démarrer du point 1 sans que quelque chose y soit connecté. Pour cela, utilisez [[http://www.cairographics.org/manual/cairo-Paths.html#cairo-move-to|move_to()]]. Ceci définit le point de référence en cours sans créer un chemin de raccord à partir d'un point précédent. Il y a aussi une variante en coordonnées relatives, [[http://www.cairographics.org/manual/cairo-Paths.html#cairo-rel-move-to|rel_move_to()]], qui établit la nouvelle référence à une position spécifiée par une translation par rapport à la référence actuelle. Après avoir établi votre premier point de référence, utilisez les autres opérations de tracé de chemin pour mettre à la fois à jour le point de référence et s'y connecter d'une certaine manière. {{ :floss:python:cairo:path-moveto.png?direct&|}}Cairo utilise un système de connecteurs entre points (connect-the-dots) lors de la création des chemins. Commencez au point 1, tracez une ligne vers 2, puis vers 3, et ainsi de suite. Lorsque vous démarrez un chemin, ou quand vous avez besoin de démarrer un nouveau sous-chemin, vous voulez qu'il le démarrer du point 1 sans que quelque chose y soit connecté. Pour cela, utilisez [[http://www.cairographics.org/manual/cairo-Paths.html#cairo-move-to|move_to()]]. Ceci définit le point de référence en cours sans créer un chemin de raccord à partir d'un point précédent. Il y a aussi une variante en coordonnées relatives, [[http://www.cairographics.org/manual/cairo-Paths.html#cairo-rel-move-to|rel_move_to()]], qui établit la nouvelle référence à une position spécifiée par une translation par rapport à la référence actuelle. Après avoir établi votre premier point de référence, utilisez les autres opérations de tracé de chemin pour mettre à la fois à jour le point de référence et s'y connecter d'une certaine manière.
  
-Cairo tutorial: Drawing (section #moveto)+[[http://www.tortall.net/mu/wiki/CairoTutorial/draw.py?raw|Tutoriel Cairo: Drawing]] (section #moveto)
  
   cr.move_to(0.25, 0.25)   cr.move_to(0.25, 0.25)
Ligne 193: Ligne 211:
  
 {{ :floss:python:cairo:path-lineto.png?direct&|}}Que ce soit avec des coordonnées absolues [[http://www.cairographics.org/manual/cairo-Paths.html#cairo-line-to|line_to()]] (étendre le chemin de la référence à ce point), ou avec des coordonnées relatives [[http://www.cairographics.org/manual/cairo-Paths.html#cairo-rel-line-to|rel_line_to()]] (étendre le chemin de la référence dans une direction donnée), le chemin de connexion sera une ligne droite. Le nouveau point de référence sera à l'autre extrémité de la ligne. {{ :floss:python:cairo:path-lineto.png?direct&|}}Que ce soit avec des coordonnées absolues [[http://www.cairographics.org/manual/cairo-Paths.html#cairo-line-to|line_to()]] (étendre le chemin de la référence à ce point), ou avec des coordonnées relatives [[http://www.cairographics.org/manual/cairo-Paths.html#cairo-rel-line-to|rel_line_to()]] (étendre le chemin de la référence dans une direction donnée), le chemin de connexion sera une ligne droite. Le nouveau point de référence sera à l'autre extrémité de la ligne.
-Cairo tutorial: Drawing (section #lineto) 
  
-  cr.line_to (0.5, 0.375) +[[http://www.tortall.net/mu/wiki/CairoTutorial/draw.py?raw|Tutoriel Cairo: Drawing]] (section #lineto) 
-  cr.rel_line_to (0.25, -0.125)+ 
 +  cr.line_to(0.5, 0.375) 
 +  cr.rel_line_to(0.25, -0.125)
  
 === Arcs === === Arcs ===
Ligne 203: Ligne 222:
 {{ :floss:python:cairo:path-arcto.png?direct&|}}Les arcs sont des parties de l'extérieur d'un cercle. Contrairement aux lignes droites, le point que vous spécifiez n'est pas directement sur ​​le chemin. C'est en fait le centre du cercle qui servira à définir l'arc, en spécifiant aussi le rayon, l'angle de départ et celui d'arrivée. Ces points sont reliés soit dans le sens horaire par [[http://www.cairographics.org/manual/cairo-Paths.html#cairo-arc|arc()]] ou anti-horaire par [[http://www.cairographics.org/manual/cairo-Paths.html#cairo-arc-negative|arc_negative()]]. Si le point de référence précédent n'est pas sur la nouvelle courbe, une ligne droite est ajoutée à partir de lui jusqu'à l'endroit où l'arc commence. Le point de référence est ensuite mis à jour à l'endroit où l'arc se termine. Il n'y a que les versions absolues de ces deux opérations. {{ :floss:python:cairo:path-arcto.png?direct&|}}Les arcs sont des parties de l'extérieur d'un cercle. Contrairement aux lignes droites, le point que vous spécifiez n'est pas directement sur ​​le chemin. C'est en fait le centre du cercle qui servira à définir l'arc, en spécifiant aussi le rayon, l'angle de départ et celui d'arrivée. Ces points sont reliés soit dans le sens horaire par [[http://www.cairographics.org/manual/cairo-Paths.html#cairo-arc|arc()]] ou anti-horaire par [[http://www.cairographics.org/manual/cairo-Paths.html#cairo-arc-negative|arc_negative()]]. Si le point de référence précédent n'est pas sur la nouvelle courbe, une ligne droite est ajoutée à partir de lui jusqu'à l'endroit où l'arc commence. Le point de référence est ensuite mis à jour à l'endroit où l'arc se termine. Il n'y a que les versions absolues de ces deux opérations.
  
-Cairo tutorial: 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 211: Ligne 230:
 {{ :floss:python:cairo:path-curveto.png?direct&|}}Les courbes dans Cairo sont des courbes cubiques de Bézier. Elles commencent au point de référence en cours et sont tangentes en leurs extrémités à deux directions pointant vers deux autres points (sans passer par eux) pour se joindre à un troisième point (le point terminal) spécifié. Comme les lignes, il y a à la fois la version absolue [[http://www.cairographics.org/manual/cairo-Paths.html#cairo-curve-to|curve_to()]] et la version relative [[http://www.cairographics.org/manual/cairo-Paths.html#cairo-rel-curve-to|rel_curve_to()]]. Notez que la variante relative précise l'ensemble des trois points par rapport au point de référence précédent, plutôt que de positionner chacun par rapport au point de contrôle précédent de la courbe. {{ :floss:python:cairo:path-curveto.png?direct&|}}Les courbes dans Cairo sont des courbes cubiques de Bézier. Elles commencent au point de référence en cours et sont tangentes en leurs extrémités à deux directions pointant vers deux autres points (sans passer par eux) pour se joindre à un troisième point (le point terminal) spécifié. Comme les lignes, il y a à la fois la version absolue [[http://www.cairographics.org/manual/cairo-Paths.html#cairo-curve-to|curve_to()]] et la version relative [[http://www.cairographics.org/manual/cairo-Paths.html#cairo-rel-curve-to|rel_curve_to()]]. Notez que la variante relative précise l'ensemble des trois points par rapport au point de référence précédent, plutôt que de positionner chacun par rapport au point de contrôle précédent de la courbe.
  
-Cairo tutorial: Drawing (section #curveto)+[[http://www.tortall.net/mu/wiki/CairoTutorial/draw.py?raw|Tutoriel Cairo: Drawing]] (section #curveto)
  
   cr.rel_curve_to(-0.25, -0.125, -0.25, 0.125, -0.5, 0)   cr.rel_curve_to(-0.25, -0.125, -0.25, 0.125, -0.5, 0)
Ligne 219: Ligne 238:
 {{ :floss:python:cairo:path-close.png?direct&|}}Cairo peut aussi fermer le chemin en traçant une ligne droite vers le début de l'actuel sous-chemin. Cette droite peut être utile pour la dernière arête d'un polygone, mais n'est pas directement utile pour des formes à base de courbes. Un chemin fermé est fondamentalement différent d'un chemin ouvert : c'est un chemin continu et il n'a pas de début ou de fin. Un chemin fermé n'a pas style de bout de ligne (//caps//) et il n'y a pas de possibilité d'en mettre (commande [[http://cairographics.org/manual/cairo-cairo-t.html#cairo-set-line-cap|set_line_cap]]). {{ :floss:python:cairo:path-close.png?direct&|}}Cairo peut aussi fermer le chemin en traçant une ligne droite vers le début de l'actuel sous-chemin. Cette droite peut être utile pour la dernière arête d'un polygone, mais n'est pas directement utile pour des formes à base de courbes. Un chemin fermé est fondamentalement différent d'un chemin ouvert : c'est un chemin continu et il n'a pas de début ou de fin. Un chemin fermé n'a pas style de bout de ligne (//caps//) et il n'y a pas de possibilité d'en mettre (commande [[http://cairographics.org/manual/cairo-cairo-t.html#cairo-set-line-cap|set_line_cap]]).
  
-Cairo tutorial: Drawing (section #closepath)+[[http://www.tortall.net/mu/wiki/CairoTutorial/draw.py?raw|Tutoriel Cairo: Drawing]] (section #closepath)
  
   cr.close_path()   cr.close_path()
Ligne 261: 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 271: Ligne 290:
 Lorsque vous travaillez avec une échelle déformée, vous voudriez toujours avoir des largeurs de ligne qui sont uniformes dans l'espace périphérique. Pour cela, vous devez revenir à une échelle uniforme avant le tracé du chemin. Dans l'image, l'arc sur de gauche est tracé sous une déformation, tandis que l'arc de droite est tracé avec une échelle uniforme.  Lorsque vous travaillez avec une échelle déformée, vous voudriez toujours avoir des largeurs de ligne qui sont uniformes dans l'espace périphérique. Pour cela, vous devez revenir à une échelle uniforme avant le tracé du chemin. Dans l'image, l'arc sur de gauche est tracé sous une déformation, tandis que l'arc de droite est tracé avec une échelle uniforme. 
  
-Caire Tutoriel: Tips and Tricks (article #deform)+{{ :floss:python:cairo:tips-ellipse.png?direct&|}} 
 +[[http://www.tortall.net/mu/wiki/CairoTutorial/tips.py?raw|Caire Tutoriel: Tips and Tricks]] (article #deform)
  
   cr.save()   cr.save()
Ligne 287: Ligne 307:
 Lorsque vous essayez de centrer le texte lettre par lettre à différents endroits, vous devez décider comment vous voulez effectuer ce centrage. Par exemple le code suivant en fait des lettres centrées individuellement, conduisant à des résultats médiocres lorsque vos lettres sont de tailles différentes. (Contrairement à la plupart des exemples, ici, on suppose un espace de travail 26 x 1.) Lorsque vous essayez de centrer le texte lettre par lettre à différents endroits, vous devez décider comment vous voulez effectuer ce centrage. Par exemple le code suivant en fait des lettres centrées individuellement, conduisant à des résultats médiocres lorsque vos lettres sont de tailles différentes. (Contrairement à la plupart des exemples, ici, on suppose un espace de travail 26 x 1.)
  
-Cairo Tutoriel: Tips and Tricks (section #center)+{{:floss:python:cairo:tips-letter.png?direct&|}} 
 + 
 +[[http://www.tortall.net/mu/wiki/CairoTutorial/tips.py?raw|Cairo Tutoriel: Tips and Tricks]] (section #center)
  
   for cx, letter in enumerate('abcdefghijklmnopqrstuvwxyz'):   for cx, letter in enumerate('abcdefghijklmnopqrstuvwxyz'):
Ligne 296: Ligne 318:
 Le centrage vertical doit plutôt être basé sur la taille générale de la police, gardant ainsi votre ligne de base stable. Notez que le positionnement exact dépend maintenant des métriques prévues par la police elle-même, de sorte que les résultats ne sont pas nécessairement les mêmes entre polices différentes. Le centrage vertical doit plutôt être basé sur la taille générale de la police, gardant ainsi votre ligne de base stable. Notez que le positionnement exact dépend maintenant des métriques prévues par la police elle-même, de sorte que les résultats ne sont pas nécessairement les mêmes entre polices différentes.
  
-Cairo Tutoriel: Tips and Tricks (section #baseline)+{{:floss:python:cairo:tips-font.png?direct&|}} 
 + 
 +[[http://www.tortall.net/mu/wiki/CairoTutorial/tips.py?raw|Cairo Tutoriel: Tips and Tricks]] (section #baseline)
  
   fascent, fdescent, fheight, fxadvance, fyadvance = cr.font_extents()   fascent, fdescent, fheight, fxadvance, fyadvance = cr.font_extents()
Ligne 309: 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.1330351917.txt.gz
  • Dernière modification : 2012/02/27 15:11
  • de villersd