Tuto menu onglet Partie 4 (dessin des onglet)

Informations pour bien débuter en PureBasic
Avatar de l’utilisateur
microdevweb
Messages : 1800
Inscription : mer. 29/juin/2011 14:11
Localisation : Belgique

Tuto menu onglet Partie 4 (dessin des onglet)

Message par microdevweb »

Voici maintenant le procédures de dessin des onglets
Bon perso, je préfère diviser en plusieurs sous procédures (cela commente automatiquement le code) mais on pourrais tout regrouper en une seul procédure


Code : Tout sélectionner

 Procedure EraseCanvas()
            DrawingMode(#PB_2DDrawing_Default)
            Box(0,0,myTools()\W,myTools()\H,myTools()\BackColor)
 EndProcedure

Code : Tout sélectionner

       Procedure DrawOngletSelected()
            Protected X,Y,W,H
            DrawingFont(FontID(myTools()\FontOnglet))
            ;Calcul de la position
            X=myTools()\LeftOngletMargin
            Y=myTools()\Y
            ;Memorise la position pour le retour après
            PushMapPosition(myTools()\MyOnglet())
            ;Recherche si un un onglet est sélectionné
            ForEach myTools()\MyOnglet()
                  If myTools()\MyOnglet()\Selected
                        Break
                  EndIf
                  X+TextWidth(myTools()\MyOnglet()\Title$)+(myTools()\MarginOnglet * 2)
            Next
            ;Retour à la position
            PopMapPosition(myTools()\MyOnglet())
            ;Calcul de la taille de  l'onglets
            W=TextWidth(myTools()\MyOnglet()\Title$)+(myTools()\MarginOnglet * 2)
            H=myTools()\HeightOnglet+5
            X1noLine=X
            X2noLine=X+W
            DrawingMode(#PB_2DDrawing_Gradient)
            BackColor(myTools()\BackColorOngletSelected)
            FrontColor(myTools()\FrontColorOngletSelected)
            LinearGradient(X,Y,X,Y+H*0.5)
            RoundBox(X,Y,W,H,5,5)
            ;Dessin du cadre
            DrawingMode(#PB_2DDrawing_Outlined)
            ;Cette partie va être expliquée après
            If Val(MapKey(myTools()\MyOnglet()))=CurrentOnglet
                  RoundBox(X,Y,W,H,5,5,myTools()\OngletBoxOverFrontColor)
            Else
                  RoundBox(X,Y,W,H,5,5,myTools()\LineColor)
            EndIf
      EndProcedure

Code : Tout sélectionner

      Procedure DrawTxtOnglet()
            Protected X,Y
            DrawingFont(FontID(myTools()\FontOnglet))
            DrawingMode(#PB_2DDrawing_Transparent)
            Y=myTools()\Y+((myTools()\HeightOnglet/2)-(TextHeight("A")/2))
            X=myTools()\LeftOngletMargin
            ForEach myTools()\MyOnglet()
                  myTools()\MyOnglet()\X1=X
                  X+myTools()\MarginOnglet
                  X+TextWidth(myTools()\MyOnglet()\Title$)/2
                  X-(TextWidth(myTools()\MyOnglet()\Title$)/2)
                  DrawText(X,Y,myTools()\MyOnglet()\Title$,myTools()\OngletTexteColor)
                  X+((myTools()\MarginOnglet*1)+TextWidth(myTools()\MyOnglet()\Title$))
                  myTools()\MyOnglet()\X2=X
            Next
      EndProcedure

Code : Tout sélectionner

      Procedure DrawDownBoxOnglet()
            Protected X,Y,W,H
            X=myTools()\X
            Y=myTools()\Y+myTools()\HeightOnglet
            W=myTools()\W
            H=myTools()\H-myTools()\HeightOnglet
            DrawingMode(#PB_2DDrawing_Gradient)
            BackColor(myTools()\BackColorOngletSelected)
            FrontColor(myTools()\FrontColorOngletSelected)
            LinearGradient(X,Y+H*0.9,X,Y)
            RoundBox(X,Y,W,H,5,5)
            DrawingMode(#PB_2DDrawing_Default)
            Line(0,(myTools()\Y+myTools()\H)-2,myTools()\W,1,myTools()\LineColor)
            LineXY(0,Y,X1noLine,Y,myTools()\LineColor)
            Line(X2noLine,Y,W-X2noLine,1,myTools()\LineColor)
      EndProcedure

Code : Tout sélectionner

Procedure DrawBoxOverOnglet()
     If CurrentOnglet=-1 :ProcedureReturn :EndIf
     Protected X,Y,W,H
     DrawingFont(FontID(myTools()\FontOnglet))
     ;Calcul de la position
     X=myTools()\LeftOngletMargin
     Y=myTools()\Y
      ForEach myTools()\MyOnglet()
         If Val(MapKey(myTools()\MyOnglet()))=CurrentOnglet
              Break
         EndIf
         X+TextWidth(myTools()\MyOnglet()\Title$)+(myTools()\MarginOnglet * 2)
     Next
     ;Calcul de la taille de  l'onglets
      W=TextWidth(myTools()\MyOnglet()\Title$)+(myTools()\MarginOnglet * 2)
       H=myTools()\HeightOnglet+5
       If myTools()\MyOnglet()\Selected=#False
           DrawingMode(#PB_2DDrawing_Gradient)
           BackColor(myTools()\OngletBoxOverBackColor)
           FrontColor(myTools()\OngletBoxOverFrontColor)
           LinearGradient(X,Y,X,Y+H*0.5)
           RoundBox(X,Y,W,H,5,5)
            ;Dessin du cadre
            DrawingMode(#PB_2DDrawing_Outlined)
            RoundBox(X,Y,W,H,5,5,myTools()\LineColor)
            EndIf
            ;Petit flag pour plut tard
            BoxOverOnglet=#True
      EndProcedure

Code : Tout sélectionner

Procedure DrawOnglet()
    ForEach myTools()\MyOnglet()
       If myTools()\MyOnglet()\Selected
          DrawOngletSelected() 
           Break
       EndIf
    Next
    DrawBoxOverOnglet()  
    DrawDownBoxOnglet()
EndProcedure

Code : Tout sélectionner

      ;procédure de dessin du menu
      Procedure DrawTools(IdTools)
            ;Vérifie que le menu onglet existe
            If FindMapElement(myTools(),Str(IdTools))=0
                  MessageRequester("Error ToolsBar Show","This Id Tolls not exist...")
                  ProcedureReturn #False
            EndIf
            ;Petite précaution pour être sur la bonne fenêtre
            UseGadgetList(WindowID(myTools()\IdWindow))
            StartDrawing(CanvasOutput(myTools()\IdCanvas))
            EraseCanvas()
            DrawOnglet()
            DrawTxtOnglet()
            DrawGroupe()
            StopDrawing()
      EndProcedure
Et enfin le code pour tester tout cela

Code : Tout sélectionner

Procedure OpenMainForm()
      #Id_Menu_Onglet=0
      #ID_Form=0
      #Onglet1=0
      #Onglet2=1
      OpenWindow(#ID_Form,0,0,800,600,"Teste",#PB_Window_SystemMenu|#PB_Window_ScreenCentered)
      ToolsBar::Init(#Id_Menu_Onglet,#ID_Form,0,0,-1,100)
      ToolsBar::AddOnglet(#Id_Menu_Onglet,#Onglet1,"Onglet 1",#True)
      ToolsBar::AddOnglet(#Id_Menu_Onglet,#Onglet2,"Onglet 2",#False)
      ToolsBar::DrawTools(#Id_Menu_Onglet)
EndProcedure
OpenMainForm()
Global Event
Repeat
      Event=WaitWindowEvent()
Until Event=#PB_Event_CloseWindow
La partie 5 ICI
http://www.purebasic.fr/french/viewtopi ... 21&t=14734
Dernière modification par microdevweb le mer. 27/août/2014 12:13, modifié 1 fois.
Windows 10 64 bits PB: 5.70 ; 5.72 LST
Work at Centre Spatial de Liège
Fred
Site Admin
Messages : 2652
Inscription : mer. 21/janv./2004 11:03

Re: Tuto menu onglet Partie 4 (dessin des onglet)

Message par Fred »

Pourquoi créer 4 topics ? Je pense tout mettre dans un seul est plus facile à suivre, d'autant que tu peux editer tes posts à postériori.
Avatar de l’utilisateur
microdevweb
Messages : 1800
Inscription : mer. 29/juin/2011 14:11
Localisation : Belgique

Re: Tuto menu onglet Partie 4 (dessin des onglet)

Message par microdevweb »

Bonjour Fred,

Je pensais que se serais plus facile à suivre, je ferais la suite dans un dernier topic
Windows 10 64 bits PB: 5.70 ; 5.72 LST
Work at Centre Spatial de Liège
Avatar de l’utilisateur
Micoute
Messages : 2522
Inscription : dim. 02/oct./2011 16:17
Localisation : 35520 La Mézière

Re: Tuto menu onglet Partie 4 (dessin des onglet)

Message par Micoute »

Bonjour microdevweb,

c'est vraiment du sérieux et du bel ouvrage, continue comme ça, c'est très intéressant !

Merci pour le partage.
Microsoft Windows 10 Famille 64 bits : Carte mère : ASRock 970 Extreme3 R2.0 : Carte Graphique NVIDIA GeForce RTX 3080 : Processeur AMD FX 6300 6 cœurs 12 threads 3,50 GHz PB 5.73 PB 6.00 LTS (x64)
Un homme doit être poli, mais il doit aussi être libre !
Avatar de l’utilisateur
microdevweb
Messages : 1800
Inscription : mer. 29/juin/2011 14:11
Localisation : Belgique

Re: Tuto menu onglet Partie 4 (dessin des onglet)

Message par microdevweb »

Merci Micoute
Windows 10 64 bits PB: 5.70 ; 5.72 LST
Work at Centre Spatial de Liège
Répondre