VectorDrawing library :: Customiser une fenêtre

Partagez votre expérience de PureBasic avec les autres utilisateurs.
Répondre
Avatar de l’utilisateur
falsam
Messages : 7244
Inscription : dim. 22/août/2010 15:24
Localisation : IDF (Yvelines)
Contact :
Contacter falsam

VectorDrawing library :: Customiser une fenêtre

Message par falsam »

Avant de vous montrer comment skinner une fenêtre, Je vous propose une petite révision des possibilités offertes par la bibliothéque VectorDrawing avec ce code.

Objectif
- Dessiner une grille,
- Dessiner un arc de cercle,
- Dessiner du Texte,
- Dessiner une box avec un texte vertical,
- Dessiner un paragraphe de texte cadrer à droite.

Code : Tout sélectionner

EnableExplicit

Global text.s = "A quoi bon soulever des montagnes quand il est si simple de passer par-dessus ? (Boris Vian)"
Global ww = 800, wh = 600, n
Global GridSnap = 15 ;Espace entre les points  

If OpenWindow(0, 0, 0, ww, wh, "VectorDrawing library", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
    CanvasGadget(0, 0, 0, ww, wh)
    
    LoadFont(0, "Impact", 10)
    LoadFont(1, "Times New Roman", 20)
    
    ; Debut du dessin
    If StartVectorDrawing(CanvasVectorOutput(0))
      
      ; Dessin d'une grille 
      VectorSourceColor(RGBA(169, 169, 169, 255)) ; Couleur de remplissage
      
      ; Dessin des ligne horizontal
      MovePathCursor(0, 0) ; Positionnement du curseur de traçage      
      For n = 0 To ww/GridSnap
        AddPathLine(0, 600, #PB_Path_Relative)
        MovePathCursor(GridSnap, -600, #PB_Path_Relative) ;Retour du curseur de traçage       
      Next
      
      ; Dessin des ligne Vertical
      MovePathCursor(0, 0)
      For n = 0 To wh/GridSnap
          AddPathLine(800, 0, #PB_Path_Relative)
          MovePathCursor(-800, GridSnap, #PB_Path_Relative) 
      Next
      DotPath(2, GridSnap, #PB_Path_RoundEnd)           
      
      ; Dessiner un arc de cercle             
      VectorSourceColor(RGBA(255, 0, 0, 255)) ;Couleur de remplissage
      MovePathCursor(400, 300) ;Positionne le curseur de traçage au milieu du canvas
      AddPathCircle(400, 300, 200, 0, 235, #PB_Path_Connected) ;Dessin de l'arc
      ClosePath() ;Et on le ferme. Commenter pour voir la différence.     
      FillPath() ;;Remplissage de l'arc de cercle
      
      ; Dessiner du Texte
      VectorSourceColor(RGBA(255, 215, 0, 255))
      MovePathCursor(400, 100)
      VectorFont(FontID(0), 150)
      AddPathText("Demo")
      FillPath()
     
      ; Dessiner le meme texte et appliquet le contour Dash
      MovePathCursor(400, 100)
      VectorFont(FontID(0), 150)
      AddPathText("Demo")
      VectorSourceColor(RGBA(0, 0, 0, 255))
      DashPath(3, 6) ;Largeur et longueur du point.
      
      ; Dessiner une box avec un text vertical à l"interieur
      AddPathBox(0, 0, 100, 600)
      VectorSourceColor(RGBA(255, 211, 211, 255)) 
      FillPath() 
      
      ; Dessin du texte dans la box avec un angle de 90°
      MovePathCursor(80, 50)
      RotateCoordinates(0, 0, 90)
      VectorFont(FontID(1), 50)
      VectorSourceColor(RGBA(0, 0, 0, 255))
      AddPathText("Make with PureBasic")
      FillPath()
      ResetCoordinates() ; Annule la rotation
      
      ; Dessiner un paragraphe cadrer à droite 
      VectorFont(FontID(1), 18)
      VectorSourceColor(RGBA(0, 0, 0, 255)) 
      MovePathCursor(480, 520)
      DrawVectorParagraph(Text, 310, 250, #PB_VectorParagraph_Right)
      FillPath() 
           
      ; Fin du dessin
      StopVectorDrawing()
    EndIf
    
    Repeat : Until WaitWindowEvent() = #PB_Event_CloseWindow 
  EndIf
Configuration : Windows 11 Famille 64-bit - PB 6.03 x64 - AMD Ryzen 7 - 16 GO RAM
Vidéo NVIDIA GeForce GTX 1650 Ti - Résolution 1920x1080 - Mise à l'échelle 125%
Haut
Avatar de l’utilisateur
falsam
Messages : 7244
Inscription : dim. 22/août/2010 15:24
Localisation : IDF (Yvelines)
Contact :
Contacter falsam

Re: VectorDrawing library :: Customiser une fenêtre

Message par falsam »

La même chose que précédemment mais cette fois çi vous pouvez redimensionner la fenêtre.

Code : Tout sélectionner

EnableExplicit

Global text.s = "A quoi bon soulever des montagnes quand il est si simple de passer par-dessus ? (Boris Vian)"
Global ww = 800, wh = 600, n
Global GridSnap = 15 ;Espace entre les points  

;Au sommaire 
Declare Draw()

If OpenWindow(0, 0, 0, ww, wh, "VectorDrawing library", #PB_Window_SystemMenu | #PB_Window_ScreenCentered | #PB_Window_SizeGadget)
  CanvasGadget(0, 0, 0, ww, wh)
  
  LoadFont(0, "Impact", 10)
  LoadFont(1, "Times New Roman", 20)
  
  Draw()
  
  ; Déclencheur
  BindEvent(#PB_Event_SizeWindow, @Draw())
  
  Repeat : Until WaitWindowEvent() = #PB_Event_CloseWindow 
EndIf

Procedure Draw()
  ww = WindowWidth(0)
  wh = WindowHeight(0)
  
  ResizeGadget(0, #PB_Ignore, #PB_Ignore, ww, wh)
  
  ; Debut du dessin
  If StartVectorDrawing(CanvasVectorOutput(0))
    
    ; Dessin d'une grille 
    VectorSourceColor(RGBA(169, 169, 169, 255)) ; Couleur de remplissage
    
    ; Dessin des ligne horizontal
    MovePathCursor(0, 0) ; Positionnement du curseur de traçage      
    For n = 0 To ww/GridSnap
      AddPathLine(0, ww, #PB_Path_Relative)
      MovePathCursor(GridSnap, -ww, #PB_Path_Relative) ;Retour du curseur de traçage       
    Next
    
    ; Dessin des ligne Vertical
    MovePathCursor(0, 0)
    For n = 0 To wh/GridSnap
      AddPathLine(wh, 0, #PB_Path_Relative)
      MovePathCursor(-wh, GridSnap, #PB_Path_Relative) 
    Next
    DotPath(2, GridSnap, #PB_Path_RoundEnd)           
    
    ; Dessiner un arc de cercle             
    VectorSourceColor(RGBA(255, 0, 0, 255)) ;Couleur de remplissage
    MovePathCursor(400, 300)                ;Positionne le curseur de traçage au milieu du canvas
    AddPathCircle(400, 300, 200, 0, 235, #PB_Path_Connected) ;Dessin de l'arc
    ClosePath()                                              ;Et on le ferme. Commenter pour voir la différence.     
    FillPath()                                               ;;Remplissage de l'arc de cercle
    
    ; Dessiner du Texte
    VectorSourceColor(RGBA(255, 215, 0, 255))
    MovePathCursor(400, 100)
    VectorFont(FontID(0), 150)
    AddPathText("Demo")
    FillPath()
    
    ; Dessiner le meme texre et appliquet le contour Dash
    MovePathCursor(400, 100)
    VectorFont(FontID(0), 150)
    AddPathText("Demo")
    VectorSourceColor(RGBA(0, 0, 0, 255))
    DashPath(3, 6) ;Largeur et longueur du point.
    
    ; Dessiner une box avec un text vertical à l"interieur
    AddPathBox(0, 0, 100, wh)
    VectorSourceColor(RGBA(255, 211, 211, 255)) 
    FillPath() 
    
    ; Dessin du texte dans la box avec un angle de 90°
    MovePathCursor(80, 50)
    RotateCoordinates(0, 0, 90)
    VectorFont(FontID(1), 50)
    VectorSourceColor(RGBA(0, 0, 0, 255))
    AddPathText("Make with PureBasic")
    FillPath()
    ResetCoordinates() ; Annule la rotation
    
    ; Dessiner un paragraphe cadrer à droite 
    VectorFont(FontID(1), 18)
    VectorSourceColor(RGBA(0, 0, 0, 255)) 
    MovePathCursor(ww - 320, wh-80)
    DrawVectorParagraph(Text, 310, 250, #PB_VectorParagraph_Right)
    FillPath() 
    
    ; Fin du dessin
    StopVectorDrawing()
  EndIf  
EndProcedure
PS : Dessiner une grille et la redimensionner n'est pas très compliquer
Configuration : Windows 11 Famille 64-bit - PB 6.03 x64 - AMD Ryzen 7 - 16 GO RAM
Vidéo NVIDIA GeForce GTX 1650 Ti - Résolution 1920x1080 - Mise à l'échelle 125%
Haut
Avatar de l’utilisateur
falsam
Messages : 7244
Inscription : dim. 22/août/2010 15:24
Localisation : IDF (Yvelines)
Contact :
Contacter falsam

Re: VectorDrawing library :: Customiser une fenêtre

Message par falsam »

Comment customiser une fenêtre ?
On va utiliser le canvas comme un container. (Flag #PB_Canvas_Container) et placer quelques gadgets.

Code : Tout sélectionner

EnableExplicit

Global text.s = "A quoi bon soulever des montagnes quand il est si simple de passer par-dessus ? (Boris Vian)"
Global ww = 800, wh = 600, n
Global GridSnap = 15 ;Espace entre les points  

;Au sommaire 
Declare Draw()
Declare Exit()

If OpenWindow(0, 0, 0, ww, wh, "VectorDrawing library", #PB_Window_SystemMenu | #PB_Window_ScreenCentered | #PB_Window_SizeGadget)
  If CanvasGadget(0, 0, 0, ww, wh, #PB_Canvas_Container) 
    ButtonGadget(1, ww - 90, 20, 80, 24, "Quit")
    TextGadget(#PB_Any, 110, 20, 30, 20, "Nom") 
    StringGadget(2, 220, 20, 250, 24, "")
    ListIconGadget(3, 110, 50, ww - 120, wh - 150, "Nom", 200) 
    CloseGadgetList()
  EndIf
  
  LoadFont(0, "Impact", 10)
  LoadFont(1, "Times New Roman", 20)
  
  Draw()
  
  ; Déclencheur
  BindEvent(#PB_Event_SizeWindow, @Draw())
  BindEvent(#PB_Event_CloseWindow, @Exit())
  BindGadgetEvent(1, @exit())
  
  Repeat : WaitWindowEvent() : ForEver
EndIf

Procedure Draw()
  ww = WindowWidth(0)
  wh = WindowHeight(0)
  
  ResizeGadget(0, #PB_Ignore, #PB_Ignore, ww, wh)
  ResizeGadget(1, ww - 90, #PB_Ignore, #PB_Ignore, #PB_Ignore)
  ResizeGadget(3, #PB_Ignore, #PB_Ignore, ww - 120, wh - 150)
  
  If StartDrawing(CanvasOutput(0))
    Box(0, 0, ww, wh, RGB(240, 240, 240))
    StopDrawing()
  EndIf
  
  ; Debut du dessin
  If StartVectorDrawing(CanvasVectorOutput(0))          
    ; Dessiner une box avec un text vertical à l"interieur
    AddPathBox(0, 0, 100, wh)
    VectorSourceColor(RGBA(255, 211, 211, 255)) 
    FillPath() 
    
    ; Dessin du texte dans la box avec un angle de 90°
    MovePathCursor(80, 50)
    RotateCoordinates(0, 0, 90)
    VectorFont(FontID(1), 50)
    VectorSourceColor(RGBA(0, 0, 0, 255))
    AddPathText("Make with PureBasic")
    FillPath()
    ResetCoordinates() ; Annule la rotation
    
    ; Dessiner un paragraphe cadrer à droite 
    VectorFont(FontID(1), 18)
    VectorSourceColor(RGBA(0, 0, 0, 255)) 
    MovePathCursor(ww - 320, wh-80)
    DrawVectorParagraph(Text, 310, 250, #PB_VectorParagraph_Right)
    FillPath() 
    
    ; Fin du dessin
    StopVectorDrawing()
  EndIf  
EndProcedure

Procedure Exit()
  End  
EndProcedure
Configuration : Windows 11 Famille 64-bit - PB 6.03 x64 - AMD Ryzen 7 - 16 GO RAM
Vidéo NVIDIA GeForce GTX 1650 Ti - Résolution 1920x1080 - Mise à l'échelle 125%
Haut
Avatar de l’utilisateur
SPH
Messages : 4726
Inscription : mer. 09/nov./2005 9:53

Re: VectorDrawing library :: Customiser une fenêtre

Message par SPH »

Concis, facile a comprendre : grand merci :arrow: :idea: :idea: :idea:
http://HexaScrabble.com/
!i!i!i!i!i!i!i!i!i!
!i!i!i!i!i!i!
!i!i!i!
//// Informations ////
Intel Core i7 4770 64 bits - GTX 650 Ti
Version de PB : 6.00 - 64 bits
Haut
Avatar de l’utilisateur
Micoute
Messages : 2522
Inscription : dim. 02/oct./2011 16:17
Localisation : 35520 La Mézière

Re: VectorDrawing library :: Customiser une fenêtre

Message par Micoute »

Pas mieux, 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 !
Haut
Avatar de l’utilisateur
Ar-S
Messages : 9478
Inscription : dim. 09/oct./2005 16:51
Contact :
Contacter Ar-S

Re: VectorDrawing library :: Customiser une fenêtre

Message par Ar-S »

Très cool. Merci Falsam.
Petit peaufinage avec le redimensionnement du string 2 et une délimitation de la taille min avec un WindowBounds

Code : Tout sélectionner

EnableExplicit

Global text.s = "A quoi bon soulever des montagnes quand il est si simple de passer par-dessus ? (Boris Vian)"
Global ww = 800, wh = 600, n
Global GridSnap = 15 ;Espace entre les points 

;Au sommaire
Declare Draw()
Declare Exit()

If OpenWindow(0, 0, 0, ww, wh, "VectorDrawing library", #PB_Window_SystemMenu | #PB_Window_ScreenCentered | #PB_Window_SizeGadget)
  WindowBounds(0, 419, 400, 800,600) 
  If CanvasGadget(0, 0, 0, ww, wh, #PB_Canvas_Container)
    ButtonGadget(1, ww - 90, 20, 80, 24, "Quit")
    TextGadget(#PB_Any, 110, 20, 30, 20, "Nom")
    StringGadget(2, 150, 20, 320, 23, "")
    ListIconGadget(3, 110, 50, ww - 120, wh - 150, "Nom", 200)
    CloseGadgetList()
  EndIf
 
  LoadFont(0, "Impact", 10)
  LoadFont(1, "Times New Roman", 20)
 
  Draw()
 
  ; Déclencheur
  BindEvent(#PB_Event_SizeWindow, @Draw())
  BindEvent(#PB_Event_CloseWindow, @Exit())
  BindGadgetEvent(1, @exit())
 
  Repeat : WaitWindowEvent() : ForEver
EndIf

Procedure Draw()
  ww = WindowWidth(0)
  wh = WindowHeight(0)

 
  ResizeGadget(0, #PB_Ignore, #PB_Ignore, ww, wh)
  ResizeGadget(1, ww - 90, #PB_Ignore, #PB_Ignore, #PB_Ignore)
  ResizeGadget(2, #PB_Ignore, #PB_Ignore,ww-330, #PB_Ignore)
  ResizeGadget(3, #PB_Ignore, #PB_Ignore, ww - 120, wh - 150)
 
  If StartDrawing(CanvasOutput(0))
    Box(0, 0, ww, wh, RGB(240, 240, 240))
    StopDrawing()
  EndIf
 
  ; Debut du dessin
  If StartVectorDrawing(CanvasVectorOutput(0))         
    ; Dessiner une box avec un text vertical à l"interieur
    AddPathBox(0, 0, 100, wh)
    VectorSourceColor(RGBA(255, 211, 211, 255))
    FillPath()
   
    ; Dessin du texte dans la box avec un angle de 90°
    MovePathCursor(80, 50)
    RotateCoordinates(0, 0, 90)
    VectorFont(FontID(1), 50)
    VectorSourceColor(RGBA(0, 0, 0, 255))
    AddPathText("Make with PureBasic")
    FillPath()
    ResetCoordinates() ; Annule la rotation
   
    ; Dessiner un paragraphe cadrer à droite
    VectorFont(FontID(1), 18)
    VectorSourceColor(RGBA(0, 0, 0, 255))
    MovePathCursor(ww - 320, wh-80)
    DrawVectorParagraph(Text, 310, 250, #PB_VectorParagraph_Right)
    FillPath()
   
    ; Fin du dessin
    StopVectorDrawing()
  EndIf 
EndProcedure

Procedure Exit()
  End 
EndProcedure
~~~~Règles du forum ~~~~
⋅.˳˳.⋅ॱ˙˙ॱ⋅.˳Ar-S ˳.⋅ॱ˙˙ॱ⋅.˳˳.⋅
W11x64 PB 6.x
Section HORS SUJET : ICI
LDV MULTIMEDIA : Dépannage informatique & mes Logiciels PB
UPLOAD D'IMAGES : Uploader des images de vos logiciels
Haut
Avatar de l’utilisateur
falsam
Messages : 7244
Inscription : dim. 22/août/2010 15:24
Localisation : IDF (Yvelines)
Contact :
Contacter falsam

Re: VectorDrawing library :: Customiser une fenêtre

Message par falsam »

Bonjour Ar-s. Bien vu L’artefact ! C'est de ma faute. Le string est a cheval sur le TextGadget.

Remplace

Code : Tout sélectionner

TextGadget(#PB_Any, 110, 20, 150, 20, "Nom")
par

Code : Tout sélectionner

TextGadget(#PB_Any, 110, 20, 30, 20, "Nom")
Code précédent corrigé.
Configuration : Windows 11 Famille 64-bit - PB 6.03 x64 - AMD Ryzen 7 - 16 GO RAM
Vidéo NVIDIA GeForce GTX 1650 Ti - Résolution 1920x1080 - Mise à l'échelle 125%
Haut
Avatar de l’utilisateur
grendizer
Messages : 59
Inscription : mer. 29/mai/2019 6:29

Re: VectorDrawing library :: Customiser une fenêtre

Message par grendizer »

Merci falsam de ce partage :D :D
Haut
Répondre

Revenir à « Trucs et astuces »