SlideShare une entreprise Scribd logo
1  sur  56
Télécharger pour lire hors ligne
8. Java 2D a kreslení
       Ondřej Brejla
Obsah
   Grafický kontext
   Volba barvy
   Volba písma
   Fontové metriky
   Kreslení primitivních objektů
   Kreslení obrázků
   Rozhraní – Shape, Paint, Stroke, Composite
   Transformace
   Kreslení polygonů a obecných křivek
Co je to ”grafický kontext”?
Co je to ”grafický kontext”?
Co je to ”grafický kontext”?




Krysa je v grafickém kontextu
          dělící čáry.
Grafický kontext

   Co to znamená ”grafický kontext”?
       Je to datová struktura
       ”Abstraktní kreslítko” - jak a kam VS. co
       Je to objekt třídy Graphics (resp. Graphics2D)
       Definuje metody pro kreslení a výstup textu
       Pro kreslení do komponent většinou překrýváme
        metodu:
        public void paintComponent(Graphics g)
Jak mohu zvolit barvu?
Jak mohu zvolit barvu?
Jak mohu zvolit barvu?




  Namočíme štětec do kalíšku...

            ...nebo...
Jak mohu zvolit barvu?



            ...nebo...

        ...použijeme třídu

       java.awt.Color
Jak mohu zvolit barvu?
                   Color.ORANGE
Color.GREEN


                                  Color.BLUE

              Color.YELLOW

Color.RED


                             Color.WHITE
Volba barvy

   Před kreslením je barvu třeba nastavit
       g.setColor(Color color); // getColor();
   Použijeme objekt java.awt.Color
       Buď předdefinovanou konstantu (např. Color.RED)
       Nebo vlastní instanci
        new Color(int red, int green, int blue);
                   red, green, blue - <0; 255>
Jaké písmo vybrat?
Jaké písmo vybrat?




             Aš nazg
           durbatulűk...
Jaké písmo vybrat?




     Tak jednoduché to nebude...
Volba písma
   Před použitím je potřeba písmo nastavit
    g.setFont(Font font); // g.getFont();
   Písmo je reprezentováno objektem třídy
    java.awt.Font
       Konstruktor má 3 parametry – name, style, size
                   name – logické (Serif, Monospaced,
                     SansSerif, Dialog a DialogInput),
                     nebo ”fyzické”
                   style – Font.PLAIN | BOLD | ITALIC
                   size – velikost v bodech – 1 bod = 1/72”
   Objekt písma nelze později upravovat
Jaké jsou fontové metriky?
Jaké jsou fontové metriky?
Jaké jsou fontové metriky?




   Je jich spousty...vypadá to
            zmateně...
Jaké jsou fontové metriky?




  ...nás, naštěstí, zajímá pouze
              jedna...
Jaké jsou fontové metriky?


   ...a to tato jednoduchá...uff.
Fontové metriky

   Fontové metriky získáme z objektu třídy
    java.awt.FontMetrics
       public int getAscent() - výška znaku nad
        účařím v pixelech
       public int getDescent() - výška znaku pod
        účařím v pixelech
       public int getLeading() - velikost mezery mezi
        řádky v pixelech
       public int getHeight() - velikost písma v
        pixelech
Fontové metriky

   A objekt FontMetrics získáme z grafického
    kontextu
       g.getFontMetrics() - metrika aktuálního fontu
       g.getFontMetrics(Font font) – metrika
        zadaného fontu
Jak kreslit primitivní objekty?
Jak kreslit primitivní objekty?
Jak kreslit primitivní objekty?




  Třeba jako Picasso (Guernica)...

             ...nebo...
Jak kreslit primitivní objekty?



              ...nebo...

      ...použijeme metody třídy

        java.awt.Graphics
Kreslení primitivních objektů

    g.drawLine(int x1, int y1, int x2, int y2) –
    vykreslí čáru mezi body
   g.drawRect(int x, int y, int width, int 
    height) – vykreslí obrys obdélníka (od souřadnic levého
    horního rohu)
   g.fillRect(int x, int y, int width, int 
    height) – vyplní obdélník (-||-)
   g.drawRoundRect(int x, int y, int width, 
    int height, int arcWidth, int arcHeight) -
    vykreslí obrys obdélníka se zaoblenými rohy (-||-)
   g.fillRoundRect(int x, int y, int width, 
    int height, int arcWidth, int arcHeight) –
    vyplní obdélník se zaoblenými rohy (-||-)
