[Windows] 2DDrawing Befehle mit AntiAliasing durch GDI+

[ts-soft]

Das sollte einen Bugreport wert sein.

erledigt: http://www.purebasic.fr/english/viewtop ... 16#p356116

[Danilo]

Danke ts-soft! Bis der Compilerfehler behoben wurde, kann man
halt erstmal nur mit der 32bit-Version von PB weiter programmieren.

[Danilo]

Kleines Zwischenupdate:

gPlot(x,y [,color]) - der Vollständigkeit halber, setzt einen Punkt

gSetPenStyle(penStyle) - Linienstil wählen, 0 = volle linie, 1-4 gestrichelte/gepunktete Linien

gSetPenPattern(penPattern, foregroundColor.l, backgroundColor.l) - auswählen zwischen 53 verschiedenen Füllmustern, 2 Farben selbst setzen

gSetPenImage( ImageID, wrapMode ) - setzen eines Bildes für den Stift, so wie die Pattern, aber eigenes PB-Bild

Man hat also nun 3 verschiedene Modi mit denen man zeichnen kann:
gSetPenColor() für Farben
gSetPenPattern() für Füllmuster
gSetPenImage() für eigene Bilder
Jeder dieser 3 Befehle setzt eine neue Stiftart, mit der dann gezeichnet wird.

Für gSetPenImage() gibt es noch ein paar Spezialbefehle, die verändern
wie das Bild gezeichnet wird:
gSetPenTransform(), gResetPenTransform(), gSetPenOrigin(), gSetPenScale(), gSetPenRotation().

Damit kann man den Stift, und somit das Bild von gSetPenImage(), rotieren, skalieren und verschieben.
Diese Bilder funktionieren wie Patterns, das Bild liegt immer bei 0,0.
Zeichne ich nun eine gBox() an die Koordinate (10,10), sehe ich nicht die
ersten 10 Pixel des Bildes. Abhilfe schafft gSetPenOrigin(10,10), wodurch
das Bild virtuell um 10,10 Punkte verschoben wird, und dann richtig
angezeigt wird.
gSetPenTransform(originX.f, originY.f, rotationAngle.f=0.0, scaleX.f=1.0, scaleY.f=1.0)
kombiniert gleich alle 3 Schritte.
Nachdem man dann gezeichnet hat, kann man das virtuelle Bild im Stift wieder mit
gResetPenTransform() in seinen Ausgangszustand zurückversetzen,
also an die Stelle 0,0 und ohne Rotation/Skalierung.

Alles verstanden?

Ich weiß nicht ob es so zu kompliziert ist. Einfach mal Beispiel anschauen
oder rumprobieren.
So sollte schon einiges machbar sein und es bleibt sehr flexibel.

Einfach ein Bild von Oma in gSetPenImage() reinladen und dann
eine Ellipse zeichnen, und schon hast Du ein schönes Bild von Oma...

[Falko]

Danke @Danilo

Hab's gerade getestet. Super Arbeit,
die du da hineingesteckt hast.

Gruß Falko

[Danilo]

Es gibt wieder neue Befehle, und ich denke auf genau diese haben
die meisten hier gewartet.

Folgende Befehle werden zum anzeigen von Text unterstützt:

Code: Alles auswählen

- gDrawText( x,y,text$ [,color] )                     - wie PB
- gDrawRotatedText( x, y, text$, angle [, color] )    - wie PB
- gTextWidth(Text$)                                   - wie PB

- gTextHeight(Text$="")                               - gibt den Zeilenabstand des gerade benutzen Fonts
                                                        zurück, so daß man genau weiß wo die nächste Zeile
                                                        beginnen kann.

- gSetTextAntialiasMode( mode)                        - setzen des AntialiasModus für Text
                                                        Konstanten dafür beginnen mit #TextAntialiasMode_
                                                        Default ist #TextAntialiasMode_AntiAliasGridFit,
                                                        so daß man normal nichts verstellen muß.
                                                        Für sehr kleine Fonts kann es nötig sein das
                                                        Antialiasing auszuschalten oder einen anderen
                                                        Modus zu setzen.

