Hlavní navigace

Knihovna ipycanvas aneb kreslicí plátno pro Jupyter Notebook (2. část)

3. 8. 2021
Doba čtení: 23 minut

Sdílet

 Autor: Depositphotos
Nejdříve dokončíme popis stylu vykreslení cest, resp. přesněji řečeno jednotlivých segmentů cesty. Dále si ukážeme definici vzorku čáry a nezapomeneme ani na možnost simulace ručního kreslení na plátno.

Obsah

1. Knihovna ipycanvas aneb kreslicí plátno pro Jupyter Notebook (2. část)

2. Specifikace jednotlivých segmentů cesty

3. Šířka obrysů úseček a křivek

4. Styly ukončení křivek i úseček

5. Styl napojení křivek, úseček a uzavřených tvarů

6. Ukázka tří stylů napojení lomených čar

7. Čárkovaná, čerchovaná, tečkovaná atd. čára či segment cesty

8. Změna offsetu čárkovaných atd. čar

9. Vzorek čar při změně směrnice

10. Offset čar při změně směrnice

11. Simulace ručního kreslení na plátno

12. Úsečky na ručně nakresleném plátnu

13. Modifikace atributu roughness

14. Modifikace atributu bowing

15. Změna stylu šraf vyplněných 2D entit

16. Porovnání jmen atributů ve formátu SVG a knihovny ipycanvas

17. Repositář s demonstračními příklady

18. Odkazy na články o Jupyter Notebooku

19. Odkazy na články o formátu SVG

20. Odkazy na Internetu

1. Knihovna ipycanvas aneb kreslicí plátno pro Jupyter Notebook (2. část)

Ve druhé části článku o knihovně ipycanvas navážeme na první část, ve které jsme si ukázali základní způsoby použití kreslicího plátna (canvasu). Dnes nejdříve dokončíme popis stylu vykreslení cest (path), resp. přesněji řečeno jednotlivých segmentů, z nichž se cesty skládají. Dále si ukážeme definici vzorku čáry (čárkovaná, čerchovaná, tečkovaná atd.) a nezapomeneme ani na možnost simulace ručního kreslení na plátno, což je varianta zpopularizovaná například serverem xkcd.

Připomeňme si na úvod, jak se knihovna ipycanvas importuje do Jupyter Notebooku, popř. do Jupyter Labu či JupyterLite. V případě JupyterLite je zapotřebí provést přípravné kroky:

# příprava knihovny určené pro instalaci
# dalších knihoven do prostředí prohlížeče
import micropip

Vlastní instalace v rámci webového prohlížeče:

# instalace knihovny ipycanvas do prostředí prohlížeče
await micropip.install("ipycanvas")

Další kroky jsou již stejné pro všechna tři prostředí:

# nyní je již možné provést import nově nainstalované knihovny
import ipycanvas

Vytvoříme kreslicí plátno s nastavenými rozměry a popř. i měřítkem:

# vytvoření kreslicího plátna
canvas = ipycanvas.Canvas(width=320, height=240)

Takto jednoduše se plátno vykreslí:

# vložení kreslicího plátna na plochu diáře
canvas

Obrázek 1: Vykreslení prázdného plátna na plochu Jupyter Notebooku.

2. Specifikace jednotlivých segmentů cesty

Minule jsme si ukázali, jakým způsobem je možné jediným příkazem vytvořit cestu a dalším příkazem ji zobrazit. Cesta je v tomto případě popsána řetězcem obsahujícím jednotlivé příkazy typu „nakresli úsečku“, „nakresli segment Bézierovy kubiky“ atd.:

# Specifikace jednotlivých segmentů cesty
path1 = ipycanvas.Path2D('M80 80 A 45 45, 0, 0, 0, 125 125 L 125 80 Z')

Vykreslení může vypadat následovně (v tomto konkrétním případě cestu vyplníme) zelenou barvou:

# vykreslení čtveřice cest
canvas.fill_style = 'green'
canvas.fill(path1)

Existuje však i alternativní (a nutno říci, že i pomalejší) způsob, v němž je každý segment specifikován zvláštním příkazem. Definice cesty začíná zavoláním metody begin_path a končí metodou stroke nebo fill. Mezi těmito příkazy se zadávají jednotlivé segmenty, a to pomocí metod:

  1. move_to
  2. line_to
  3. arc
  4. arc_to
  5. ellipse
  6. quadratic_curve_to
  7. bezier_curve_to
  8. rect
  9. close_path
Poznámka: tyto metody odpovídají jednopísmenným příkazům ukázaným minule.

Podívejme se nyní na jednoduchý příklad použití:

# vykreslení několika úseček na plochu plátna
for i in range(10):
    y = 30 + i * 20
 
    canvas.fill_text(str(i+1), 5, y+5)
 
    canvas.begin_path()
    canvas.move_to(20, y)
    canvas.line_to(310, y)
    canvas.stroke()

S výsledkem:

Obrázek 2: Deset cest, z nichž každá je tvořena jediným (liniovým) segmentem.

Poznámka: takto vytvořená cesta má jednu nevýhodu – není ji možné použít opakovaně.

3. Šířka obrysů úseček a křivek