Kreslení primitivních objektů
   g.draw3DRect(int x, int y, int width, int 
    height, boolean b) – vykreslí obrys 3D obdélníka, b 
    == true => vystouplý, b == false => zapuštěný ( -||- )
   g.fill3DRect(int x, int y, int width, int 
    height, boolean b) – vyplní 3D obdélník (parametry
    stejné jako u draw)
   g.drawOval(int x, int y, int width, int 
    height) – vykreslí obrys elipsy, parametry popisují
    obalový obdélník (elipsa se všech stran dotýká)
   g.fillOval(int x, int y, int width, int 
    height) – vyplní elipsu (parametry stejné jako u draw)
Kreslení primitivních objektů
   Oblouk je určen počátečním úhlem a velikostí vnitřního
    úhlu ve stupních
       počáteční úhel je na ”3 hodinách”
      Proti směru hodinových ručiček je úhel kladný
   g.drawArc(int x, int y, int width, int 
    height, int startAngle, int arcAngle) –
    vykreslí obrys oblouku relativně k zadané elipse
   g.fillArc(int x, int y, int width, int 
    height, int startAngle, int arcAngle) – vyplní
    oblouk relativně k zadané elipse
   g.drawString(String s, int x, int y) – vykreslí
    řetězec (souřadnice účaří nejlevějšího znaku)
Jak kreslit obrázky?
Jak kreslit obrázky?
Jak kreslit obrázky?




  Ručně kreslit radši nebudeme...
Jak kreslit obrázky?




     ...radši obrázek načteme
         a necháme vykreslit
Kreslení obrázků

   Rozhraní Icon
       Obrázek pevné velikosti používaný pro dekorace
       Nelze provádět úpravy obrázku
       Lze vykreslit na komponentu metodou g.paintIcon()
   Abstraktní třída Image reprezentuje obrázek
       VolatileImage – data nejsou přímo dostupná z Javy
       BufferedImage – obsahuje pole pixelů dostupných z
        Javy, lze do něj kreslit
Kreslení obrázků

   ImageIcon
       Ikona na základě obrázku
       Lze použít Image tam, kde je vyžadováno Icon
       Konstruktor bere název souboru – URL (gif, png, jpg)
Kreslení obrázků

   Načtení obrázku
       Image je abstraktní, takže musíme jinak
       Pomocí třídy Toolkit
       Toolkit.getDefaultToolkit().createImage(file);
   Kreslení obrázků
       g.drawImage() - image, levý horní roh a velikost
       Kreslení obrázku je asynchronní
                   Pokud nejsou k dispozici kompletní data,
                     informuje komponentu přes rozhranní
                     ImageObserver, jakmile se další data objeví
       Metoda umí vykreslit i výřez
Graphics vs. Graphics2D?
Graphics vs. Graphics2D?
Graphics vs. Graphics2D?




        Stáří vs. Mládí...
Graphics vs. Graphics2D?

   Třída Graphics2D
       Kvůli zpětné kompatibilitě potomkem třídy
        Graphics
       Kvůli zpětné kompatibilitě se také stále předává
        grafický kontext Graphics a na Graphics2D je
        třeba přetypovat
       Přidává nové vlastnosti
Rozhraní - Shape

   Reprezentuje nějaký tvar
       Rectangle2D, Ellipse2D, Arc2D
       Line2D, CubicCurve2D, QuadCurve2D
       GeneralPath
   Vykreslení se děje pomocí metod
    g2d.draw(Shape s) a g2d.fill(Shape s)
    třídy Graphics2D
Rozhraní - Paint

   Určuje jakou barvou se bude jaký pixel kreslit
   Nastavuje se pomocí metody
    g2d.setPaint(Paint p); // g2d.getPaint()
       Color
       GradientPaint, LinearGradientPaint, 
        RadialGradientPaint
       SystemColor – barva pro určitou část GUI
       TexturePaint