- gSetFont( FontName$, FontSize [, FontStyle ] )      - wie PB, mit den Konstanten von PB (#PB_Font_Bold etc..)
                                                        Um wieder den DefaultFont zu setzen, einfach
                                                        gSetFont() ohne eigene Angaben aufrufen.

Textausgabe wird auch im Modus gDrawingMode( #PB_2DDrawing_Outlined ) unterstützt.
Natürlich auch mit Patterns oder eigenem 'Pen Image'.


Es wurde schon mehrfach gewünscht das man Boxen, Ellipsen etc. rotieren kann.
Ich wollte nun erst gRotatedBox(), gRotatedEllipse() etc. machen, aber habe mich
dann für eine andere Lösung entschieden.
Man möchte ja auch bestimmen um welche Ecke der Box gedreht wird, oder um
den Mittelpunkt etc.
Um dieses Problem zu umgehen, gibt es nun 2 Befehle, mit denen Ihr
selbst um einen beliebigen Punkt drehen könnt:

Code: Alles auswählen

- gStartRotationAround( x.f, y.f, angle.f )           - startet eine rotation um den punkt x,y
- gStopRotation()                                     - beendet die rotation

Dazu ein Beispiel.
Du möchtest eine Ellipse(x,y, radiusX, radiusY) um 45 Grad drehen:

Code: Alles auswählen

gStartRotationAround( x, y, 45 )        ; verlegt die Bildschirmkoordinate 0,0 nach x,y und dreht um 45 Grad

    gEllipse(0,0, radiusX, radiusY)     ; die Ellipse wird nun mit den Koordinaten 0,0 gezeichnet
                                        ; um an x,y aufzutauchen, da die Bildschirmkoordinaten nun
                                        ; um x,y verschoben sind

gStopRotation()                         ; beendet die Rotation

Um eine Box um die linke obere Ecke zu drehen, geht man genauso vor:

Code: Alles auswählen

gStartRotationAround( x, y, 45 )
    gBox(0,0, width, height)
gStopRotation()

Um die Box aber um ihren Mittelpunkt zu drehen, muß man in den
Minusbereich gehen, da x,y jetzt 0,0 sind:

Code: Alles auswählen

gStartRotationAround( x, y, 45 )
    gBox( -width*0.5, -height*0.5, width, height )
gStopRotation()

Man zeichnet die Box also um die halbe Weite und halbe Höhe in den
negativen Bereich verschoben.

Im Beispiel auf Seite 1 könnt ihr Euch das für gBox() und gEllipse()
ansehen. Auch wurden Beispiele für gDrawText() und gDrawRotatedText()
hinzugefügt.

Ich würde gerne wissen ob diese Methode OK für Euch ist. Ich denke es sollte
so recht einfach zu benutzen sein. Kommentare/Vorschläge erwünscht.

[thminz]

WOOOW KRASS! Woher kannst du so was ? Ich bin sehr sehr sehr begeistert und danke schön für deine

grosse Arbeit und danke für deine zeit die du für uns geopfert hast.

So was hat hier noch niemand geschafft DANKE für die vielen vielen befehle!!

Du bist der BESTE!!

[Falko]

Ich würde gerne wissen ob diese Methode OK für Euch ist. Ich denke es sollte
so recht einfach zu benutzen sein. Kommentare/Vorschläge erwünscht.

Ich würde sagen, das ist mehr als OK

Interessant wäre so was auch für eine logarithmische Spirale oder der goldene Schnitt,
welche man bei Formfräsern anwendet um nach jedem Nachschliff die gleiche Kontur zu
erhalten.

Ich glaube, damit lässt sich in dieser Richtung wie in CAD Zeichnen, wie hier abgebildet:

http://www.gloorag.ch/p09.htm

Ich bin begeistert @Danilo.

Nochmals vielen Dank für die vielen Funktionen, die du
aus der GDI zu PB gecodet hast.

Ich, bzw. wir alle sind gespannt, was du noch mehr auf Lager hast.

Gruß Falko

[Danilo]

Woher kannst du so was ?

Das ist doch nur was man unter dem Begriff "programmieren" versteht.
Man schreibt Befehle in einen Editor, und der Computer führt sie aus.
Nach 20 Jahren programmieren *muß* man sowas können.

Wenn Du Dich anstrengst und auf den Hosenboden setzt, um fleißig zu lernen,
kannst Du das auch irgendwann mal.

Ich würde sagen, das ist mehr als OK

Danke, freut mich wenn es nützlich ist und gefällt.

[Danilo]

Wieder ein Update.

Ich habe 2 Befehle von gestern wieder gestrichen. Sie waren zu unflexibel:

Code: Alles auswählen

- gStartRotationAround( x.f, y.f, angle.f )           - startet eine rotation um den punkt x,y
- gStopRotation()                                     - beendet die rotation

Das ganze habe ich jetzt durch ein generelles Transformationssystem ersetzt:

Code: Alles auswählen

gSetOrigin( x, y )                  - verschiebt den Koordinatenursprung (0,0) nach (x,y)

gRotate( angle )                    - führt eine Rotation          um den aktuellen Koordinatenursprung des Bildschirms durch ( siehe gSetOrigin() )
gScale ( scaleX, scaleY)            - führt eine Skalierung (Zoom) um den aktuellen Koordinatenursprung des Bildschirms durch ( siehe gSetOrigin() )
gShear ( shearX, shearY)            - führt eine Scherung          um den aktuellen Koordinatenursprung des Bildschirms durch ( siehe gSetOrigin() )

gRotateAt( x, y, angle)             - führt eine Rotation          um den Punkt x,y durch
gScaleAt ( x, y, scaleX, scaleY )   - führt eine Skalierung (Zoom) um den Punkt x,y durch
gShearAt ( x, y, shearX, shearY )   - führt eine Scherung          um den Punkt x,y durch

gResetTransform()                   - setzt die aktuellen Transformationen zurück

-----------------------------------------------------------------------------------------------------------------------------------------

gStartTransform()                   - startet eine neue, lokale Transformation

gStopTransform()                    - beendet eine lokale Transformation

Die ersten 8 Befehle (über der Trennlinie) arbeiten erstmal global mit dem ganzen Bildschirm.
So kann man beispielsweise den ganzen Zeichenbereich mit nur einem Befehl drehen:
gRotateAt( BildmitteX, BildmitteY, Winkel ).

Danach kann man dann mit gStartTransform() eine lokale, neue Transformation beginnen.
Dann wirken die 8 Transformationsbefehle nicht mehr auf den ganzen Bildschirm, sondern
nur noch auf die nachfolgenden Zeichenoperationen bis zum gStopTransform().
gStopTransform() kehrt dann wieder zur vorhergehenden Transformation zurück.

gStartTransform() und gStopTransform() sind also quasi Container für lokale Transformationen,
und diese dürfen verschachtelt sein. Also lokale Transformation in einer lokalen Transformation etc..

Hier mal ein sehr kleines Beispiel für die neue Rotation und das Scheren:

Code: Alles auswählen

XIncludeFile "gDrawing.pbi"

Procedure Draw()
    gDrawingMode( #PB_2DDrawing_Outlined )
    ;
    ; gEllipse rotieren
    ;
    For i = 0 To 90 Step 10
        gRotateAt(100,100,i) : gEllipse(100,100,100,30) : gResetTransform()
    Next i
    ;
    ; gEllipse rotieren ohne gResetTransform
    ;
    For i = 0 To 90 Step 10
        gRotateAt(300,100,i) : gEllipse(300,100,100,30) ; ohne gResetTransform() wird der winkel immer wieder hinzuaddiert
    Next i

    gResetTransform() ; Transformationen rücksetzen

    ;
    ; gBox rotieren um linke obere Ecke
    ;
    For i = 0 To 2 
        gRotateAt(100,300,i*20) : gBox(100,300,100,100) : gResetTransform()
    Next i

    ;
    ; gBox rotieren um mittelpunkt
    ;
    For i = 0 To 2
        gRotateAt(350,350,i*20) : gBox(300,300,100,100) : gResetTransform()
    Next i
    ;
    ; gBox rotieren um rechte untere Ecke
    ;
    For i = 0 To 2
        gRotateAt(600,400,i*20) : gBox(500,300,100,100) : gResetTransform()
    Next i

    gShearAt(100,480,0.5, 0 ) : gBox(100,480,100,50) : gResetTransform() ; shear X   um linke obere Ecke
    gShearAt(250,480, 0 ,0.5) : gBox(250,480,100,50) : gResetTransform() ; shear Y   um linke obere Ecke
    gShearAt(400,480,0.5,0.5) : gBox(400,480,100,50) : gResetTransform() ; shear X+Y um linke obere Ecke
    gShearAt(600,505,0.5,0.5) : gBox(550,480,100,50) : gResetTransform() ; shear X+Y um mittelpunkt
EndProcedure

If gInit()
    mainWin = OpenWindow(#PB_Any,0,0,800,600,"gDrawing feature demo",#PB_Window_SystemMenu|#PB_Window_ScreenCentered)
    img = CreateImage(#PB_Any,800,600,24)
    If gStartDrawing( ImageOutput(img) )
        gClear( RGBA($AA,$AA,$AA,$FF) )
        Draw()
        gStopDrawing()
    EndIf
    imgWin  = ImageGadget(#PB_Any,0,0,800,600,ImageID(img))
    Repeat : Until WaitWindowEvent()=#PB_Event_CloseWindow
    gEnd()
EndIf

Sollte besser zu verstehen sein als die Methode gestern. Hoffe ich jedenfalls.

[Danilo]

Da die Include im ersten Beitrag zu groß ist, kann ich das dazugehörige
Beispiel dort nicht mehr hinzufügen.

Das Beispiel wurde aktualisiert und hat nun auf der rechten Seite 4 neue Trackbars
für globale Transformationen, also Zoom/Rotation/Scherung für das ganze Bild.
Im Bild selbst finden dann Transformationen lokal statt, mit Hilfe von gStartTransform() und gStopTransform().

Code: Alles auswählen

EnableExplicit

XIncludeFile "gDrawing.pbi"

Global img
Global mainWin, imgWin, modeWin
Global i.l, j.l, k.l
Global pbLogo, pbBackground, pbAlphaChannel
Global Background
Global penRotation.f=0, penScale.f=1.0
Global penOriginX.f=0, penOriginY.f=0
Global globalRotation.f = 0.0, globalScale.f = 1.0, globalShearX.f, globalShearY.f

Global Dim colors.l(100)

Prototype demoProc()
Dim demoProcedures.i(20)

Procedure initpicture()
    Protected A$
    gSetPenImage(ImageID(pbLogo),#WrapModeTile)
    gBox(0,0,800,800)
    gBox(100,50,600,400,RGBA($20,$20,$20,$EE))
    gSetFont("Courier New",20,#PB_Font_Bold)
    A$ = "Welcome to the world of"
    i  = 400 - gTextWidth(A$)*0.5
    gDrawText(i,60,A$,RGBA($FF,$FF,$00,$FF))
    gDrawingMode(#PB_2DDrawing_Outlined)
    gSetPenSize(2)
    gSetFont("Courier New",100,#PB_Font_Bold|#PB_Font_Italic)
    A$ = "gDrawing!"
    i  = 400 - gTextWidth(A$)*0.5
    gDrawText(i-2,78,A$,RGBA($00,$00,$FF,$FF))
    gDrawText(i+2,82,A$,RGBA($00,$00,$FF,$FF))
    gDrawText(i  ,80,A$,RGBA($FF,$FF,$FF,$FF))

    gSetFont()
    gDrawingMode(#PB_2DDrawing_Default)
    gDrawText(205,305,"Please choose a command on the left side.",$FFFFFFFF)
    gSetPenCaps(#LineCapRound, #LineCapArrowAnchor)
    gSetPen($80000000,5)
    gLineXY(185,310,05,150)
    gSetPenColor($DDFFFF00)
    gLineXY(190,300,10,140)
    gDrawText(205,330,"Then play with the trackbars on the right side.",$FFFFFFFF)
    gSetPenColor($80000000)
    gLineXY(565,340,795,130)
    gSetPenColor($DDFF00FF)
    gLineXY(560,330,790,120)
EndProcedure

Procedure demo_gPlot()
    gSetPenColor(RGBA($00,$00,$00,$FF))
    gDrawText(5,5,"plot points at different sizes",$FF000000)
    j=0
    For i = 1 To 30
        j + i + 5
        gSetPenSize(i)
        gPlot(j,45)
    Next i
    j=0
    gDrawText(5,65,"...with different colors",$FF000000)
    For i = 1 To 30
        j + i + 5
        gSetPen(colors(i),i)
        gPlot(j,105)
    Next i
    j=0
    gDrawText(5,125,"...with patterns",$FF000000)
    For i = 1 To 30
        j + i + 5
        gSetPenSize(i)
        gSetPenPattern(i,$FFFFFFFF,$FF000000)
        gPlot(j,165)
    Next i
    j=0
    gSetPenImage(ImageID(Background))
    gDrawText(5,185,"...with image texture",$FF000000)
    For i = 1 To 30
        j + i + 5
        gSetPenSize(i)
        gPlot(j,225)
    Next i
    RandomSeed(0)
    For i = 0 To 100
        j = Random(800)
        k = Random(250)
        gSetPenSize(1+Random(20))
        gSetPenTransform(penOriginX+j,penOriginY+k+345,penRotation,penScale,penScale)
        gPlot(j,k+345)
        gResetPenTransform()
    Next i
EndProcedure

Procedure demo_gBox()
    ;gStartRotationAround(0,0,globalRotation)

    gSetPenColor(RGBA($00,$00,$00,$FF))
    gDrawText(5,5,"draw boxes at different sizes",$FF000000)
    j=0
    For i = 1 To 30
        j + i + 5
        gBox(j,45-i*0.5,i,i)
    Next i
    j=0
    gDrawText(5,65,"...with different colors",$FF000000)
    For i = 1 To 30
        j + i + 5
        gSetPenColor(colors(i))
        gBox(j,105-i*0.5,i,i)
    Next i
    j=0
    gDrawText(5,125,"...with patterns",$FF000000)
    For i = 1 To 30
        j + i + 5
        gSetPenPattern(i,$FFFFFFFF,$FF000000)
        gBox(j,165-i*0.5,i,i)
    Next i
    j=0
    gSetPenImage(ImageID(Background))
    gDrawText(5,185,"...with image texture",$FF000000)
    For i = 1 To 30
        j + i + 5
        gSetPenOrigin(j,225)
        gBox(j,225-i*0.5,i,i)
        gResetPenTransform()
    Next i
    j=0
    gDrawText(5,245,"...outlined",$FF000000)
    gDrawingMode(#PB_2DDrawing_Outlined)
    gSetPenSize(2)
    For i = 1 To 30
        j + i + 5
        gSetPenColor(colors(i))
        gBox(j,285-i*0.5,i,i)
    Next i

    j=0
    gDrawingMode(#PB_2DDrawing_Default)
    gDrawText(5,305,"...rotated",$FF000000)
    gDrawingMode(#PB_2DDrawing_Outlined)
    gSetPenSize(2)
    gStartTransform()
    For i = 1 To 30
        j + i + 5
        gSetPenColor(colors(i))
        gSetOrigin(j+i*0.5,345)
        gRotate(i*12)
        gBox(-i*0.5,-i*0.5,i,i)
        gResetTransform()
    Next i
    gStopTransform()

    gSetPenColor($FF000000)
    gStartTransform()
    For i = 0 To 2
            gBox(200,420,70,70)
            gRotateAt(200,420,20)
    Next i
    gStopTransform()

    gStartTransform()
    For i = 0 To 2
            gBox(400,420,70,70)
            gRotateAt(435,455,20)
    Next i
    gStopTransform()

    
    gDrawingMode(#PB_2DDrawing_Default)
    ;gDrawingMode(#PB_2DDrawing_Outlined)
    ;gSetPenSize(40)
    gSetPenImage(ImageID(pbLogo),#WrapModeTileFlipXY)
    gSetPenTransform(penOriginX+400,penOriginY+545+(800-565)*0.5,penRotation,penScale,penScale)
    gBox(20,545,760,800-565)
    ;gStopRotation()
EndProcedure

Procedure demo_gEllipse()
    gSetPenColor(RGBA($00,$00,$00,$FF))
    gDrawText(5,5,"draw ellipses at different sizes",$FF000000)
    j=0
    For i = 1 To 30
        j + i + 5
        gEllipse(j,45,i*0.5,i)
    Next i
    j=0
    gDrawText(5,65,"...with different colors",$FF000000)
    For i = 1 To 30
        j + i + 5
        gSetPenColor(colors(i))
        gEllipse(j,105,i*0.5,i)
    Next i
    j=0
    gDrawText(5,125,"...with patterns",$FF000000)
    For i = 1 To 30
        j + i + 5
        gSetPenPattern(i,$FFFFFFFF,$FF000000)
        gEllipse(j,165,i*0.5,i)
    Next i
    j=0
    gSetPenImage(ImageID(Background))
    gDrawText(5,185,"...with image texture",$FF000000)
    For i = 1 To 30
        j + i + 5
        gEllipse(j,225,i*0.5,i)
    Next i
    j=0
    gDrawText(5,245,"...outlined",$FF000000)
    gDrawingMode(#PB_2DDrawing_Outlined)
    For i = 1 To 30
        j + i + 5
        gSetPenColor(colors(i))
        gEllipse(j,285,i*0.5,i)
    Next i

    j=0
    gDrawingMode(#PB_2DDrawing_Default)
    gDrawText(5,305,"...rotated",$FF000000)
    gDrawingMode(#PB_2DDrawing_Outlined)

    gStartTransform()
        For i = 1 To 30
            j + i + 5
            gSetPenColor(colors(i))
            gRotateAt(j,345,i*12)
            gEllipse(j,345,i*0.5,i)
            gResetTransform()
        Next i
    gStopTransform()


    gSetPenImage(ImageID(Background))
    gDrawingMode(#PB_2DDrawing_Default)
    gSetPenTransform(penOriginX+200,penOriginY+470,penRotation,penScale,penScale)
    gEllipse(200,470,100,50)
    gResetPenTransform()
    gDrawingMode(#PB_2DDrawing_Outlined)
    gSetPenSize(10)
    gSetPenTransform(penOriginX+450,penOriginY+470,penRotation,penScale,penScale)
    gEllipse(450,470,75,25)
    gResetPenTransform()
    gSetPen($FF000000,2)

    gStartTransform()
        For i = 1 To 30
            gRotateAt(200,670,i*12)
            gEllipse(200,670,100,50)
            gResetTransform()
        Next i
    gStopTransform()

    gStartTransform()
        For i = 1 To 3
            gRotateAt(450,670,i*20)
            gEllipse(450,670,100,50)
            gResetTransform()
        Next i
    gStopTransform()

    gStartTransform()
        For i = 1 To 3
            gRotateAt(700,670,i*20)
            gEllipse(700,670,100,50)
        Next i
    gStopTransform()
EndProcedure

Procedure demo_gCircle()
    gSetPenColor(RGBA($00,$00,$00,$FF))
    gDrawText(5,5,"draw circles at different sizes",$FF000000)
    j=0
    For i = 1 To 30
        j + i + 5
        gCircle(j,45,i*0.5)
    Next i
    j=0
    gDrawText(5,65,"...with different colors",$FF000000)
    For i = 1 To 30
        j + i + 5
        gSetPenColor(colors(i))
        gCircle(j,105,i*0.5)
    Next i
    j=0
    gDrawText(5,125,"...with patterns",$FF000000)
    For i = 1 To 30
        j + i + 5
        gSetPenPattern(i,$FFFFFFFF,$FF000000)
        gCircle(j,165,i*0.5)
    Next i
    j=0
    gSetPenImage(ImageID(Background))
    gDrawText(5,185,"...with image texture",$FF000000)
    For i = 1 To 30
        j + i + 5
        gCircle(j,225,i*0.5)
    Next i
    j=0
    gDrawText(5,245,"...outlined",$FF000000)
    gDrawingMode(#PB_2DDrawing_Outlined)
    For i = 1 To 30
        j + i + 5
        gSetPenColor(colors(i))
        gCircle(j,285,i*0.5)
    Next i

    gSetPenImage(ImageID(Background))
    gDrawingMode(#PB_2DDrawing_Default)
    gSetPenTransform(penOriginX+200,penOriginY+470,penRotation,penScale,penScale)
    gCircle(200,470,100)
    gResetPenTransform()
    gDrawingMode(#PB_2DDrawing_Outlined)
    gSetPenSize(50)
    gSetPenTransform(penOriginX+450,penOriginY+470,penRotation,penScale,penScale)
    gCircle(450,470,75)
EndProcedure

Procedure demo_gPie()
    gSetPenColor(RGBA($00,$00,$00,$FF))
    gDrawText(5,5,"draw pie's at different sizes",$FF000000)
    j=0
    For i = 1 To 30
        j + i + 5
        gPie(j,45,i*0.5,i*0.5,-90,270)
    Next i
    j=0
    gDrawText(5,65,"...with different colors",$FF000000)
    For i = 1 To 30
        j + i + 5
        gSetPenColor(colors(i))
        gPie(j,105,i*0.5,i*0.5,-90,270)
    Next i
    j=0
    gDrawText(5,125,"...with patterns",$FF000000)
    For i = 1 To 30
        j + i + 5
        gSetPenPattern(i,$FFFFFFFF,$FF000000)
        gPie(j,165,i*0.5,i*0.5,-90,270)
    Next i
    j=0
    gSetPenImage(ImageID(Background))
    gDrawText(5,185,"...with image texture",$FF000000)
    For i = 1 To 30
        j + i + 5
        gPie(j,225,i*0.5,i*0.5,-90,270)
    Next i
    j=0
    gDrawText(5,245,"...outlined",$FF000000)
    gDrawingMode(#PB_2DDrawing_Outlined)
    For i = 1 To 30
        j + i + 5
        gSetPenColor(colors(i))
        gPie(j,285,i*0.5,i*0.5,-90,270)
    Next i

    gSetPenImage(ImageID(Background))
    gDrawingMode(#PB_2DDrawing_Default)
    gSetPenTransform(penOriginX+200,penOriginY+470,penRotation,penScale,penScale)
    gPie(200,470,100,100,-90,270)
    gResetPenTransform()
    gDrawingMode(#PB_2DDrawing_Outlined)
    gSetPenSize(20)
    gSetPenTransform(penOriginX+450,penOriginY+470,penRotation,penScale,penScale)
    gPie(450,470,90,90,-90,270)
EndProcedure

Procedure demo_gArc()
    gSetPenColor(RGBA($00,$00,$00,$FF))
    gDrawText(5,5,"draw arc's at different sizes",$FF000000)
    j=0
    For i = 1 To 30
        j + i + 5
        gArc(j,45,i*0.5,i*0.5,-90,270)
    Next i
    j=0
    gDrawText(5,65,"...with different colors",$FF000000)
    For i = 1 To 30
        j + i + 5
        gSetPenColor(colors(i))
        gArc(j,105,i*0.5,i*0.5,-90,270)
    Next i
    j=0
    gDrawText(5,125,"...with patterns",$FF000000)
    For i = 1 To 30
        j + i + 5
        gSetPenPattern(i,$FFFFFFFF,$FF000000)
        gArc(j,165,i*0.5,i*0.5,-90,270)
    Next i
    j=0
    gSetPenImage(ImageID(Background))
    gDrawText(5,185,"...with image texture",$FF000000)
    For i = 1 To 30
        j + i + 5
        gArc(j,225,i*0.5,i*0.5,-90,270)
    Next i

    gSetPenImage(ImageID(Background))
    gSetPenTransform(penOriginX+200,penOriginY+470,penRotation,penScale,penScale)
    
    For i = 10 To 100 Step 5
    gArc(200,470,i,i,-180,180)
    Next i
    gResetPenTransform()
    
    gSetPenSize(20)
    gSetPenTransform(penOriginX+450,penOriginY+470,penRotation,penScale,penScale)
    gArc(450,470,90,90,-90,270)
    gArc(450,470,70,70,-180,45)
    gArc(450,470,110,110,-135,45)
EndProcedure

Procedure demo_gSetPenPattern()
    Protected patternCount.l = #PenPatternMax
    gDrawText(5,5,"use "+Str(patternCount+1)+" (0-"+Str(patternCount)+") different pen patterns",$FF000000)
    k = 0
    For i = 0 To 7
        For j = 0 To 6
            gSetPenPattern(k,$FFFFFFFF,$FF000000)
            If j&1
                gBox(i*100,40+j*75,90,60)
            ElseIf i&1
                gEllipse(45+i*100,70+j*75,45,30)
            Else
                gPie(45+i*100,70+j*75,45,30,0,315)
            EndIf
            gDrawText(i*100,25+j*75,Str(k),$FF000000)
            If k=#PenPatternMax : Break 2 : EndIf
            k+1
        Next j
    Next i
EndProcedure

Procedure demo_gSetPenStyle()
    gDrawText(5,5,"set different pen line styles",$FF000000)
    gDrawingMode(#PB_2DDrawing_Outlined)
    gSetFont("Arial",53)
    gSetPen($FF000000,2)
    
    Dim myStyle.f(5)
    mystyle(0)=5    ; length of line
    mystyle(1)=2    ; length of space
    mystyle(2)=15   ; length of line
    mystyle(3)=2    ; length of space
    mystyle(4)=25   ; length of line
    mystyle(5)=2    ; length of space

    k = 0
    For i = 0 To 5
        gSetPenStyle(i,@myStyle(),6)
        gLine(10,100+i*80,150,00)
        gBox(180,75+i*80,50,50)
        gCircle(280,100+i*80,25)
        gEllipse(380,100+i*80,50,25)
        gDrawText(450,60+i*80,"Text")
    Next i
EndProcedure

Procedure demo_gDrawText()
    gSetPenColor(RGBA($00,$00,$00,$FF))
    gDrawText(5,5,"draw text at different sizes",$FF000000)
    j=0
    For i = 1 To 30
        j + i + 5
        gSetFont("Arial",i*1.5,#PB_Font_Bold)
        gDrawText(j*1.2,45-i,"A")
    Next i
    j=0 : gSetFont()
    gDrawText(5,65,"...with different colors",$FF000000)
    For i = 1 To 30
        j + i + 5
        gSetPenColor(colors(i))
        gSetFont("Arial",i*1.5,#PB_Font_Bold)
        gDrawText(j*1.2,105-i,"B")
    Next i
    j=0 : gSetFont()
    gDrawText(5,125,"...with patterns",$FF000000)
    For i = 1 To 30
        j + i + 5
        gSetPenPattern(i,$FFFFFFFF,$FF000000)
        gSetFont("Arial",i*1.5,#PB_Font_Bold)
        gDrawText(j*1.2,165-i,"C")
    Next i
    j=0 : gSetFont()
    gSetPenImage(ImageID(Background))
    gDrawText(5,185,"...with image texture",$FF000000)
    For i = 1 To 30
        j + i + 5
        gSetFont("Arial",i*1.5,#PB_Font_Bold)
        gDrawText(j*1.2,225-i,"D")
    Next i
    j=0 : gSetFont()
    gDrawText(5,245,"...outlined",$FF000000)
    gDrawingMode(#PB_2DDrawing_Outlined)
    For i = 1 To 30
        j + i + 5
        gSetPenColor(colors(i))
        gSetFont("Arial",i*1.5,#PB_Font_Bold)
        gDrawText(j*1.2,285-i,"E")
    Next i

    j = 300
    gSetPenImage(ImageID(Background))
    gDrawingMode(#PB_2DDrawing_Default)
    gSetPenTransform(penOriginX+400,penOriginY+470,penRotation,penScale,penScale)
    gSetFont("Arial",40,#PB_Font_Default)   : gDrawText(50,j,"Normal")      : j + gTextHeight()
    gSetFont("Arial",40,#PB_Font_Bold)      : gDrawText(50,j,"Bold")        : j + gTextHeight()
    gSetFont("Arial",40,#PB_Font_Italic)    : gDrawText(50,j,"Italic")      : j + gTextHeight()
    gSetFont("Arial",40,#PB_Font_Underline) : gDrawText(50,j,"Underlined")  : j + gTextHeight()
    gSetFont("Arial",40,#PB_Font_StrikeOut) : gDrawText(50,j,"StrikeOut")   : j + gTextHeight()
    gSetFont("Arial",40,#PB_Font_Bold|#PB_Font_Italic|#PB_Font_Underline|#PB_Font_StrikeOut)
    gDrawText(50,300+gTextHeight()*5,"All Styles")
    gDrawingMode(#PB_2DDrawing_Outlined)
    gSetPenSize(5)
    j=300
    gSetFont("Arial",130,#PB_Font_Default)   : gDrawText(250,j,"Outlined")  : j + gTextHeight()
    gDrawingMode(#PB_2DDrawing_Default)
    gSetFont("Arial",130,#PB_Font_Default)   : gDrawText(250,j,"Outlined",RGBA($FF,$FF,$FF,$FF))
    gDrawingMode(#PB_2DDrawing_Outlined)
    gSetFont("Arial",130,#PB_Font_Default)   : gDrawText(250,j,"Outlined")
EndProcedure

Procedure demo_gDrawRotatedText()
    gSetFont("Courier New",60,#PB_Font_Bold)
    gSetPenSize(3)
    For i = 50 To 0 Step -10
         gDrawingMode(#PB_2DDrawing_Default)
         gDrawRotatedText(10,10,"Rotated Text",i,RGBA($00,$00,$00,$FF-i*5))
         gSetPenPattern(8,RGBA(0,0,0,$FF-i*5),0);RGBA($FF,$FF,$FF,$FF-i*5))
         gDrawRotatedText(350,330,"PatternText",i-20)
         gDrawingMode(#PB_2DDrawing_Outlined)
         gDrawRotatedText(10,700,"Rotated Text",-i,RGBA($00,$00,$00,$FF-i*5))
    Next i
EndProcedure

Procedure demo_gLine()
EndProcedure

Procedure demo_gBezier()
EndProcedure

Procedure demo_gTriangle()
EndProcedure

Procedure demo_gPoly()
EndProcedure


For i = 0 To 100
    colors(i) = RGBA(Random($FF),Random($FF),Random($FF),$FF)
Next i



pbLogo = LoadImage(#PB_Any,#PB_Compiler_Home+"Examples\Sources\Data\PureBasicLogo.bmp")
If Not pbLogo : MessageRequester("ERROR","Unable to load PureBasic logo!") : End : EndIf

Background = CreateImage(#PB_Any,10,10,32|#PB_Image_Transparent)
If StartDrawing(ImageOutput(Background))
    DrawingMode(#PB_2DDrawing_Gradient)
    BackColor($00FFFF)
    FrontColor($FF0000)
    CircularGradient(5, 5, 5)     
    Box(0,0,10,10)
    StopDrawing()
EndIf



If gInit()
    img = CreateImage(#PB_Any,800,800,24)
    
    mainWin = OpenWindow(#PB_Any,0,0,1100,800,"gDrawing feature demo",#PB_Window_SystemMenu|#PB_Window_ScreenCentered)
    
    modeWin = ListViewGadget(#PB_Any,0,0,150,800)
    AddGadgetItem(modeWin,-1,"Welcome")             : demoProcedures(00) = @initpicture()
    AddGadgetItem(modeWin,-1,"gBox()")              : demoProcedures(01) = @demo_gBox()
    AddGadgetItem(modeWin,-1,"gLine() / gLineXY()") : demoProcedures(02) = @demo_gLine()
    AddGadgetItem(modeWin,-1,"gEllipse()")          : demoProcedures(03) = @demo_gEllipse()
    AddGadgetItem(modeWin,-1,"gCircle()")           : demoProcedures(04) = @demo_gCircle()
    AddGadgetItem(modeWin,-1,"gPlot()")             : demoProcedures(05) = @demo_gPlot()
    AddGadgetItem(modeWin,-1,"gDrawText()")         : demoProcedures(06) = @demo_gDrawText()
    AddGadgetItem(modeWin,-1,"gDrawRotatedText()")  : demoProcedures(07) = @demo_gDrawRotatedText()
    AddGadgetItem(modeWin,-1,"gPie()")              : demoProcedures(08) = @demo_gPie()
    AddGadgetItem(modeWin,-1,"gArc()")              : demoProcedures(09) = @demo_gArc()
    AddGadgetItem(modeWin,-1,"gBezier()")           : demoProcedures(10) = @demo_gBezier()
    AddGadgetItem(modeWin,-1,"gTriangle()")         : demoProcedures(11) = @demo_gTriangle()
    AddGadgetItem(modeWin,-1,"gPoly()")             : demoProcedures(12) = @demo_gPoly()
    AddGadgetItem(modeWin,-1,"gSetPenPattern()")    : demoProcedures(13) = @demo_gSetPenPattern()
    AddGadgetItem(modeWin,-1,"gSetPenStyle()")      : demoProcedures(14) = @demo_gSetPenStyle()
    SetGadgetState(modeWin,0)
    
                                    TextGadget(#PB_Any,960,20,130,20,"Pen Rotation")
    Define slider_penRotation     = TrackBarGadget(#PB_Any,960,40,130,20,0,360)
                                    TextGadget(#PB_Any,960,60,130,20,"Pen Scale")
    Define slider_penScale        = TrackBarGadget(#PB_Any,960,80,130,20,10,100) : SetGadgetState(slider_penScale,20)
                                    TextGadget(#PB_Any,960,100,130,20,"Pen Origin X")
    Define slider_penOriginX      = TrackBarGadget(#PB_Any,960,120,130,20,0,100)
                                    TextGadget(#PB_Any,960,140,130,20,"Pen Origin Y")
    Define slider_penOriginY      = TrackBarGadget(#PB_Any,960,160,130,20,0,100)
                                    TextGadget(#PB_Any,960,220,130,20,"Global Rotation")
    Define slider_globalRotation  = TrackBarGadget(#PB_Any,960,240,130,20,0,7200) : SetGadgetState(slider_globalRotation,3600)
                                    TextGadget(#PB_Any,960,260,130,20,"Global Scale (Zoom)")
    Define slider_globalScale     = TrackBarGadget(#PB_Any,960,280,130,20,0,100) : SetGadgetState(slider_globalScale,10)
                                    TextGadget(#PB_Any,960,300,130,20,"Global Shear X")
    Define slider_globalShearX    = TrackBarGadget(#PB_Any,960,320,130,20,0,100) : SetGadgetState(slider_globalShearX,50)
                                    TextGadget(#PB_Any,960,340,130,20,"Global Shear Y")
    Define slider_globalShearY    = TrackBarGadget(#PB_Any,960,360,130,20,0,100) : SetGadgetState(slider_globalShearY,50)

    If gStartDrawing( ImageOutput(img) )
        ;gClear( RGBA($AA,$AA,$AA,$FF) )
        initpicture()
        gStopDrawing()
    EndIf
    
    imgWin  = ImageGadget(#PB_Any,150,0,800,800,ImageID(img))
    Repeat
        Select WaitWindowEvent()
            Case #PB_Event_CloseWindow
                Break
            Case #PB_Event_Gadget
                Define gadget = EventGadget()
                If gadget = slider_penRotation
                    penRotation = GetGadgetState(slider_penRotation)
                    gadget = modeWin
                ElseIf gadget = slider_penScale
                    penScale = GetGadgetState(slider_penScale)*0.05
                    gadget = modeWin
                ElseIf gadget = slider_penOriginX
                    penOriginX = GetGadgetState(slider_penOriginX)
                    gadget = modeWin
                ElseIf gadget = slider_penOriginY
                    penOriginY = GetGadgetState(slider_penOriginY)
                    gadget = modeWin
                ElseIf gadget = slider_globalRotation
                    globalRotation = GetGadgetState(slider_globalRotation)*0.1 - 360.0
                    gadget = modeWin
                ElseIf gadget = slider_globalScale
                    globalScale = GetGadgetState(slider_globalScale)*0.1+0.1
                    gadget = modeWin
                ElseIf gadget = slider_globalShearX
                    globalShearX = GetGadgetState(slider_globalShearX) / 50 - 1.1
                    gadget = modeWin
                ElseIf gadget = slider_globalShearY
                    globalShearY = GetGadgetState(slider_globalShearY) / 50 - 1.1
                    gadget = modeWin
                EndIf
                If gadget = modeWin
                    Define item.l = GetGadgetState(modeWin)
                    If item >= 0 And item <= CountGadgetItems(modeWin)
                        Define demo.demoProc = demoProcedures(item)
                        If demo
                            If gStartDrawing( ImageOutput(img) )
                                gShearAt(400,400,globalShearX,globalShearY)
                                gScaleAt(400,400,globalScale,globalScale)
                                gRotateAt(400,400,globalRotation)
                                    gClear( RGBA($AA,$AA,$AA,$FF) )
                                    demo()
                                gResetTransform()
                                gStopDrawing()
                                SetGadgetState(imgWin,ImageID(img))
                            EndIf
                        EndIf
                    EndIf
                EndIf
        EndSelect
    ForEver

    gEnd()
EndIf