Benutzer-Werkzeuge

Webseiten-Werkzeuge


k25:k25.1.12:start

25.1.12 Projekt 2 – Bézier-Kurven

Für dieses Projekt gelten die gleichen Überlegungen und Kommentare wie für das Projekt im → Kapitel 23.3.5.3 (Paint-Projekt). Daher werden für die drei Beispiele nur der Quelltext und die Ergebnisse vorgestellt.

B1

25.1.12.1 Beispiel 1

Im ersten Beispiel wird eine Bézier-Kurve dritten Grades gezeichnet:

B2

Abbildung 25.1.12.1.1: Modellierte Bézier-Kurve 3. Grades (4 Punkte)

Die Punkte A und D bestimmen den Anfangs- und Endpunkt der Kurve und über die Lage der Punkte B und D legen Sie das Krümmungsverhalten fest. Hier ist der vollständige Quelltext, um das Bild in der → Abbildung 25.1.12.1.1 zu zeichnen:

[1] Public Sub CairoScriptBezier4Points()
[2]   Dim vP As Vector
[3]   
[4]   GenerateNewImage()
[5]   SetImageBorder()  
[6]   Cairo.Begin(hImage) 
[7]     Cairo.Translate(xTranslate, yTranslate)
[8]     Cairo.Scale(xScale, yScale) ' +y ▲  
[9]     DrawCoordinateSystem()
[10]      
[11]   ' BLATTFEDER
[12]   ' Vektor mit 8 Elementen, reelle Zahlen (keine komplexen Zahlen)
[13]     vP = New Vector(8, False) 
[14]   ' A(30|30), B(150|250), C(400|60), D(510|210)  
[15]     vP = [30, 30, 150, 250, 400, 60, 510, 210]
[16] 
[17]   ' Verbindungslinien zeichnen A - B - C - D
[18]     Cairo.AntiAlias = 0
[19]     Cairo.Source = Cairo.ColorPattern(Color.Blue)
[20]     Cairo.LineWidth = 0.75
[21]     Cairo.Dash = [1, 4] ' Punktierte Linie ein
[22]     Cairo.MoveTo(vP[0], vP[1])
[23]     Cairo.LineTo(vP[2], vP[3])
[24]     Cairo.MoveTo(vP[2], vP[3])
[25]     Cairo.LineTo(vP[4], vP[5])
[26]     Cairo.MoveTo(vP[4], vP[5])
[27]     Cairo.LineTo(vP[6], vP[7])
[28]     Cairo.Stroke
[29]     Cairo.Dash = [] ' Punktierte Linie aus
[30]     
[31]   ' Bézier-Kurve
[32]     Cairo.Source = Cairo.ColorPattern(Color.Red)
[33]     Cairo.LineWidth = 4
[34]     Cairo.LineCap = Cairo.LineCapRound
[35]     Cairo.MoveTo(vP[0], vP[1])    
[36]     Cairo.CurveTo(vP[2], vP[3], vP[4], vP[5], vP[6], vP[7])
[37]     Cairo.Stroke    
[38]     Cairo.AntiAlias = 1  
[39]     
[40]   ' Punkte A,B,C und D einzeichnen
[41]     Cairo.Source = Cairo.ColorPattern(Color.Blue)
[42]     Cairo.MoveTo(vP[0], vP[1])
[43]     Cairo.Arc(vP[0], vP[1], 3)
[44]     Cairo.MoveTo(vP[2], vP[3])
[45]     Cairo.Arc(vP[2], vP[3], 3)
[46]     Cairo.MoveTo(vP[4], vP[5])
[47]     Cairo.Arc(vP[4], vP[5], 3)
[48]     Cairo.MoveTo(vP[6], vP[7])
[49]     Cairo.Arc(vP[6], vP[7], 3)
[50]     Cairo.Fill
[51]     
[52]   ' TEXTE zeichnen
[53]     Cairo.NewPath
[54]     Cairo.Scale(1, -1)
[55]     Cairo.Font.Name = "Arial"
[56]     Cairo.Font.Size = 14
[57]     Cairo.Source = Cairo.ColorPattern(Color.DarkBlue)
[58]     
[59]     Cairo.MoveTo(25, -10)
[60]     Cairo.DrawText("A")
[61]     Cairo.MoveTo(145, -265)
[62]     Cairo.DrawText("B")     
[63]     Cairo.MoveTo(398, -35)
[64]     Cairo.DrawText("C")
[65]     Cairo.MoveTo(505, -225)
[66]     Cairo.DrawText("D")
[67]     
[68]     Cairo.Scale(1, -1)    
[69]   Cairo.End
[70]   
[71] End ' CairoScriptBezier4Points()

Nur zur Verdeutlichung der Lage aller Punkte in Bezug auf die Bézier-Kurve werden in den Anweisungen ab Zeile 41 bestimmte Verbindungslinien und die Stützpunkte B und C eingezeichnet. Die Punkte A, B, C und D werden dabei als Kreis mit sehr kleinem Radius gezeichnet. Abschließend werden die vier Punkte noch bezeichnet – jedoch ohne die Angabe von Koordinaten.

