Page 1 sur 1

Tuto menu onglet Partie 4 (dessin des onglet)

Publié : mer. 27/août/2014 11:31
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

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

Publié : mer. 27/août/2014 12:09
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.

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

Publié : mer. 27/août/2014 12:15
par microdevweb
Bonjour Fred,

Je pensais que se serais plus facile à suivre, je ferais la suite dans un dernier topic

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

Publié : ven. 29/août/2014 16:35
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.

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

Publié : ven. 29/août/2014 16:44
par microdevweb
Merci Micoute