Implicitní šířka obrysů grafických objektů (a to jak otevřených, tak i uzavřených) je nastavena na jeden pixel. Změnou atributu nazvaného line_width je možné zadat libovolnou tloušťku kreslené stopy. Tato tloušťka je zadána v bezrozměrných jednotkách, jejich převod na pixely či délkové jednotky je proveden až ve chvíli vykreslování. Implicitně je jednotka rovna šířce jednoho pixelu, ale kresby v ipycanvasu je možné v případě potřeby zvětšovat či zmenšovat, takže tato rovnost nemusí vždy platit). Podívejme se nyní na demonstrační příklad, v němž se vykreslí deset úseček (resp. přesněji řečeno deset cest obsahujících jedinou úsečku), přičemž každá úsečka bude mít zadánu odlišnou tloušťku vykreslované stopy:

# vykreslení několika úseček na plochu plátna
for i in range(10):
    y = 30 + i * 20
 
    canvas.fill_text(str(i+1), 5, y+5)
 
    canvas.line_width = i
    canvas.begin_path()
    canvas.move_to(20, y)
    canvas.line_to(310, y)
    canvas.stroke()

Výsledek zobrazený v diáři by měl vypadat následovně:

Obrázek 3: Deset úseček, každá s odlišně nastavenou tloušťkou stopy.

Poznámka: diář s tímto demonstračním příkladem naleznete na adrese https://github.com/tisnik/jupyter-notebook-examples/blob/master/ipycan­vas/ipycanvas18.ipynb.

4. Styly ukončení křivek i úseček

U otevřených geometrických entit, tj. zejména u cest, úseček a lomených čar, je možné specifikovat i způsob jejich zakončení. Uzavřené tvary, tj. například kružnice, elipsy, obdélníky či obecné mnohoúhelníky, žádný jasně definovaný konec nemají, proto na ně nebude mít nastavení stylu ukončení žádný význam. Je možné specifikovat tři způsoby ukončení, které jsou specifikovány jako hodnota atributu line_cap:

Hodnota Význam
butt ukončení cesty kolmým řezem v místě koncových bodů
round ukončení cesty kruhovým obloukem (dochází k prodloužení tvaru)
square ukončení cesty kolmým řezem vzdáleným od koncových bodů o 1/2 šířky cesty (dochází k prodloužení tvaru)

Vliv všech tří způsobů zakončení na vizuální podobu úseček si opět ukážeme na demonstračních příkladech, ve kterých jsou vykresleny různě orientované úsečky zakončené jedním ze zadaných stylů. Pro vysvětlení rozdílu mezi stylem „butt“ a „square“ jsou vykresleny i osy všech úseček, tj. vlasové čáry, které začínají a končí přesně ve vrcholech „tlustých“ úseček.

Příklad použití hodnoty „butt“:

# zvýraznění začátku a konce úseček
canvas.line_width = 1
canvas.stroke_line(20, 20, 20, 220)
canvas.stroke_line(310, 20, 310, 220)
 
# vykreslení několika úseček na plochu plátna
canvas.line_cap = "butt"
 
canvas.stroke_style = "black"
 
for i in range(10):
    y = 30 + i * 20
 
    canvas.fill_text(str(i+1), 5, y+5)
 
    canvas.line_width = i
    canvas.begin_path()
    canvas.move_to(20, y)
    canvas.line_to(310, y)
    canvas.stroke()

Výsledek:

Obrázek 4: Zakončení úseček typu „butt“.

Použití hodnoty „square“:

# zvýraznění začátku a konce úseček
canvas.line_width = 1
canvas.stroke_line(20, 20, 20, 220)
canvas.stroke_line(310, 20, 310, 220)
 
# vykreslení několika úseček na plochu plátna
canvas.line_cap = "square"
 
canvas.stroke_style = "black"
 
for i in range(10):
    y = 30 + i * 20
 
    canvas.fill_text(str(i+1), 5, y+5)
 
    canvas.line_width = i
    canvas.begin_path()
    canvas.move_to(20, y)
    canvas.line_to(310, y)
    canvas.stroke()

Obrázek 5: Zakončení úseček typu „square“.

Použití hodnoty „round“:

# zvýraznění začátku a konce úseček
canvas.line_width = 1
canvas.stroke_line(20, 20, 20, 220)
canvas.stroke_line(310, 20, 310, 220)
 
# vykreslení několika úseček na plochu plátna
canvas.line_cap = "round"
 
canvas.stroke_style = "black"
 
for i in range(10):
    y = 30 + i * 20
 
    canvas.fill_text(str(i+1), 5, y+5)
 
    canvas.line_width = i
    canvas.begin_path()
    canvas.move_to(20, y)
    canvas.line_to(310, y)
    canvas.stroke()

Obrázek 6: Zakončení úseček typu „round“.

5. Styl napojení křivek, úseček a uzavřených tvarů

V předchozí části tohoto seriálu jsme si ukázali, jakým způsobem se vytváří cesty a lomené čáry, popř. mnohoúhelníky. Všechny tyto geometrické tvary mají společnou jednu vlastnost: mohou být složeny z několika na sebe napojených úseček. Ve skutečnosti se samozřejmě nejedná o geometricky chápané úsečky, tj. o nekonečně tenké křivky, ale o úsečky se zadanou šířkou kreslené stopy (viz předchozí kapitoly a význam hodnoty atributu line_width).

Podívejme se, jak vypadá implicitní způsob napojení lomených čar, popř. cest:

# vykreslení několika úseček na plochu plátna
canvas.line_cap = "butt"
 
canvas.stroke_style = "black"
 
for i in range(0,10,2):
    y = 30 + i * 20
 
    canvas.fill_text(str(i+1), 5, y+5)
 
    canvas.line_width = i
    canvas.begin_path()
    canvas.move_to(20, y-12)
    canvas.line_to(310, y)
    canvas.line_to(20, y+12)
    canvas.stroke()

