grafica in Python e Cairo

import cairo

surface = cairo.SVGSurface("esempio.svg", 400, 400)
context = cairo.Context(surface)

context.move_to(10, 10)
context.line_to(20, 50)
context.stroke()

context.move_to(20, 10)
context.show_text("abcd")
context.show_page()

surface.flush()
surface.finish()

python.py

[esempio.fig]

stessi comandi

il font iniziale si può già usare

operatori di composizione

servono per la trasparenza e alterazioni di colore in generale (es schiarimento)

non ci sono in postscript

esempio

# un quadrato
10 10 moveto
10 120 lineto
120 120 lineto
120 10 lineto
closepath
# un altro quadrato
80 80 moveto
80 190 lineto
190 190 lineto
190 80 lineto
closepath
# riempiti
fill

due quadrati riempiti di nero

disegno

[composizione-02.fig] 

# un quadrato
10 10 moveto
10 120 lineto
120 120 lineto
120 10 lineto
closepath
# un altro quadrato
80 80 moveto
80 190 lineto
190 190 lineto
190 80 lineto
closepath
# riempiti
fill

interpretazione data finora:
quello che è stato tracciato viene disegnato sulla pagina

modello generale

[composizione-03.fig]

tre superfici: sorgente, maschera e destinazione

i due quadrati

[composizione-04.fig] 

# un quadrato
10 10 moveto
10 120 lineto
120 120 lineto
120 10 lineto
closepath
# un altro quadrato
80 80 moveto
80 190 lineto
190 190 lineto
190 80 lineto
closepath
# riempiti

il disegno viene tracciato sulla maschera

fill (o stroke)

[composizione-04.fig] ==> [composizione-06.fig] 
fill

fa due cose

  1. riempie la maschera al contrario
    interno vuoto
    esterno riempito
  2. …

la sorgente

[composizione-07.fig]

la seconda operazione di fill dipende dalla sorgente

inizialmente la sorgente è tutta nera

seconda operazione di fill

[composizione-07.fig] ==> [composizione-08.fig] 
fill
  1. riempie la maschera al contrario
  2. trasferisce la sorgente sulla destinazione
    ma solo dove la maschera è vuota

effetto complessivo di fill

[composizione-08.fig] 

fill
  1. riempie la maschera al contrario
  2. trasferisce la sorgente sulla destinazione
    dove la maschera è vuota

effetto complessivo: compare il disegno, riempito

altro colore

[composizione-09.fig] 

[stesso disegno]
1.0 0.0 1.0 setrgbcolor
fill

setrgbcolor cambia la sorgente
da tutta nera a tutta azzurra

effetto di stroke o fill

[composizione-10.fig] 

...
1.0 0.0 1.0 setrgbcolor
fill

stesso di prima:
la sorgente viene copiata sulla destinazione
ma solo dove la maschera è vuota

risultato: il disegno è del nuovo colore

motivo

[composizione-11.fig]

la sorgente può essere un motivo (pattern)

disegno con motivo

[composizione-12.fig]

stessa operazione:
la sorgente viene copiata sulla destinazione
ma solo dove la maschera è vuota

effetto complessivo: quadrati con il motivo

disegno come sorgente

[composizione-13.fig]

la sorgente può essere un disegno arbitrario

stessa operazione:
viene trasferito sulla destinazione
ma solo dove la maschera lo permette

effetto di fill su sorgente qualsiasi

[composizione-a.fig]

la sorgente viene trasferita sulla destinazione
ma solo dove la maschera lo permette

operatore di composizione

operatore di composizione "over",
quello inizialmente impostato

over: copia la sorgente sulla destinazione
dove lo permette la maschera

esistono altri operatori: add, atop, dest, burn, …

operatore add

un altro operatore di composizione

add:
somma i colori di sorgente e destinazione dove la destinazione è disegnata
copia la sorgente sulla destinazione dove non lo è
fuori dalla maschera mantiene il colore precedente

add.py
add.pdf

esempio con add invece di over

[composizione-17.fig]

sorgente rossa

destinazione con un disegno precedente

effetto di add

[composizione-17.fig] ==> [composizione-18.fig]
interno dei due quadrati, dentro il disegno precedente della destinazione
si sommano i colori: rosso + verde = giallo
interno dei due quadrati, fuori dal disegno precedente della destinazione
si trasferisce il colore della sorgente sulla destinazione: rosso
esterno dei due quadrati
resta il colore precedente della destinazione: verde e sfondo

sorgente parzialmente disegnata

[composizione-20.fig]

sorgente disegnata con un rettangolo rosso

sfondo della sorgente: zero colore, nero

sempre operatore add

effetto di add con sorgente parzialmente disegnata

[composizione-20.fig] ==> [composizione-21.fig]

effetto di add:

dentro la maschera (i due quadrati)
si sommano i colori
rosso + verde ⇒ giallo
rosso + niente ⇒ rosso
nero + verde ⇒ verde (parte bassa del poligono verde)
nero + niente ⇒ nero
fuori dalla maschera (i due quadrati)
colori precedenti della destinazione:
verde (parte alta del poligono verde) e niente

grafica nelle pagine web

area di disegno

<canvas id="main" width="300" height="300"></canvas>

contesto di disegno

<script>
canvas = document.getElementById("main");
ctx = canvas.getContext("2d");

…

operazioni grafiche

ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(110, 10);
ctx.lineTo(110, 110);
ctx.lineTo(10, 110);
ctx.closePath();
ctx.fill();
</script>

file completo

tela in cui si può disegnare 
<canvas id="main" width="300" height="300"></canvas>
contesto di disegno 
<script>
canvas = document.getElementById("main");
ctx = canvas.getContext("2d");
disegno 
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(110, 10);
ctx.lineTo(110, 110);
ctx.lineTo(10, 110);
ctx.closePath();
ctx.fill();
</script>

disegno.html

reazione ad eventi

realizzazione della reazione ad eventi

il disegno va in una funzione 
function draw(event) {
	ctx.beginPath();
	…
}
si associa il pulsante del mouse alla funzione 
canvas = document.getElementById("main");
ctx = canvas.getContext("2d");
canvas.addEventListener("click", draw);

eventi.html