Grafiikkaa Javalla Ville Sundberg

Esitys aiheesta: "Grafiikkaa Javalla Ville Sundberg"— Esityksen transkriptio:

1 Grafiikkaa Javalla Ville Sundberg 11.12.2008

2 What happen Piirretään Graphics2D:lla Kokeillaan maalipurkkeja
Katsellaan kuvia Tehdään animaatio

3 Kehykset import javax.swing.JFrame; public class Piirto {
public static void main(String[] args) { JFrame frame = new JFrame("Piirto"); frame.add(new Piirtopaneeli()); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.pack(); frame.setLocationRelativeTo(null); frame.setVisible(true); }

4 Piirtopaneeli 0.1 public class Piirtopaneeli extends JPanel {
public Piirtopaneeli() { this.setPreferredSize(new Dimension(800, 520)); } protected void paintComponent(Graphics g) {

5 Kaiken ydin protected void paintComponent(Graphics g) { }
Tämänniminen metodi määrää komponentin ulkoasun. Voimme piirtää mitä tahansa, jos ylikirjoitamme sen. protected void paintComponent(Graphics g) { } Tämä on grafiikkakonteksti – eli olio, jonka avulla piirtäminen onnistuu. Piirtojärjestelmä luo sen meille aivan automaattisesti.

6 Piirtopaneeli 0.5 public class Piirtopaneeli extends JPanel {
public Piirtopaneeli() { this.setPreferredSize(new Dimension(400, 300)); } protected void paintComponent(Graphics g) { g.setColor(Color.green); g.fillRect(100, 100, 200, 170); g.setColor(Color.red); g.fillOval(500, 250, 200, 200); // ( x, y, leveys, korkeus)

7 Demo 1

8 Graphics2D Graphics2D g2d = (Graphics2D) g;
Graphics on todellisuudessa vanhentunutta tekniikkaa. Graphics2D g2d = (Graphics2D) g; Nykyisin Graphics-muuttujassa piilee Graphics2D-olio, jonka saamme käyttöön tyyppimuunnoksen avulla. Graphics2D:n API on yhtenäisempi ja sillä voi piirtää monipuolisemmin. (Kaikki vanhatkin konstit ovat käytössä.)

9 Piirtopaneeli 1.0 protected void paintComponent(Graphics g) {
Graphics2D g2d = (Graphics2D) g; g2d.setColor(Color.green); g2d.fill(new Rectangle(100, 100, 200, 170)); g2d.setColor(Color.red); g2d.fill(new Ellipse2D.Double(500, 250, 200, 200)); } Metodi fill ottaa parametrinaan geneerisen Shape-olion eli muodon. Sekä Rectangle että Ellipse2D.Double ovat muotoja.

10 Sudit ja maalit g2d.setStroke(new BasicStroke(15f));
Graphics2D-luokka tukee erilaisia piirtomoodeja. g2d.setStroke(new BasicStroke(15f)); setStroke-metodilla asetetaan mm. reunojen ja viivojen piirtotapa. Tässä luodaan uusi, 15 pikselin levyinen Perussuti. g2d.setPaint(new GradientPaint( ... )); setPaint-metodilla taas vaikutetaan alueiden täyttötapaan.

11 Piirtopaneeli 1.1 protected void paintComponent(Graphics g) { ...
g2d.setColor(Color.green); g2d.fill(new Rectangle(100, 100, 200, 170)); g2d.setPaint(new GradientPaint(new Point(0,0), Color.blue, new Point(50,50), Color.black, true)); g2d.fill(new Ellipse2D.Double(500, 250, 200, 200)); }

12 Demo 2

13 Piirtopaneeli 1.2 protected void paintComponent(Graphics g) { ...
g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON); g2d.setColor(Color.magenta); g2d.setStroke(new BasicStroke(10f)); g2d.drawPolyline(new int[] { 100, 400, 400, 700 }, new int[] { 400, 400, 100, 100 }, 4); }

14 Demo 3

15 Kuvien lataaminen Image tausta = ...
Image-luokka määrittelee geneerisen kuvan. Tällainen kuva voidaan antaa Graphics-oliolle piirrettäväksi. Image tausta = ... Java-API on uskomattoman sekava, mitä kuvien lataamiseen tulee. Erilaisia tapoja on jopa kymmeniä. tausta = ImageIO.read(new File(...)); Hyvä yleiskäyttöinen kuvanlatausmekanismi on ImageIO.read(File), joka tukee useita kuvaformaatteja.

16 Kuvien (ja kuviin) piirtäminen
Graphics2D tarjoaa monipuoliset työkalut kuvien piirtämiseen. g2d.drawImage(image, x, y, null); Kuvienpiirtämismetodien viimeistä parametria, ImageObserver-oliota, käytetään harvoin applettien ulkopuolella. BufferedImage kuva = ImageIO.read(...); Graphics2D g2 = kuva.createGraphics(); Kuvaan voi piirtää samalla tavalla kuin JPaneliinkin – sillä erotuksella että kuvaan piirretyt asiat jäävät talteen.

17 Piirtopaneeli 1.3 private Image tausta; public Piirtopaneeli() { try {
this.tausta = ImageIO.read(new File("atmosphere.jpg")); } catch (IOException e) { e.printStackTrace(); System.exit(1); } protected void paintComponent(Graphics g) { g2d.drawImage(tausta, 0, 0, null); ... g2d.fill(new Ellipse2D.Double(...));

18 Demo 4

19 Liikkuva kuva private Ellipse2D ellipsi; private void paivita() {
Olioihin perustuvasta piirtämisestä on se etu, että voimme muuttaa mallia ja pitää piirtokoodin muuttumattomana. private Ellipse2D ellipsi; private void paivita() { this.ellipsi.x -= 2; } g2d.draw(this.ellipsi); Todellisissa ohjelmissa piirrettävien asioiden mallit kannattaa yleensä erottaa omaan luokkaansa.

20 Päivityssykli public void actionPerformed (ActionEvent e) {
paintComponent-metodissa kerroimme Swingille, miten haluamme paneelimme piirrettävän. Emme ottaneet kantaa siihen, kuinka usein piirtäminen tapahtuu. public void actionPerformed (ActionEvent e) { this.paivita(); this.repaint(); } Swing ei automaattisesti päivitä komponenttien ulkoasua sen muuttuessa, vaan siitä on komponentin tekijän huolehdittava itse. Kutsumalla komponentin repaint()-metodia pyydämme Swingiä piirtämään komponentin uudestaan. Swing tottelee kun ehtii.

21 Piirtopaneeli 2.0 public Piirtopaneeli() {
Timer ajastin = new Timer(10, new ActionListener() { public void actionPerformed(ActionEvent e) { Piirtopaneeli.this.paivita(); Piirtopaneeli.this.repaint(); } }); ajastin.start(); private void paivita() { ellipsi.x -= 2; if (ellipsi.x < -ellipsi.width) { ellipsi.x = getWidth();

22 Demo 5

23 Animaatio kuvat = new ArrayList<Image>(); int i = 1;
while (new File("frame-" + i + ".png").exists()) { try { kuvat.add(ImageIO.read(new File("frame-" + i + ".png"))); } catch (IOException e) { e.printStackTrace(); System.exit(1); } i++; Mitä tässä tapahtuu?

24 Piirtopaneeli 3.0 private int indeksi; private void paivita() { ...
if (indeksi < kuvat.size()-1) { indeksi++; } else { indeksi = 0; } protected void paintComponent(Graphics g) { g2d.drawImage(kuvat.get(indeksi), 600, 50, null);

25 Demo 6

26 Kokeilkaa itse! Tämän luennon demot saatavissa kurssin sivuilta.
Jar-paketeissa on myös lähdekoodi. Kokeilkaa itse!