Obrázek 7: Implicitní způsob napojení lomených čar nebo cest.

ipycanvasu je možné specifikovat, jak má toto napojení vizuálně vypadat. Úsečky, při jejichž napojení se vytvoří jiný úhel než 180°, lze spojit třemi různými způsoby: buď jsou okraje úseček protaženy až do místa svého protnutí (vzniká tak „špička“), úsečky jsou zakončeny obloukem („kolenem“, nemění se tedy tloušťka cesty), nebo je možné zakončit napojení rovným okrajem tak, aby byla v co největší míře zachována tloušťka cesty. Přímo při vytváření obrázku se tedy můžeme rozhodnout, jak lomené čáry vykreslit. Vše je řízeno hodnotou atributu line_join, který může nabývat hodnot:

Hodnota Význam
miter okraje úseček jsou protaženy do místa svého protnutí (vzniká tak „špička“)
round je vykresleno obloukové „koleno“ (je zachována tloušťka cesty, resp. stopy)
bevel napojení je ukončeno rovným okrajem tak, aby byla zachována tloušťka cesty či lomené čáry

6. Ukázka tří stylů napojení lomených čar

Použití všech tří výše popsaných způsobů napojení je ukázáno v další trojici demonstračních příkladů. Povšimněte si, že není možné specifikovat napojení dvou samostatných úseček zadaných funkcí stroke_line. Vždy je nutné použít buď cestu či lomenou čáru, tj. příkaz begin_path následovaný segmenty cesty a ukončený příkazem end_path. Knihovna ipycanvas totiž každý grafický prvek vykresluje samostatně a na sobě ležící prvky jsou vykreslovány v pořadí, v jakém jsou volány.

Napojení obloukem:

# vykreslení několika úseček na plochu plátna
canvas.line_cap = "butt"
canvas.line_join = "round"
 
canvas.stroke_style = "black"
 
for i in range(0,10,2):
    y = 30 + i * 20
 
    canvas.fill_text(str(i+1), 5, y+5)
 
    canvas.line_width = i
    canvas.begin_path()
    canvas.move_to(20, y-12)
    canvas.line_to(310, y)
    canvas.line_to(20, y+12)
    canvas.stroke()

Obrázek 8: Napojení segmentů cesty obloukem.

Napojení rovným okrajem:

# vykreslení několika úseček na plochu plátna
canvas.line_cap = "butt"
canvas.line_join = "bevel"
 
canvas.stroke_style = "black"
 
for i in range(0,10,2):
    y = 30 + i * 20
 
    canvas.fill_text(str(i+1), 5, y+5)
 
    canvas.line_width = i
    canvas.begin_path()
    canvas.move_to(20, y-12)
    canvas.line_to(310, y)
    canvas.line_to(20, y+12)
    canvas.stroke()

Obrázek 9: Napojení segmentů cesty rovným okrajem.

Protažení napojení do špičky:

# vykreslení několika úseček na plochu plátna
canvas.line_cap = "butt"
canvas.line_join = "miter"
 
canvas.stroke_style = "black"
 
for i in range(0,10,2):
    y = 30 + i * 20
 
    canvas.fill_text(str(i+1), 5, y+5)
 
    canvas.line_width = i
    canvas.begin_path()
    canvas.move_to(20, y-12)
    canvas.line_to(310, y)
    canvas.line_to(20, y+12)
    canvas.stroke()

Obrázek 10: Napojení segmentů cesty jejich protažením do špičky.

7. Čárkovaná, čerchovaná, tečkovaná atd. čára či segment cesty

V kresbách vytvořených s využitím knihovny ipycanvas je však možné měnit i další vlastnosti křivek/cest a obrysů základních geometrických tvarů. Zejména se jedná o nastavení typu čáry. Nejprve si řekněme, jakým způsobem je možné měnit vzorek čáry, posléze si ukážeme i vliv parametru offset. Pro tento účel se používá atribut nazvaný set_line_dash, jehož hodnotou je seznam číselných hodnot oddělených čárkami. Hodnoty uložené na lichých místech udávají délku čárek, tj. vykreslovaných částí, hodnoty na sudých místech značí naopak délku mezer mezi čárkami. To znamená, že například zápis [10,1] vede k vytvoření úsečky, křivky či obrysu základního geometrického tvaru, které je složený vždy z čárky dlouhé deset jednotek za kterou následuje mezera o šířce jedné délkové jednotky.

Můžeme si vše otestovat na sadě deseti vzorků:

# vzorek použitý pro vykreslení čar
line_dashes = [
    [5, 5],
    [5, 10],
    [10, 5],
    [5, 10, 20],
    [10, 20],
    [20, 10],
    [20, 20],
    [1, 10],
    [10, 1],
    [1, 2, 3],
]

Které budou vybrány pro vykreslení deseti čar, resp. přesněji řečeno segmentů cesty:

# vykreslení několika úseček na plochu plátna
canvas.line_width = 2
 
canvas.stroke_style = "black"
 
for i in range(0,10):
    y = 30 + i * 20
 
    canvas.fill_text(str(i+1), 5, y+5)
    canvas.set_line_dash(line_dashes[i])
    canvas.begin_path()
    canvas.move_to(20, y)
    canvas.line_to(310, y)
    canvas.stroke()

Výsledek zobrazený na plátnu by měl vypadat následovně:

Obrázek 11: Deset segmentů cesty, každý používající odlišný vzorek.

8. Změna offsetu čárkovaných atd. čar

