/home/bakera/wiki

Benutzer-Werkzeuge

Webseiten-Werkzeuge

Zuletzt angesehen:
schule:bilder_in_programmen

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Nächste Überarbeitung		Vorhergehende Überarbeitung
schule:bilder_in_programmen [2015-12-05 14:06] – angelegt marco.bakeraschule:bilder_in_programmen [2017-04-19 06:39] (aktuell) – Externe Bearbeitung 127.0.0.1
Zeile 1: Zeile 1:
 +====== Bilder in Programmen ======
  
 +{{:schule:prog:scheresteinpapiergui.png?nolink|}}
 +{{:schule:prog:scheresteinpapiergui2.png?nolink|}}
 +
 +Den Einsatz von Bildern in C#-Programmen möchte ich an einem kleinen Projekt erläutern. Das oben gezeigte Programm stellt das Spiel //Schere, Stein, Papier// dar. Bei einem Klick auf den Button wird zufällig eines der Bilder für Schere, Stein oder Papier angezeigt. Bilder werden in C#-Anwendungen in einer ''PictureBox'' dargestellt. Zunächst wird das Bildobjekt mit ''Image.FromFile()'' von der Festplatte geladen. Anschließend kann es gesetzt werden, indem das ''Image''-Attribut auf das geladene Bildobjekt gesetzt wird. 
 +
 +<code csharp>
 +        private void btnSpielen_Click(object sender, EventArgs e)
 +        {
 +            Random rndZufallszahlengenerator = new Random();
 +            int iZufallszahl = rndZufallszahlengenerator.Next(3);
 +
 +            if (iZufallszahl == 0)
 +            {
 +                // Das Bild wird geladen...
 +                Image imgSchere = Image.FromFile("Bilder/Schere.png");
 +                // und angezeigt.
 +                pbBild.Image = imgSchere;
 +            }
 +            else if (iZufallszahl == 1)
 +            {
 +                // Die beiden Schritte von oben können auch in 
 +                // einem Schritt zusammengefasst werden.
 +                pbBild.Image = Image.FromFile("Bilder/Stein.png");
 +            }
 +            else if (iZufallszahl == 2)
 +            {
 +                pbBild.Image = Image.FromFile("Bilder/Papier.png");
 +            }
 +        }
 +</code>
 +
 +===== Eigene Grafiken erstellen =====
 +{{ :schule:prog:paintdemoscreenshot.png?nolink|}}
 +
 +Neben der bloßen Anzeige von Bildern, kann die ''PictureBox'' auch dazu genutzt werden, um selbst darin zu malen. Wir nutzen dazu eine einfache Anwendung bestehend aus einer ''PictureBox'' und einem ''Button''.
 +
 +Bei einem Klick auf den Button werden ein rotes Rechteck und eine blaue Linie jeweils neu gezeichnet. Dabei wandern die beiden Objekte bei jedem Klick ein Stückchen weiter.
 +
 +**Die Akteure:**
 +
 +  * ''PictureBox'': Dies ist die Zeichenfläche, in der wir zeichnen.
 +  * ''PaintEvent'': Ein Event, das ausgelöst wird, wenn die ''PictureBox'' glaubt, neu gezeichnet werden zu müssen. Hier müssen wir aktiv werden und malen.
 +  * ''Graphics''-Objekt: Damit zeichnen wir, sobald das Event ausgelöst wurde.
 +  * der ''Button'': Wenn auf ihn geklickt wird, wird die ''Invalidate''-Methode der ''PictureBox'' aufgerufen. Damit wird indirekt das ''PaintEvent'' ausgelöst.
 +
 +<code csharp>
 +using System;
 +using System.Collections.Generic;
 +using System.Drawing;
 +using System.Windows.Forms;
 +
 +namespace PaintDemo
 +{
 +    public partial class MainForm : Form
 +    {
 +        public MainForm()
 + {
 +     InitializeComponent();
 + }
 +
 +        // Die linke obere Ecke der Figur. 
 + int iX = 0;
 + int iY = 0;
 +
 + void PictureBox1Paint(object sender, PaintEventArgs e)
 + {
 +            // Mit Hilfe des Graphics-Objektes wird gemalt
 +     Graphics g = e.Graphics;
 +
 +            // Die Linie und das Rechteckt werden gezeichnet.
 +            //
 +            //         Stiftfarbe (X1|Y1) (X2  |  Y2)
 +     g.DrawLine(Pens.Blue, iX, iY, iX+50, iY+80);
 +            //              Stiftfarbe (X|Y)  Breite Höhe
 +     g.DrawRectangle(Pens.Red, iX, iY, 50,    80);
 + }
 +
 + void Button1Click(object sender, EventArgs e)
 + {
 +     // Erzwingt ein Repaint der PictureBox. Damit wird das 
 +     // Paint-Event ausgelöst
 +     pictureBox1.Invalidate();
 +
 +            // Die Startkoordinaten werden verschoben
 +     iX += 1;
 +     iY += 1;
 + }
 +    }
 +}
 +</code>