25.1.12.2 Beispiel 2

In diesem Beispiel wird eine Zahl 2 (Ziffer-Symbol) aus drei Bézier-Kurven gezeichnet – aus zwei Bézier-Kurven 3. Grades und einer Strecke (Bézier-Kurven ersten Grades).

B3

Abbildung 25.1.12.2.1: Die Zahl 2 aus drei Bézier-Kurven

Der Quelltext für die Prozedur CairoScriptBezierNumber2() wird vollständig angegeben:

[1] Public Sub CairoScriptBezierNumber2()
[2]   Dim PS, P1, P2, PE As New PointF
[3]   Dim vP, aQ As Vector
[4]   Dim fYOffset As Float
[5]   
[6]   GenerateNewImage()
[7]   SetImageBorder()  
[8]   Cairo.Begin(hImage) 
[9]     Cairo.Translate(xTranslate, yTranslate)
[10]     Cairo.Scale(xScale, yScale) ' +y ▲  
[11]     DrawCoordinateSystem()
[12]   
[13]   ' Ziffer 2 zeichnen
[14]     Cairo.Scale(2, 2) ' +Zoom mit dem Faktor 2
[15]     Cairo.LineWidth = 22
[16]     fYOffset = Cairo.LineWidth / 2
[17]   ' -----------------------------------------------------
[18]   ' Oberer Bogen - rot
[19]     PS.x = 60
[20]     PS.y = 90 + fYOffset
[21]     P1.x = 60
[22]     P1.y = 130 + fYOffset
[23]     P2.x = 135
[24]     P2.y = 130 + fYOffset
[25]     PE.x = 135
[26]     PE.y = 90 + fYOffset
[27]     Cairo.LineCap = Cairo.LineCapRound
[28]     Cairo.Source = Cairo.ColorPattern(Color.Red)
[29]     Cairo.MoveTo(PS.x, PS.y)
[30]     Cairo.CurveTo(P1.x, P1.y, P2.x, P2.y, PE.x, PE.y)
[31]     Cairo.Stroke
[32]   ' -----------------------------------------------------    
[33]   ' Mittel-Kurve - blau
[34]     vP = New Vector
[35]     vP = [60, 0, 60, 45, 135, 45, 135, 90]
[36]     aQ = New Vector
[37]     aQ = [0, 1, 0, 1, 0, 1, 0, 1]
[38] 
[39]     vP = vP + fYOffset * aQ
[40]     Cairo.Source = Cairo.ColorPattern(Color.Blue)
[41]     Cairo.MoveTo(vP[0], vP[1])    
[42]     Cairo.CurveTo(vP[2], vP[3], vP[4], vP[5], vP[6], vP[7])
[43]     Cairo.Stroke
[44]   ' -----------------------------------------------------   
[45]   ' Untere Kurve - grün - Bezier-Kurve 1. Ordnung (Gerade)
[46]     Cairo.MoveTo(60, 0 + fYOffset)
[47]     Cairo.Source = Cairo.ColorPattern(Color.Green)
[48]     Cairo.LineTo(135, 0 + fYOffset)
[49]     Cairo.Stroke 
[50]   Cairo.End
[51]   
[52] End ' CairoScriptBezierNumber2()

25.1.12.3 Beispiel 3

Im diesem Beispiel wird eine Grafik gezeichnet, die aus mehreren Bézier-Kurven 3. Grades und anderen Formen (Strecken, Kreise) besteht. Um die einzelnen Kurvenbögen zu unterscheiden, kommen unterschiedliche Farben zum Einsatz.

B4

Abbildung 25.1.12.3.1: Komplexe Grafik mit Bézier-Kurven

Der Quelltext für das dritte Beispiel wird hier vollständig angegeben:

[1] Public Sub CairoScriptBezierSplines()
[2]   Dim vP As Vector
[3]   
[4]   GenerateNewImage()
[5]   SetImageBorder()  
[6]   Cairo.Begin(hImage) 
[7]     Cairo.Translate(xTranslate, yTranslate)
[8]     Cairo.Scale(xScale, yScale) ' +y ▲  
[9]     DrawCoordinateSystem()
[10]     
[11]   ' AUTO
[12]   ' -----------------------------------------------------         
[13]   ' Stoßstange vorn   
[14]     Cairo.Scale(1.3, 1.3) ' +Zoom mit dem Faktor 1.3
[15]     vP = New Vector
[16]     vP = [1.25, 0.75, 1, 0.75, 1, 0.75, 1, 1]
[17]     vP = 40 * vP
[18]     Cairo.Source = Cairo.ColorPattern(Color.Red)
[19]     Cairo.MoveTo(vP[0], vP[1])    
[20]     Cairo.CurveTo(vP[2], vP[3], vP[4], vP[5], vP[6], vP[7])
[21]     Cairo.Stroke
[22]   ' -----------------------------------------------------    
[23]   ' Kühlerhaube 
[24]     vP = New Vector
[25]     vP = [1, 1, 1, 2, 2.5, 2.2, 3.8, 2.2]
[26]     vP = 40 * vP
[27]     Cairo.Source = Cairo.ColorPattern(Color.Green)
[28]     Cairo.MoveTo(vP[0], vP[1])    
[29]     Cairo.CurveTo(vP[2], vP[3], vP[4], vP[5], vP[6], vP[7])
[30]     Cairo.Stroke
[31]   ' -----------------------------------------------------    
[32]   ' Frontscheibe und Dach 
[33]     vP = New Vector
[34]     vP = [3.8, 2.2, 4, 3.8, 5.8, 3.2, 7.7, 2.6]
[35]     vP = 40 * vP
[36]     Cairo.Source = Cairo.ColorPattern(Color.Red)
[37]     Cairo.MoveTo(vP[0], vP[1])    
[38]     Cairo.CurveTo(vP[2], vP[3], vP[4], vP[5], vP[6], vP[7])
[39]     Cairo.Stroke
[40]   ' -----------------------------------------------------    
[41]   ' Kofferraum-Abdeckung 
[42]     vP = New Vector
[43]     vP = [7.7, 2.6, 8.5, 2.3, 8.6, 1.5, 10, 1]
[44]     vP = 40 * vP
[45]     Cairo.Source = Cairo.ColorPattern(Color.Blue)
[46]     Cairo.MoveTo(vP[0], vP[1])    
[47]     Cairo.CurveTo(vP[2], vP[3], vP[4], vP[5], vP[6], vP[7])
[48]     Cairo.Stroke
[49]   ' -----------------------------------------------------
[50]   ' Stoßstange hinten    
[51]     vP = New Vector
[52]     vP = [10, 1, 10.5, 0.75, 10.5, 0.75, 10, 0.75]
[53]     vP = 40 * vP
[54]     Cairo.Source = Cairo.ColorPattern(Color.Red)
[55]     Cairo.MoveTo(vP[0], vP[1])    
[56]     Cairo.CurveTo(vP[2], vP[3], vP[4], vP[5], vP[6], vP[7])
[57]     Cairo.Stroke
[58]   ' -----------------------------------------------------    
[59]   ' Bodenblech
[60]     Cairo.AntiAlias = 1
[61]       Cairo.MoveTo(400, 30)
[62]       Cairo.LineWidth = 1
[63]       Cairo.Source = Cairo.ColorPattern(Color.DarkGray)
[64]       Cairo.LineTo(50, 30)      
[65]       Cairo.Stroke
[66]     Cairo.AntiAlias = 0
[67]   ' Rad vorn
[68]     Cairo.Source = Cairo.ColorPattern(Color.DarkGreen)    
[69]     Cairo.Arc(100, 30, 30)
[70]     Cairo.Fill
[71]     Cairo.Source = Cairo.ColorPattern(Color.Gray)
[72]     Cairo.Arc(100, 30, 17)
[73]     Cairo.Fill
[74]   ' Rad hinten
[75]     Cairo.Source = Cairo.ColorPattern(Color.DarkGreen)
[76]     Cairo.Arc(300, 30, 30)
[77]     Cairo.Fill
[78]     Cairo.Source = Cairo.ColorPattern(Color.Gray)
[79]     Cairo.Arc(300, 30, 17)    
[80]     Cairo.Fill
[81]   
[82] ' TEXT
[83]     Cairo.NewPath
[84]     Cairo.Scale(1 / 1.3, -1 / 1.3) ' ACHTUNG: y-Achse jetzt mit *positiven* Werten nach unten!
[85]     Cairo.MoveTo(10, -220)
[86]     Cairo.AntiAlias = 1
[87]       Cairo.Source = Cairo.ColorPattern(Color.Gray)
[88]       Cairo.LineTo(540, -220)
[89]       Cairo.Stroke
[90]     Cairo.AntiAlias = 0
[91]     Cairo.Font.Name = "Monospace"
[92]     Cairo.Font.Size = 30
[93]     Cairo.MoveTo(50, -230)
[94]     Cairo.DrawText("CAIRO-DESIGN")
[95]   Cairo.End
[96]   
[97] End ' CairoScriptBezierSplines()

Das Projekt-Archiv finden Sie im Download-Bereich.

Download

Wir verwenden Cookies, um unser Internetangebot optimal zu gestalten. Durch weitere Nutzung dieser Webseite stimmen Sie der Verwendung von Cookies zu. Informationen zu Cookies erhalten Sie in unserer Datenschutzerklärung
k25/k25.1.12/start.txt · Zuletzt geändert: 20.06.2016 (Externe Bearbeitung)

Seiten-Werkzeuge