K atributu nastavovanému metodou set_line_dash se vztahuje ještě atribut line_dash_offset, jehož číselná hodnota udává posun začátku vykreslování stylu čáry od skutečného počátku tvaru (cesty, úsečky atd.). Pro jaké účely je možné offset použít? Zejména pro animaci (animovaný typ čáry vyvolává efekt pohybu, čehož je možné využít například pro „rozpohybování“ schématických nákresů), ale také pro zajištění, aby došlo ke korektnímu napojení čar na sebe, tj. že nedojde k napojení jednotlivých segmentů vykreslených mezerou.

Opět si ukažme demonstrační příklad:

# vzorek
line_dash = [20, 10]
 
# vykreslení několika úseček na plochu plátna
canvas.line_width = 2
 
# nastavení vzorku
canvas.set_line_dash(line_dash)
 
canvas.stroke_style = "black"
 
for i in range(0,10):
    y = 30 + i * 20
 
    canvas.fill_text(str(i+1), 5, y+5)
 
    canvas.line_dash_offset = i*2
 
    canvas.begin_path()
    canvas.move_to(20, y)
    canvas.line_to(310, y)
    canvas.stroke()

Výsledek by měl vypadat následovně:

Obrázek 12: Změna offsetu u vzorků použitých pro vykreslení úseček.

9. Vzorek čar při změně směrnice

V případě nenulové tloušťky vykreslovaných segmentů a současně při použití vzorků musí knihovna ipycanvas zajistit, aby konce vzorků byly vždy kolmé na vrcholy segmentů. Toto chování si otestujeme na dalším demonstračním příkladu, v němž je vykresleno několik úsečkových segmentů, každý s odlišnou směrnicí:

# vzorek
line_dash = [20, 10]
 
# vykreslení několika úseček na plochu plátna
canvas.line_width = 5
 
# nastavení vzorku
canvas.set_line_dash(line_dash)
 
canvas.stroke_style = "black"
 
for i in range(0,10):
    angle = i * 2 * math.pi/10.0
    canvas.fill_text(str(i+1), 5, y+5)
    canvas.begin_path()
    canvas.move_to(160+10*math.sin(angle), 120+10*math.cos(angle))
    canvas.line_to(160+100*math.sin(angle), 120+100*math.cos(angle))
    canvas.stroke()

Výsledky:

Obrázek 13: Vzorek čar pro segmenty s různou směrnicí.

10. Offset čar při změně směrnice

I offset vzorků by měl být nezávislý na směrnici segmentu. Jinými slovy – offset se počítá od začátku segmentu ve směru jeho směrnice a nikoli například ve směru horizontální či vertikální souřadné osy. Toto chování si opět ověříme na jednoduchém demonstračním příkladu:

# vzorek
line_dash = [20, 10]
 
# vykreslení několika úseček na plochu plátna
canvas.line_width = 5
 
# nastavení vzorku
canvas.set_line_dash(line_dash)
 
canvas.stroke_style = "black"
 
for i in range(0,20):
    angle = i * 2 * math.pi/20.0
    canvas.fill_text(str(i+1), 5, y+5)
    canvas.line_dash_offset = i*2
    canvas.begin_path()
    canvas.move_to(160+10*math.sin(angle), 120+10*math.cos(angle))
    canvas.line_to(160+100*math.sin(angle), 120+100*math.cos(angle))
    canvas.stroke()

Výsledek by při vykreslení na plátno měl vypadat následovně:

Obrázek 14: Offset čar při změně směrnice úsečkových segmentů.

11. Simulace ručního kreslení na plátno

Knihovna ipycanvas podporuje i simulaci ručního kreslení na plátno, což je styl zpopularizovaný například v xkcd. Přepnutí z naprosto přesného kreslení (se subpixelovou přesností) na ruční kreslení je snadné – namísto kreslicího plátna typu Canvas se zkonstruuje plátno typu RoughCanvas:

# vytvoření kreslicího plátna
canvas = ipycanvas.RoughCanvas(width=320, height=240)

Toto plátno podporuje většinu metod a atributů klasického plátna, pouze styl vykreslování bude odlišný:

# zvýraznění začátku a konce úseček
canvas.stroke_line(20, 20, 20, 220)
canvas.stroke_line(310, 20, 310, 220)

Vykreslení takového plátna na plochu diáře je naprosto stejné, jako v případě objektu typu Canvas:

# vložení kreslicího plátna na plochu diáře
canvas

12. Úsečky na ručně nakresleném plátnu

Podívejme se nejdříve, jak vypadají úsečky na ručně nakresleném plátnu (resp. na jeho simulaci). Úsečky je v současné verzi knihovny ipycanvas nutné vykreslit s využitím metody stroke_line a nikoli jako cestu:

# vykreslení několika úseček na plochu plátna
for i in range(10):
    y = 30 + i * 20
 
    canvas.fill_text(str(i+1), 5, y+5)
 
    canvas.stroke_line(20, y, 310, y)

Z výsledného screenshotu je patrné, že každá úsečka je vykreslena několikrát a to navíc rozstřeseně, jak je to u ručního kreslení (ne rýsování) poměrně běžné. Navíc je každá úsečka vykreslena odlišně, takže výsledek nepůsobí strojově:

Obrázek 15: Simulace ručně nakreslených úseček..

13. Modifikace atributu roughness

Jeden z parametrů, kterým se řídí simulátor ručního kreslení je parametr nazvaný roughness. Ten určuje nepřesnost napojení na koncové body úsečky i vzdálenost jednotlivých tahů pera. Vyzkoušet si můžeme, jak bude vypadat deset čar, každá s různým nastavením tohoto atributu v rozsahu od nuly do devíti:

