Canvas, Questions de débutant

[Stéphane]

Bonjour

Je souhaite dessiner une courbe de prix et y ajouter un cercle.

A la lecture de la doc https://www.purebasic.com/french/docume ... adget.html j'en ai deduis que je dois utiliser un Canvas.

Seulement je n arrive pas à déterminer ou est le 0,0 du Canvas, en bas à gauche comme je l 'espère ou en haut à gauche comme je le crains ?

Aussi, le redimensionnement du composant parent (la form dans mon cas), lorsque le canvas est verrouillé sur ses 4 côtés, implique un "repaint" automatique à l’échelle du contenu du canvas.

Si vous pouvez me conseiller un exemple, je suis preneur. Je découvre totalement purebasic et j'ai peut être tendance à vouloir réinventer la roue...

Merci pour votre aide.

[Ar-S]

Plusieurs réponses à plusieurs questions.
- Le canvas est il la solution d'affichage : On peut dire oui.
(Par contre, intéresse toi aux commandes de StartVectorDrawing() pour dessiner du propre dans le canvas).
- Un redimensionnement inclura un repaint : Oui
- ou en haut à gauche comme je le crains ? Et oui.. Tu peux le vérifier comme ça

Code : Tout sélectionner

If OpenWindow(0, 0, 0, 220, 220, "Canvas", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
  
  CanvasGadget(0, 10, 10, 200, 200)
  
  Repeat
    Event = WaitWindowEvent()
    
    If Event = #PB_Event_Gadget
      Select EventGadget() 
        Case 0
          If EventType() = #PB_EventType_MouseMove
              x = GetGadgetAttribute(0, #PB_Canvas_MouseX)
              y = GetGadgetAttribute(0, #PB_Canvas_MouseY)
              Debug "x : " + x
              Debug "y : " + y
            EndIf

      EndSelect
    EndIf
    
  Until Event = #PB_Event_CloseWindow
EndIf

[Stéphane]

Merci

J'ai regardé la doc StartVectorDrawing(), je vais m y pencher plus attentivement une fois les tutos vidéos assimilés.

Initialement je me dirigeais vers https://rosettacode.org/wiki/Plot_coord ... #PureBasic

Mes besoins sont assez simple un courbe de prix, deux cercles, 3 droites ... mais autant prendre de bonnes pratiques des le début...

J ai vu qu il y a sur le net une "bibliothèque" (je ne sais pas si c est le terme approprié dans purebasic) de type chart, je vais y jeter un oeil aussi si j arrive à la retrouver


EDIT: j ai retrouvé, il s agit de RMChart que j ai trouvé ici http://www.purearea.net/pb/english/userlibs.php

[Ar-S]

Je viens de te faire un petit exemple sans "lib" externe..

Analyse ça.
C'est (pure) basique et sans vector pour le moment.
J'ai fait de simples histogrammes. Mais tu peux redimensionner ta fenêtre. J'ai adapté les graph à la largeur des fenetres, pas à la hauteur (le but est de comprendre le principe)..

Amuse toi bien.

Code : Tout sélectionner

Enumeration
  #WIN
  #CANVAS
EndEnumeration

; Déclare tes procédures, ça évitera de te prendre la tête pour le positionnement de ces dernières dans ton code.
Declare DrawCanvasBackGround()
Declare RedrawCanvas()
Declare DessineBox (NumMois,prix,couleur)


; Une structure va nous simplifier la vie en nous permettant de ne pas avoir N variables
; Dans les variable comme "Win" (pour fenêtre), on pourra lui attribuer les données x,y,l,h
Structure Taille
  X.i
  Y.i
  L.i
  H.i
EndStructure

Global LargMois,Xmois

; On attribue la structure taille aux variables win et canv en global
Global Win.Taille
Global Canv.Taille




; Macro optionnelle juste pour simplifier la syntaxe des objets structurées avec "taille"--------------------
; En gros pour écrire 
; Win(L) = 220
; au lieu de 
; Win.taille\L = 220
; etc.. 

Macro Win(cible)
  Win.taille\cible 
EndMacro

Macro Canv(cible)
  Canv.taille\cible 
EndMacro
;------------------------------------------------------------------------------------------------------------


; Création d'un tableau de 12 éléments pour les mois de l'année
Global Dim Mois(11)


; Initialisation des valeurs
Win(L) = 220
Win(H) = 220
; On adapte le gadget en fonction de la taille de la fenêtre
; cela servira si tu souhaites une fenêtre qui se redimensionnera
Canv(x) = 5 
Canv(y) = 5
Canv(L) = Win(L) - 10 
Canv(H) = Win(H) - 10 

LargMois = Canv(L) / 12


For i = 0 To 11
  mois(i) = i*LargMois
  Debug "Mois "+ Str(i+1) + " en x=" +  mois(i)
Next


; En cas de redimensionnement de la fenêtre, on recalcule toutes les coords
Procedure RedrawCanvas()
; Initialisation des valeurs
Win(L) = WindowWidth(#WIN)
Win(H) = WindowHeight(#WIN)
Canv(x) =  5 
Canv(y) =  5
Canv(L) = Win(L) - 10 
Canv(H) = Win(H) - 10 

LargMois = Canv(L) / 12

For i = 0 To 11
  mois(i) = i*LargMois
  Debug "Mois "+ Str(i+1) + " en x=" +  mois(i)
Next

ResizeGadget (#CANVAS,  Canv(x), canv(y), canv(L), Canv(H) )

EndProcedure



Procedure DessineBox (NumMois,prix,couleur)

  StartDrawing(CanvasOutput(#canvas))  

  ; Dessin d'un histogramme
  Box (Mois(NumMois-1), Canv(H), LargMois, -prix, couleur)

  StopDrawing()
EndProcedure


Procedure DrawCanvasBackGround()
  
  StartDrawing(CanvasOutput(#canvas)) 
  Box(0,0,canv(L),Canv(H),$00CCFF)
  StopDrawing()
  
EndProcedure


; // PROGRAMME //////////////////////////////////////////////////////////////////////////////


If OpenWindow(#WIN, 0, 0, 220, 220, "Canvas container", #PB_Window_SystemMenu | #PB_Window_ScreenCentered | #PB_Window_SizeGadget)
  
  CanvasGadget(#CANVAS, Canv(x), canv(y), canv(L), Canv(H) )
  
  ; Dessin du fond du canvas
  DrawCanvasBackGround()
  
  ;Dessin de janvier
  DessineBox (1,100,#Green)
  
  ;Dessin de mars
  DessineBox (3,190,#Red)
  
   ;Dessin de Decembre
  DessineBox (12,55,$CC4278)
  
  
  Repeat
    Event = WaitWindowEvent()
    
    Select Event
      Case #PB_Event_Gadget
        Select EventGadget() 
          Case #CANVAS
            If EventType() = #PB_EventType_MouseMove
              ; recuperation des coords
              x = GetGadgetAttribute(#CANVAS, #PB_Canvas_MouseX)
              y = GetGadgetAttribute(#CANVAS, #PB_Canvas_MouseY)
              Debug "x : " + x
              Debug "y : " + y
            EndIf
            
        EndSelect
        
        
      ; Si on redimensionne, on refais le tout mais comme tout est en procédure et proportionnel, aucun soucis.
      Case #PB_Event_SizeWindow

        ; Si on redimensionne la fenêtre, le canvas se redessine
        RedrawCanvas()
        
        ; Dessin du fond du canvas
        DrawCanvasBackGround()
        
        ;Dessin de janvier
        DessineBox (1,100,#Green)
        
        ;Dessin de mars
        DessineBox (3,190,#Red)
        
        ;Dessin de Decembre
        DessineBox (12,55,$CC4278)
        
        
    EndSelect

  
Until Event = #PB_Event_CloseWindow
EndIf

[Stéphane]

Merci pour cet exemple.

Je m aperçois que le fait que le 0,0 soit en haut à gauche m inquiétait mais en fait en lisant ton code il m est devenu évident qu il fallait mettre les coordonnées verticales négatives, ce à quoi je n avais pas pensé...
C est vrai qu au delà de l apprentissage de la programmation , c est toute une logique qui est à acquérir...
merci