Fenêtre et gadgets : Le Canvas

[falsam]

Le canvas offre une surface de dessin et d’événements pour la souris et le clavier dans le but de créer facilement des affichages personnalisées.

Documentation : http://www.purebasic.com/french/documen ... adget.html

Avec ce code nous allons affiché une image sur un canvas. L'image se trouve dans les exemples du dossier d'installation de PureBasic.

Code : Tout sélectionner

Image = LoadImage(#PB_Any, #PB_Compiler_Home + "Examples\3D\Data\Textures\Geebee2.bmp")

Pour attribuer une image à un canvas on utilisera la fonction SetGadgetAttribute() de cette maniére.

Code : Tout sélectionner

SetGadgetAttribute(#Canvas, #PB_Canvas_Image , ImageID(Image))

Le code dans son ensemble.

Code : Tout sélectionner

Enumeration Window
  #MainForm
EndEnumeration

Enumeration Gadget
  #Canvas
EndEnumeration

;Création de l'image qui sera appliquée au canvas
Image = LoadImage(#PB_Any, #PB_Compiler_Home + "Examples\3D\Data\Textures\Geebee2.bmp")

OpenWindow(#MainForm, 0, 0, 500, 250, "Premiere fenêtre", #PB_Window_SystemMenu|#PB_Window_ScreenCentered)      

;Création du canvas
CanvasGadget(#Canvas, 20, 20, 128, 128)
SetGadgetAttribute(#Canvas, #PB_Canvas_Image , ImageID(Image))

Repeat : Until WaitWindowEvent() = #PB_Event_CloseWindow

[falsam]

Il est possible de dessiner sur la surface d'un canvas comme on le fait avec un sprite.

On utilisera pour cela la fonction StartDrawing() et StopDrawing() avec comme surface le canvas.

Code : Tout sélectionner

StartDrawing(CanvasOutput(#Canvas))

Pour cet exercice, nous dessinerons un fond rouge et quelques points de différents diamètres.

Code : Tout sélectionner

Enumeration Window
  #MainForm
EndEnumeration

Enumeration Gadget
  #Canvas
EndEnumeration

OpenWindow(#MainForm, 0, 0, 500, 250, "Premiere fenêtre", #PB_Window_SystemMenu|#PB_Window_ScreenCentered)      

CanvasGadget(#Canvas, 10, 10, 480, 230)

;Dessin dans un canvas
StartDrawing(CanvasOutput(#Canvas))

;Fond rouge par exemple
Box(0, 0, 480, 230, $0000FF)

;Quelques points aléatoires
For Point = 0 To 100
  Circle(Random(480), Random(230), Random(5), RGB(Random(255), Random(255), Random(255)))
Next

StopDrawing()

Repeat : Until WaitWindowEvent() = #PB_Event_CloseWindow

[falsam]

Vous allez voir avec ce nouveau code comment créer son propre bouton graphique.

Vous aurez besoin des trois images suivantes.

- Bouton état normal :


- Bouton état survolé :


- Bouton état cliqué


Ces trois images ainsi que le code qui suit sont téléchargeables depuis la plateforme collaborative GitHub
https://github.com/pbcodex/Canvas-Butto ... master.zip

Code : Tout sélectionner

  EnableExplicit
  
  IncludePath "assets" 
  
  Enumeration Window
    #MainForm
  EndEnumeration
  
  Enumeration Gadget
    #CanvasButton
  EndEnumeration
  
  Global ImageButtonHover, ImageButtonUp.i, ImageButtonDown.i
  
  ;Plan du code
  Declare Start()
  Declare OnMouse()
  Declare Exit()
  
  Start() ;On commence
  
  Procedure Start()
    ;Création des images : Lecture des images se trouvant dans la Data Section
    UsePNGImageDecoder() ;Les images sont aux format PNG
    ImageButtonHover = CatchImage(#PB_Any, ?ButtonHover)  ;Bouton Survolé
    ImageButtonUp = CatchImage(#PB_Any, ?ButtonUp)        ;Bouton état normal
    ImageButtonDown = CatchImage(#PB_Any, ?ButtonDown)    ;Bouton cliqué
    
    ;Mise en place de la fenêtre de l'application
    OpenWindow(#MainForm, 0, 0, 500, 250, "Canvas Button", #PB_Window_SystemMenu|#PB_Window_ScreenCentered)      
    
    ;Mise en place du canvas gadget représentant le bouton
    CanvasGadget(#CanvasButton, 387, 20, 99, 40)
    
    ;Image par défaut du canvas
    SetGadgetAttribute(#CanvasButton, #PB_Canvas_Image , ImageID(ImageButtonUp))
    
    ;Procédure à déclencher si activité de la souris 
    BindGadgetEvent(#CanvasButton, @OnMouse())
      
    ;Procédure à déclencher quand on quitte l'application
    BindEvent(#PB_Event_CloseWindow, @Exit())
    
    Repeat : WaitWindowEvent() : ForEver
  EndProcedure
  
  
  Procedure OnMouse()
    Protected Action = EventType()
    
    Select Action
      Case #PB_EventType_LeftButtonDown 
        SetGadgetAttribute(#CanvasButton, #PB_Canvas_Image , ImageID(ImageButtonDown))
        
      Case #PB_EventType_MouseLeave
        SetGadgetAttribute(#CanvasButton, #PB_Canvas_Image , ImageID(ImageButtonUp))
        
      Case #PB_EventType_MouseEnter, #PB_EventType_LeftButtonUp
        SetGadgetAttribute(#CanvasButton, #PB_Canvas_Image , ImageID(ImageButtonHover))
      Default
          
    EndSelect  
  EndProcedure
      
  Procedure Exit()
    End  
  EndProcedure
   
  ;La data section va permettre d'inclure les images dans l'éxécutable
  DataSection
    
    ButtonUp:
    IncludeBinary "buttonup.png"
    
    ButtonHover:
    IncludeBinary "buttonhover.png"
    
    ButtonDown: 
    IncludeBinary "buttondown.png"  
  EndDataSection

[Bernie]

Bonjour et merci Falsam pour cette excellent tutoriel sur les interfaces et la façon de se servir d'un Canvas .