25.1.11 Projekt 1 – Bild und Text

In diesem Projekt wird Ihnen gezeigt, wie Sie mit Methoden der Klasse Cairo ein Bild mit einem Text versehen können:

B1

Abbildung 25.1.11.1: Original

Der Quelltext für das Projekt 1 ist überschaubar kurz:

[1] ' Gambas class file
[2] 
[3] Public hImage As Image
[4] 
[5] Public Sub Form_Open()
[6] ' Bild erzeugen  
[7]   hImage = Image.Load(Application.Path &/ "images/augentrost.jpg")
[8]   
[9] ' Programmfenster adäquat zur Bildgröße skalieren
[10]   FMain.W = hImage.W + 2 * Desktop.Scale
[11]   FMain.H = hImage.H + 2 * Desktop.Scale
[12]   FMain.Center
[13]   FMain.Resizable = False
[14]   
[15]   DrawToImage()
[16] 
[17] End ' Form_Open()
[18] 
[19] Public Sub DrawToImage()
[20]   Dim sText1, sText2 As String
[21]     
[22]   Cairo.Begin(hImage)
[23]   ' Cairo.Rotate(Pi / 2) ' Alternative: Text um einen bestimmten Winkel drehen
[24]   ' Texte auf das Bild-Objekt zeichnen  
[25]     Cairo.MoveTo(10, 260)
[26]     Cairo.Font.Name = "Sans Serif" ' Standard-Font in CAIRO
[27]     Cairo.Font.Size = 18.5
[28]     Cairo.Font.Bold = True
[29]     Cairo.Source = Cairo.ColorPattern(Color.Yellow)
[30]     sText1 = "FLORA DER ALPEN"
[31]     Cairo.DrawText(sText1)
[32]   ' -----------------------------------------------------------------  
[33]     sText2 = "Augentrost (Euphrasia minima) - Sonthofen - Juli 2012"
[34]     Cairo.MoveTo(10, 260 + Cairo.TextExtents(sText2).Height + 4)
[35]     Cairo.Font.Size = 13.3
[36]     Cairo.Font.Bold = False
[37]     Cairo.Font.Slant = Cairo.FontSlantNormal
[38]     Cairo.Source = Cairo.ColorPattern(Color.White)
[39]     Cairo.DrawText(sText2)
[40]   Cairo.End()
[41]   
[42] End ' DrawToImage()
[43] 
[44] Public Sub dwgArea_Draw()
[45] ' Bild-Anzeige: Bild in die DrawingArea mit einer Paint-Methode einfügen 
[46]   Paint.DrawImage(hImage, 0, 0, hImage.W, hImage.H)
[47] ' Bild abspeichern  
[48]   hImage.Save(Application.Path &/ "images/image.png")
[49] End ' dwgArea_Draw()

Kommentar:

Als Erweiterungen können Sie alternativ auch einen Öffnen- und Speichern-Dialog für das Bild einfügen sowie die Texte über geeignete Komponenten einlesen.

Das Ergebnis kann sich sehen lassen, da hier für die Schriftfarben die dominierenden Farben aus dem Bild verwendet wurden:

B2

Abbildung 25.1.11.2: Bild mit Text

Download