Rozhraní - Stroke

   Určuje jakým způsobem se budou kreslit čáry a obrysy
   Nastavuje se pomocí metody
    g2d.setStroke(Stroke s);// g2d.getStroke()
       BasicStroke – definuje tloušťku čáry, styl zakončení a
        zalomení čar a přerušení čar
Rozhraní - Composite

   Určuje způsob zkombinování původní a nové barvy
    pixelu při kreslení
   Nastavuje se pomocí metody
    g2d.setComposite(Composite s); 
    // g2d.getComposite()
       AlphaComposite – původní barva se zkombinuje s
        kreslenou a umožňuje průhlednost
Jak transformovat?
Jak transformovat?
Jak transformovat?




     Kreslených transformerů
        se ptát nebudeme...
Jak transformovat?




      ...jednoduše použijeme

        AffineTransform
Transformace

   Je možné provést afinní transformaci systému
    souřadnic (transformace je reprezentována
    maticí)
   Třída AffineTransform obaluje matici
       Transformaci provedeme postupně pomocí metod
        translate (posun počátku), rotate (rotace) a
        scale (změna měřítka) objektu třídy
        AffineTransform
   Nastavuje se pomocí metody
    g2d.setTransform(AffineTransform t); 
    // g2d.getTransform()
Polygony?
Polygony?
Polygony?




    Kdepak závodní polygon...

        ...kreslit budeme!
Polygony a obecné křivky

   Mnohoúhelníky
       Uzavřené tvary složené z úseku rovných čar
       Lze je vykreslit pomocí metod
        g.drawPolygon(int[] xPoints, int[] yPoints, 
        int point)
        a
        g.fillPolygon(int[] xPoints, int[] yPoints, 
        int point)
        třídy Graphics
       Polygon může být reprezentován třídou Polygon,
        která obsahuje metodu addPoint() pro přidání
        bodu
Polygony a obecné křivky

   Lomené čáry
       Posloupnosti bodů spojené rovnými čarami
       Uzavřené lomené čáry jsou polygony
       Lze je vykreslit pomocí metody
       g.drawPolyline(int[] xPoints, int[] yPoints, 
        int point)
A to je pro dnešek vše. Otázky?




       Děkuji za pozornost!

Contenu connexe

En vedette

How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
ThinkNow
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
Kurio // The Social Media Age(ncy)
 

En vedette (20)

2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot
 
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTEverything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPT
 
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsProduct Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
 
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
 
Skeleton Culture Code
Skeleton Culture CodeSkeleton Culture Code
Skeleton Culture Code
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
 