# vykreslení několika úseček na plochu plátna
for i in range(10):
    y = 30 + i * 20
 
    canvas.roughness = i
    canvas.fill_text(str(i+1), 5, y+5)
 
    canvas.stroke_line(20, y, 310, y)

Obrázek 16: Deset čar, každá s různým nastavením atributu roughness v rozsahu od nuly do devíti.

14. Modifikace atributu bowing

Druhým parametrem, který ovlivňuje simulátor ručního kreslení, je atribut nazvaný bowing. Jak již název tohoto atributu naznačuje, ovlivňuje „rozmáchlost“ nakreslených křivek. Vše je osvětleno v následujícím demonstračním příkladu:

# vykreslení několika úseček na plochu plátna
for i in range(10):
    y = 30 + i * 20
 
    canvas.bowing = i*2
    canvas.fill_text(str(i+1), 5, y+5)
 
    canvas.stroke_line(20, y, 310, y)

Výsledek může vypadat takto:

*** image ***

Obrázek 17: Deset čar, každá s různým nastavením atributu bowing v rozsahu od nuly do osmnácti.

Poznámka: pochopitelně je možné modifikovat oba atributy, tedy jak roughness, tak i bowing.

15. Změna stylu šraf vyplněných 2D entit

Posledním atributem, o němž se v dnešním článku zmíníme, je atribut nazvaný rough_fill_style. Tímto atributem se určuje vzorek vyplněných 2D entit ve chvíli, kdy je simulováno ruční kreslení. V tomto případě totiž není výplň dokonalá, ale snaží se napodobit kreslení fixou nebo propiskou. Existuje celkem osm typů výplňových vzorků, z nichž všechny jsou použity v dnešním posledním demonstračním příkladu:

rough_fill_style_values = ['hachure', 'solid', 'zigzag', 'cross-hatch', 'dots', 'sunburst', 'dashed', 'zigzag-line', '']
 
for i in range(3):
    for j in range(3):
        index = i * j * 3
        if index < 9:
            canvas.rough_fill_style = rough_fill_style_values[index]
 
            canvas.fill_rect(10 + i * 100, 10 + j * 80, 90, 70)

Výsledky:

*** image ***

Obrázek 18: Změna stylu šraf vyplněných 2D entit.

16. Porovnání jmen atributů ve formátu SVG a knihovny ipycanvas

Mnoho vlastností a stylů, které je možné specifikovat v knihovně ipycanvas, má svoji obdobu i ve formátu SVG. Pro snazší porovnání jsou tyto atributy vypsány v následující tabulce:

Atribut v ipycanvas Odpovídající atribut v SVG
line_width stroke-width
stroke_style stroke
fill_style fill
global_alpha opacity, stroke-opacity, fill-opacity
text_align text-align
text_baseline alignment-baseline
line_cap stroke-linecap
line_join stroke-linejoin
set_line_dash stroke-dasharray
line_dash_offset stroke-dashoffset
roughness ×
bowing ×

17. Repositář s demonstračními příklady