Java 2D a kreslení

  • 1. 8. Java 2D a kreslení Ondřej Brejla
  • 2. Obsah  Grafický kontext  Volba barvy  Volba písma  Fontové metriky  Kreslení primitivních objektů  Kreslení obrázků  Rozhraní – Shape, Paint, Stroke, Composite  Transformace  Kreslení polygonů a obecných křivek
  • 3. Co je to ”grafický kontext”?
  • 4. Co je to ”grafický kontext”?
  • 5. Co je to ”grafický kontext”? Krysa je v grafickém kontextu dělící čáry.
  • 6. Grafický kontext  Co to znamená ”grafický kontext”?  Je to datová struktura  ”Abstraktní kreslítko” - jak a kam VS. co  Je to objekt třídy Graphics (resp. Graphics2D)  Definuje metody pro kreslení a výstup textu  Pro kreslení do komponent většinou překrýváme metodu: public void paintComponent(Graphics g)
  • 9. Jak mohu zvolit barvu? Namočíme štětec do kalíšku... ...nebo...
  • 10. Jak mohu zvolit barvu? ...nebo... ...použijeme třídu java.awt.Color
  • 11. Jak mohu zvolit barvu? Color.ORANGE Color.GREEN Color.BLUE Color.YELLOW Color.RED Color.WHITE
  • 12. Volba barvy  Před kreslením je barvu třeba nastavit  g.setColor(Color color); // getColor();  Použijeme objekt java.awt.Color  Buď předdefinovanou konstantu (např. Color.RED)  Nebo vlastní instanci new Color(int red, int green, int blue);  red, green, blue - <0; 255>
  • 14. Jaké písmo vybrat? Aš nazg durbatulűk...
  • 15. Jaké písmo vybrat? Tak jednoduché to nebude...
  • 16. Volba písma  Před použitím je potřeba písmo nastavit g.setFont(Font font); // g.getFont();  Písmo je reprezentováno objektem třídy java.awt.Font  Konstruktor má 3 parametry – name, style, size  name – logické (Serif, Monospaced, SansSerif, Dialog a DialogInput), nebo ”fyzické”  style – Font.PLAIN | BOLD | ITALIC  size – velikost v bodech – 1 bod = 1/72”  Objekt písma nelze později upravovat
  • 19. Jaké jsou fontové metriky? Je jich spousty...vypadá to zmateně...
  • 20. Jaké jsou fontové metriky? ...nás, naštěstí, zajímá pouze jedna...
  • 21. Jaké jsou fontové metriky? ...a to tato jednoduchá...uff.
  • 22. Fontové metriky  Fontové metriky získáme z objektu třídy java.awt.FontMetrics  public int getAscent() - výška znaku nad účařím v pixelech  public int getDescent() - výška znaku pod účařím v pixelech  public int getLeading() - velikost mezery mezi řádky v pixelech  public int getHeight() - velikost písma v pixelech
  • 23. Fontové metriky  A objekt FontMetrics získáme z grafického kontextu  g.getFontMetrics() - metrika aktuálního fontu  g.getFontMetrics(Font font) – metrika zadaného fontu
  • 26. Jak kreslit primitivní objekty? Třeba jako Picasso (Guernica)... ...nebo...
  • 27. Jak kreslit primitivní objekty? ...nebo... ...použijeme metody třídy java.awt.Graphics
  • 28. Kreslení primitivních objektů  g.drawLine(int x1, int y1, int x2, int y2) – vykreslí čáru mezi body  g.drawRect(int x, int y, int width, int  height) – vykreslí obrys obdélníka (od souřadnic levého horního rohu)  g.fillRect(int x, int y, int width, int  height) – vyplní obdélník (-||-)  g.drawRoundRect(int x, int y, int width,  int height, int arcWidth, int arcHeight) - vykreslí obrys obdélníka se zaoblenými rohy (-||-)  g.fillRoundRect(int x, int y, int width,  int height, int arcWidth, int arcHeight) – vyplní obdélník se zaoblenými rohy (-||-)
  • 29. Kreslení primitivních objektů  g.draw3DRect(int x, int y, int width, int  height, boolean b) – vykreslí obrys 3D obdélníka, b  == true => vystouplý, b == false => zapuštěný ( -||- )  g.fill3DRect(int x, int y, int width, int  height, boolean b) – vyplní 3D obdélník (parametry stejné jako u draw)  g.drawOval(int x, int y, int width, int  height) – vykreslí obrys elipsy, parametry popisují obalový obdélník (elipsa se všech stran dotýká)  g.fillOval(int x, int y, int width, int  height) – vyplní elipsu (parametry stejné jako u draw)
  • 30. Kreslení primitivních objektů  Oblouk je určen počátečním úhlem a velikostí vnitřního úhlu ve stupních  počáteční úhel je na ”3 hodinách”  Proti směru hodinových ručiček je úhel kladný  g.drawArc(int x, int y, int width, int  height, int startAngle, int arcAngle) – vykreslí obrys oblouku relativně k zadané elipse  g.fillArc(int x, int y, int width, int  height, int startAngle, int arcAngle) – vyplní oblouk relativně k zadané elipse  g.drawString(String s, int x, int y) – vykreslí řetězec (souřadnice účaří nejlevějšího znaku)
  • 33. Jak kreslit obrázky? Ručně kreslit radši nebudeme...
  • 34. Jak kreslit obrázky? ...radši obrázek načteme a necháme vykreslit
  • 35. Kreslení obrázků  Rozhraní Icon  Obrázek pevné velikosti používaný pro dekorace  Nelze provádět úpravy obrázku  Lze vykreslit na komponentu metodou g.paintIcon()  Abstraktní třída Image reprezentuje obrázek  VolatileImage – data nejsou přímo dostupná z Javy  BufferedImage – obsahuje pole pixelů dostupných z Javy, lze do něj kreslit
  • 36. Kreslení obrázků  ImageIcon  Ikona na základě obrázku  Lze použít Image tam, kde je vyžadováno Icon  Konstruktor bere název souboru – URL (gif, png, jpg)
  • 37. Kreslení obrázků  Načtení obrázku  Image je abstraktní, takže musíme jinak  Pomocí třídy Toolkit  Toolkit.getDefaultToolkit().createImage(file);  Kreslení obrázků  g.drawImage() - image, levý horní roh a velikost  Kreslení obrázku je asynchronní  Pokud nejsou k dispozici kompletní data, informuje komponentu přes rozhranní ImageObserver, jakmile se další data objeví  Metoda umí vykreslit i výřez
  • 40. Graphics vs. Graphics2D? Stáří vs. Mládí...
  • 41. Graphics vs. Graphics2D?  Třída Graphics2D  Kvůli zpětné kompatibilitě potomkem třídy Graphics  Kvůli zpětné kompatibilitě se také stále předává grafický kontext Graphics a na Graphics2D je třeba přetypovat  Přidává nové vlastnosti
  • 42. Rozhraní - Shape  Reprezentuje nějaký tvar  Rectangle2D, Ellipse2D, Arc2D  Line2D, CubicCurve2D, QuadCurve2D  GeneralPath  Vykreslení se děje pomocí metod g2d.draw(Shape s) a g2d.fill(Shape s) třídy Graphics2D
  • 43. Rozhraní - Paint  Určuje jakou barvou se bude jaký pixel kreslit  Nastavuje se pomocí metody g2d.setPaint(Paint p); // g2d.getPaint()  Color  GradientPaint, LinearGradientPaint,  RadialGradientPaint  SystemColor – barva pro určitou část GUI  TexturePaint
  • 44. Rozhraní - Stroke  Určuje jakým způsobem se budou kreslit čáry a obrysy  Nastavuje se pomocí metody g2d.setStroke(Stroke s);// g2d.getStroke()  BasicStroke – definuje tloušťku čáry, styl zakončení a zalomení čar a přerušení čar
  • 45. Rozhraní - Composite  Určuje způsob zkombinování původní a nové barvy pixelu při kreslení  Nastavuje se pomocí metody g2d.setComposite(Composite s);  // g2d.getComposite()  AlphaComposite – původní barva se zkombinuje s kreslenou a umožňuje průhlednost
  • 48. Jak transformovat? Kreslených transformerů se ptát nebudeme...
  • 49. Jak transformovat? ...jednoduše použijeme AffineTransform
  • 50. Transformace  Je možné provést afinní transformaci systému souřadnic (transformace je reprezentována maticí)  Třída AffineTransform obaluje matici  Transformaci provedeme postupně pomocí metod translate (posun počátku), rotate (rotace) a scale (změna měřítka) objektu třídy AffineTransform  Nastavuje se pomocí metody g2d.setTransform(AffineTransform t);  // g2d.getTransform()
  • 53. Polygony? Kdepak závodní polygon... ...kreslit budeme!
  • 54. Polygony a obecné křivky  Mnohoúhelníky  Uzavřené tvary složené z úseku rovných čar  Lze je vykreslit pomocí metod g.drawPolygon(int[] xPoints, int[] yPoints,  int point) a g.fillPolygon(int[] xPoints, int[] yPoints,  int point) třídy Graphics  Polygon může být reprezentován třídou Polygon, která obsahuje metodu addPoint() pro přidání bodu
  • 55. Polygony a obecné křivky  Lomené čáry  Posloupnosti bodů spojené rovnými čarami  Uzavřené lomené čáry jsou polygony  Lze je vykreslit pomocí metody  g.drawPolyline(int[] xPoints, int[] yPoints,  int point)
  • 56. A to je pro dnešek vše. Otázky? Děkuji za pozornost!