Všechny demonstrační příklady (resp. přesněji řečeno diáře), s nimiž jsme se seznámili minule i v předchozích kapitolách, byly uloženy do Git repositáře umístěného na GitHubu (https://github.com/tisnik/jupyter-notebook-examples/). Poslední verze souborů s diáři naleznete pod odkazy uvedenými v tabulce pod tímto odstavcem. Diář by se měl otevřít přímo v rámci stránky GitHubu:

MIF analytika

# Příklad Popis Zdrojový kód
1 ipycanvas02.ipynb import knihovny ipycanvas do prostředí JupyterLite https://github.com/tisnik/jupyter-notebook-examples/blob/master/ipycan­vas/ipycanvas02.ipynb
2 ipycanvas02.ipynb vytvoření a zobrazení prázdného plátna na plochu diáře https://github.com/tisnik/jupyter-notebook-examples/blob/master/ipycan­vas/ipycanvas02.ipynb
3 ipycanvas03.ipynb základní 2D entity nakreslené na plátno https://github.com/tisnik/jupyter-notebook-examples/blob/master/ipycan­vas/ipycanvas03.ipynb
4 ipycanvas04.ipynb další dostupné 2D entity, které je možné nakreslit https://github.com/tisnik/jupyter-notebook-examples/blob/master/ipycan­vas/ipycanvas04.ipynb
5 ipycanvas05.ipynb změna stylu vykreslovaných entit https://github.com/tisnik/jupyter-notebook-examples/blob/master/ipycan­vas/ipycanvas05.ipynb
6 ipycanvas06.ipynb nastavení průhlednosti při vykreslování https://github.com/tisnik/jupyter-notebook-examples/blob/master/ipycan­vas/ipycanvas06.ipynb
7 ipycanvas07.ipynb gradientní barevný přechod https://github.com/tisnik/jupyter-notebook-examples/blob/master/ipycan­vas/ipycanvas07.ipynb
8 ipycanvas08.ipynb změna směru gradientního přechodu https://github.com/tisnik/jupyter-notebook-examples/blob/master/ipycan­vas/ipycanvas08.ipynb
9 ipycanvas09.ipynb paprskovitý (radial) gradientní přechod https://github.com/tisnik/jupyter-notebook-examples/blob/master/ipycan­vas/ipycanvas09.ipynb
10 ipycanvas10.ipynb text vykreslený na plátno https://github.com/tisnik/jupyter-notebook-examples/blob/master/ipycan­vas/ipycanvas10.ipynb
11 ipycanvas11.ipynb vycentrování textu v obou směrech okolo zadaného bodu https://github.com/tisnik/jupyter-notebook-examples/blob/master/ipycan­vas/ipycanvas11.ipynb
12 ipycanvas12.ipynb vykreslení čtveřice uzavřených cest https://github.com/tisnik/jupyter-notebook-examples/blob/master/ipycan­vas/ipycanvas12.ipynb
13 ipycanvas13.ipynb vykreslení cesty, jejíž hrany se protínají https://github.com/tisnik/jupyter-notebook-examples/blob/master/ipycan­vas/ipycanvas13.ipynb
14 ipycanvas14.ipynb vykreslení objektů na plátno typu RoughCanvas https://github.com/tisnik/jupyter-notebook-examples/blob/master/ipycan­vas/ipycanvas14.ipynb
       
15 ipycanvas15.ipynb vytvoření a zobrazení prázdného plátna na plochu diáře https://github.com/tisnik/jupyter-notebook-examples/blob/master/ipycan­vas/ipycanvas15.ipynb
16 ipycanvas16.ipynb změna rozměrů kreslicího plátna https://github.com/tisnik/jupyter-notebook-examples/blob/master/ipycan­vas/ipycanvas16.ipynb
17 ipycanvas17.ipynb zvýraznění okrajů plátna (vykreslení obdélníku) https://github.com/tisnik/jupyter-notebook-examples/blob/master/ipycan­vas/ipycanvas17.ipynb
18 ipycanvas18.ipynb vykreslení deseti úseček, každé s odlišnou šířkou stopy https://github.com/tisnik/jupyter-notebook-examples/blob/master/ipycan­vas/ipycanvas18.ipynb
19 ipycanvas19.ipynb nastavení vlastnosti line_cap na hodnotu „butt“ https://github.com/tisnik/jupyter-notebook-examples/blob/master/ipycan­vas/ipycanvas19.ipynb
20 ipycanvas20.ipynb nastavení vlastnosti line_cap na hodnotu „square“ https://github.com/tisnik/jupyter-notebook-examples/blob/master/ipycan­vas/ipycanvas20.ipynb
21 ipycanvas21.ipynb nastavení vlastnosti line_cap na hodnotu „round“ https://github.com/tisnik/jupyter-notebook-examples/blob/master/ipycan­vas/ipycanvas21.ipynb
22 ipycanvas22.ipynb vykreslení lomených čar s různou tloušťkou (šířkou) stopy https://github.com/tisnik/jupyter-notebook-examples/blob/master/ipycan­vas/ipycanvas22.ipynb
23 ipycanvas23.ipynb nastavení atributu line_join na hodnotu „mitel“ https://github.com/tisnik/jupyter-notebook-examples/blob/master/ipycan­vas/ipycanvas23.ipynb
24 ipycanvas24.ipynb nastavení atributu line_join na hodnotu „round“ https://github.com/tisnik/jupyter-notebook-examples/blob/master/ipycan­vas/ipycanvas24.ipynb
25 ipycanvas25.ipynb nastavení atributu line_join na hodnotu „bevel“ https://github.com/tisnik/jupyter-notebook-examples/blob/master/ipycan­vas/ipycanvas25.ipynb
26 ipycanvas26.ipynb změna vzorku liniových segmentů: čárkovaná, čerchovaná atd. čára https://github.com/tisnik/jupyter-notebook-examples/blob/master/ipycan­vas/ipycanvas26.ipynb
27 ipycanvas27.ipynb offset vzorku liniových segmentů https://github.com/tisnik/jupyter-notebook-examples/blob/master/ipycan­vas/ipycanvas27.ipynb
28 ipycanvas28.ipynb vliv směrnice čar na vykreslení jejich vzorku https://github.com/tisnik/jupyter-notebook-examples/blob/master/ipycan­vas/ipycanvas28.ipynb
29 ipycanvas29.ipynb vliv směrnice čar na vykreslení jejich vzorku se změnou offsetu https://github.com/tisnik/jupyter-notebook-examples/blob/master/ipycan­vas/ipycanvas29.ipynb
30 ipycanvas30.ipynb několik úseček na ručně vykresleném plátnu https://github.com/tisnik/jupyter-notebook-examples/blob/master/ipycan­vas/ipycanvas30.ipynb
31 ipycanvas31.ipynb modifikace atributu roughness https://github.com/tisnik/jupyter-notebook-examples/blob/master/ipycan­vas/ipycanvas31.ipynb
32 ipycanvas32.ipynb modifikace atributu bowing https://github.com/tisnik/jupyter-notebook-examples/blob/master/ipycan­vas/ipycanvas32.ipynb
33 ipycanvas33.ipynb změna stylu šraf vyplněných 2D entit https://github.com/tisnik/jupyter-notebook-examples/blob/master/ipycan­vas/ipycanvas33.ipynb

18. Odkazy na články o Jupyter Notebooku

Se samotným nástrojem Jupyter Notebook jsme se již na stránkách Rootu setkali několikrát, a to konkrétně v následujících článcích (přidán je i prozatím předposlední článek o projektu JupyterLite):

  1. Jupyter Notebook – nástroj pro programátory, výzkumníky i lektory
    https://www.root.cz/clanky/jupyter-notebook-nastroj-pro-programatory-vyzkumniky-i-lektory/
  2. Tvorba grafů v Jupyter Notebooku s využitím knihovny Matplotlib
    https://www.root.cz/clanky/tvorba-grafu-v-jupyter-notebooku-s-vyuzitim-knihovny-matplotlib/
  3. Tvorba grafů v Jupyter Notebooku s využitím knihovny Matplotlib (dokončení)
    https://www.root.cz/clanky/tvorba-grafu-v-jupyter-notebooku-s-vyuzitim-knihovny-matplotlib-dokonceni/
  4. Jupyter Notebook – operace s rastrovými obrázky a UML diagramy, literate programming
    https://www.root.cz/clanky/jupyter-notebook-operace-s-rastrovymi-obrazky-a-uml-diagramy-literate-programming/
  5. Interpret programovacího jazyka Clojure integrovaný do Jupyter Notebooku
    https://www.root.cz/clanky/interpret-programovaciho-jazyka-clojure-integrovany-do-jupyter-notebooku/
  6. Calysto Hy: integrace programovacího jazyka Hy s Jupyter Notebookem
    https://www.root.cz/clanky/calysto-hy-integrace-programovaciho-jazyka-hy-s-jupyter-notebookem/
  7. JupyterLite: nová alternativní architektura Jupyter Notebooku
    https://www.root.cz/clanky/jupyterlite-nova-alternativni-architektura-jupyter-notebooku/
  8. Interaktivní ovládací prvky v Jupyter Notebooku
    https://www.root.cz/clanky/in­teraktivni-ovladaci-prvky-v-jupyter-notebooku/
  9. Knihovna ipycanvas aneb kreslicí plátno pro Jupyter Notebook
    https://www.root.cz/clanky/knihovna-ipycanvas-aneb-kreslici-platno-pro-jupyter-notebook/

19. Odkazy na články o formátu SVG

Některé vlastnosti knihovny ipycanvas jsou odvozeny od vlastností vektorového formátu SVG. Týká se to například způsobu deklarace cest, řešení vyplnění cest, jejichž hrany se protínají atd. Z tohoto důvodu jsou pro úplnost v této příloze doplněny odkazy na již vydané články o tomto velmi užitečném formátu:

  1. Vektorový grafický formát SVG
    https://www.root.cz/clanky/vektorovy-graficky-format-svg/
  2. Cesty v souborech typu Scalable Vector Graphics
    https://www.root.cz/clanky/cesty-v-souborech-typu-scalable-vector-graphics/
  3. Scalable Vector Graphics a základní geometrické tvary
    https://www.root.cz/clanky/scalable-vector-graphics-a-zakladni-geometricke-tvary/
  4. Vlastnosti cest a základních geometrických tvarů v SVG
    https://www.root.cz/clanky/vlastnosti-cest-a-zakladnich-geometrickych-tvaru-v-svg/
  5. SVG – styly výplní a značky připojované ke křivkám
    https://www.root.cz/clanky/svg-styly-vyplni-a-znacky-pripojovane-ke-krivkam/
  6. Gradientní výplně a textové objekty v SVG
    https://www.root.cz/clanky/gradientni-vyplne-a-textove-objekty-v-svg/
  7. Grafický formát SVG a animace
    https://www.root.cz/clanky/graficky-format-svg-a-animace/
  8. Pokročilejší animace ve formátu SVG
    https://www.root.cz/clanky/po­krocilejsi-animace-ve-formatu-svg/
  9. Podpora skriptování v grafickém formátu SVG
    https://www.root.cz/clanky/podpora-skriptovani-v-grafickem-formatu-svg/
  10. Zpracování událostí při skriptování výkresů SVG
    https://www.root.cz/clanky/zpracovani-udalosti-pri-skriptovani-vykresu-svg/

20. Odkazy na Internetu

  1. ipycanvas: Interactive Canvas in Jupyter
    https://ipycanvas.readthe­docs.io/en/latest/index.html
  2. ipycanvas na PyPi
    https://pypi.org/project/ipycanvas/
  3. Canvas API
    https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API
  4. ipycanvas usage
    https://ipycanvas.readthe­docs.io/en/latest/usage.html
  5. ipywidgets (dokumentace)
    https://ipywidgets.readthe­docs.io/en/latest/
  6. Interactive Widgets
    https://github.com/jupyter-widgets/ipywidgets/blob/mas­ter/docs/source/examples/In­dex.ipynb
  7. Notebook interface
    https://en.wikipedia.org/wi­ki/Notebook_interface
  8. Jypyter: open source, interactive data science and scientific computing across over 40 programming languages
    https://jupyter.org/
  9. Matplotlib Home Page
    http://matplotlib.org/
  10. Matplotlib (Wikipedia)
    https://en.wikipedia.org/wi­ki/Matplotlib
  11. Popis barvových map modulu matplotlib.cm
    https://gist.github.com/en­dolith/2719900#id7
  12. Ukázky (palety) barvových map modulu matplotlib.cm
    http://matplotlib.org/exam­ples/color/colormaps_refe­rence.html
  13. Galerie grafů vytvořených v Matplotlibu
    https://matplotlib.org/3.2.1/gallery/
  14. showcase example code: xkcd.py
    https://matplotlib.org/xkcd/e­xamples/showcase/xkcd.html
  15. Customising contour plots in matplotlib
    https://philbull.wordpres­s.com/2012/12/27/customising-contour-plots-in-matplotlib/
  16. Graphics with Matplotlib
    http://kestrel.nmt.edu/~ra­ymond/software/python_notes/pa­per004.html
  17. The IPython Notebook
    http://ipython.org/notebook.html
  18. nbviewer: a simple way to share Jupyter Notebooks
    https://nbviewer.jupyter.org/
  19. Back to the Future: Lisp as a Base for a Statistical Computing System
    https://www.stat.auckland­.ac.nz/~ihaka/downloads/Com­pstat-2008.pdf
  20. gg4clj: a simple wrapper for using R's ggplot2 in Clojure and Gorilla REPL
    https://github.com/JonyEpsilon/gg4clj
  21. Analemma: a Clojure-based SVG DSL and charting library
    http://liebke.github.io/analemma/
  22. Clojupyter: a Jupyter kernel for Clojure
    https://github.com/roryk/clojupyter
  23. Incanter is a Clojure-based, R-like platform for statistical computing and graphics.
    http://incanter.org/
  24. Evolution of incanter (Gource Visualization)
    https://www.youtube.com/wat­ch?v=TVfL5nPELr4
  25. Questions tagged [incanter] (na Stack Overflow)
    https://stackoverflow.com/qu­estions/tagged/incanter?sor­t=active
  26. Data Sorcery with Clojure
    https://data-sorcery.org/contents/
  27. What is REPL?
    https://pythonprogramminglan­guage.com/repl/
  28. What is a REPL?
    https://codewith.mu/en/tu­torials/1.0/repl
  29. Programming at the REPL: Introduction
    https://clojure.org/guides/re­pl/introduction
  30. What is REPL? (Quora)
    https://www.quora.com/What-is-REPL
  31. Gorilla REPL: interaktivní prostředí pro programovací jazyk Clojure
    https://www.root.cz/clanky/gorilla-repl-interaktivni-prostredi-pro-programovaci-jazyk-clojure/
  32. R Markdown: The Definitive Guide
    https://bookdown.org/yihui/rmarkdown/
  33. Single-page application
    https://en.wikipedia.org/wiki/Single-page_application
  34. Video streaming in the Jupyter Notebook
    https://towardsdatascience.com/video-streaming-in-the-jupyter-notebook-635bc5809e85
  35. How IPython and Jupyter Notebook work
    https://jupyter.readthedoc­s.io/en/latest/architectu­re/how_jupyter_ipython_wor­k.html
  36. Jupyter kernels
    https://github.com/jupyter/ju­pyter/wiki/Jupyter-kernels
  37. Keras: The Python Deep Learning library
    https://keras.io/
  38. TensorFlow
    https://www.tensorflow.org/
  39. PyTorch
    https://pytorch.org/
  40. Seriál Torch: framework pro strojové učení
    https://www.root.cz/serialy/torch-framework-pro-strojove-uceni/
  41. Scikit-learn
    https://scikit-learn.org/stable/
  42. Java Interop (Clojure)
    https://clojure.org/referen­ce/java_interop
  43. Obrazy s balíčky Jupyter Notebooku pro Docker
    https://hub.docker.com/u/jupyter/#!
  44. Správce balíčků Conda (dokumentace)
    https://docs.conda.io/en/latest/
  45. Lorenzův atraktor
    https://www.root.cz/clanky/fraktaly-v-pocitacove-grafice-vi/#k02
  46. Lorenzův atraktor
    https://www.root.cz/clanky/fraktaly-v-pocitacove-grafice-iii/#k03
  47. Graphics with Matplotlib
    http://kestrel.nmt.edu/~ra­ymond/software/python_notes/pa­per004.html
  48. Embedding Matplotlib Animations in Jupyter Notebooks
    http://louistiao.me/posts/no­tebooks/embedding-matplotlib-animations-in-jupyter-notebooks/
  49. Literate programing, Kolokviální práce Pavla Starého
    https://www.fi.muni.cz/us­r/jkucera/pv109/starylp.htm
  50. PlantUML (home page)
    http://plantuml.sourceforge.net/
  51. PlantUML (download page)
    http://sourceforge.net/pro­jects/plantuml/files/plan­tuml.jar/download
  52. PlantUML (Language Reference Guide)
    http://plantuml.sourcefor­ge.net/PlantUML_Language_Re­ference_Guide.pdf
  53. Plain-text diagrams take shape in Asciidoctor!
    http://asciidoctor.org/new­s/2014/02/18/plain-text-diagrams-in-asciidoctor/
  54. Graphviz – Graph Visualization Software
    http://www.graphviz.org/
  55. graphviz (Manual Page)
    http://www.root.cz/man/7/graphviz/
  56. PIL: The friendly PIL fork (home page)
    https://python-pillow.org/
  57. Python Imaging Library (PIL), (home page)
    http://www.pythonware.com/pro­ducts/pil/
  58. PIL 1.1.6 na PyPi
    https://pypi.org/project/PIL/
  59. Pillow 5.2.0 na PyPi
    https://pypi.org/project/Pillow/
  60. Python Imaging Library na Wikipedii
    https://en.wikipedia.org/wi­ki/Python_Imaging_Library
  61. Pillow na GitHubu
    https://github.com/python-pillow/Pillow
  62. Pillow – dokumentace na readthedocs.io
    http://pillow.readthedocs­.io/en/5.2.x/
  63. How to use Pillow, a fork of PIL
    https://www.pythonforbegin­ners.com/gui/how-to-use-pillow
  64. await in Python
    https://docs.python.org/3/re­ference/expressions.html#a­wait

Autor článku

Pavel Tišnovský vystudoval VUT FIT a v současné době pracuje ve společnosti Red Hat, kde vyvíjí nástroje pro OpenShift.io.