Page 1 sur 1

[5.40] Vecteurs et interactivité

Publié : mer. 02/sept./2015 16:51
par falsam
Je continue à découvrir cette superbe bibliothèque VectorDrawing.

Cette bibliothèque utilisant GDI, il est possible de dessiner directement sur la fenêtre et d'ajouter une interaction au survol des objets dessinés.

Cette petite démo affiche un cercle, un rectangle et un polygone horrible. Survolé chacun de ces objet avec la souris.

Code : Tout sélectionner

Enumeration window
  #mainform
EndEnumeration

Enumeration gadget
  #result
EndEnumeration

Enumeration font
  #fontvector
  #fontapp
EndEnumeration

Declare draw()

;Initialisation des fonts
LoadFont(#fontvector, "Impact", 10) 
LoadFont(#fontapp, "Verdana", 11)
SetGadgetFont(#PB_Default, FontID(#fontapp))

If OpenWindow(#mainform, 0, 0, 600, 400, "VectorDrawing", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)  
  
  TextGadget(#PB_Any, 20, 100, 200, 20, "Forme selectionnée")
  StringGadget(#result, 220, 100, 200, 22, "")
  
  If StartVectorDrawing(WindowVectorOutput(0))    
    
    ;Titre
    MovePathCursor(20, 10)
    VectorFont(FontID(#fontvector), 60) 
    AddPathText("Mon application")
        
    ;Remplissage du texte & contour
    VectorSourceColor(RGBA(255, 215, 0, 255))
    FillPath(#PB_Path_Preserve)
   
    VectorSourceColor(RGBA(0, 0, 0, 255))
    StrokePath(1)
    
    StopVectorDrawing()
  EndIf
  
  Repeat
    Event = WaitWindowEvent()
    If EventType() = -1
      Draw()
    EndIf
    
  Until Event = #PB_Event_CloseWindow
EndIf


Procedure Draw()    
  x = WindowMouseX(0)
  y = WindowMouseY(0)
  SetGadgetText(#Result, "")
  If StartVectorDrawing(WindowVectorOutput(0))
    
    ;Cercle
    AddPathCircle(50, 220, 30) ;Ajout cercle
    
    If IsInsidePath(x, y, #PB_Coordinate_Device) 
      ;Curseur dans le cercle
      SetGadgetText(#Result, "Cercle bleu")
      VectorSourceColor(RGBA(0, 255, 0, 255))
    Else
      ;Curseur en dehors du cercle
      VectorSourceColor(RGBA(0, 0, 255, 255))
    EndIf
    FillPath() ;Remplissage avec la couleur couante
    
    ;Box
    VectorSourceColor(RGBA(255, 0, 0, 255))
    AddPathBox(200, 200, 100, 50) 
    
    If IsInsidePath(x, y, #PB_Coordinate_Device) 
      SetGadgetText(#Result, "Rectangle rouge")
      VectorSourceColor(RGBA(255, 0, 0, 255))
    Else
      VectorSourceColor(RGBA(0, 0, 255, 255))
    EndIf
    FillPath() 
        
    ;Polygone
    VectorSourceColor(RGBA(0, 0, 255, 255))
    MovePathCursor(450, 180)
    AddPathLine(50, 10, #PB_Path_Relative)
    AddPathLine(10, 20, #PB_Path_Relative)
    AddPathLine(0, 30, #PB_Path_Relative)
    AddPathLine(-50, 30, #PB_Path_Relative)
    AddPathLine(-50, -30, #PB_Path_Relative)
    AddPathLine(-10, -20, #PB_Path_Relative)
    AddPathLine(50, -40, #PB_Path_Relative)
    If IsInsidePath(x, y, #PB_Coordinate_Device) 
      SetGadgetText(#Result, "Polygone jaune")
      VectorSourceColor(RGBA(255, 215, 0, 255))
    Else
      VectorSourceColor(RGBA(0, 0, 255, 255))
    EndIf
    FillPath()
    
    StopVectorDrawing()
  EndIf      
EndProcedure
Idéal pour créer des cartes interactives par exemple.

:!: Vous allez voir dans les commentaires suivant que l'affichage est perdu, si on affiche la fenetre en dehors des limites de l'écran. J'ai modifié le code en intégrant des canvas afin de palier à ce défaut.

Re: [5.40] Vecteurs et interactivité

Publié : mer. 02/sept./2015 17:20
par Mesa
Quand on dessine sur une fenêtre, son contenu s'efface si elle perd le focus ou si on déplace la fenêtre en dehors de l'écran. Il faut la redessiner sur un évènement #PB_Event_Repaint.

Avec ton code, le titre s'efface après un Alt+Tab.

Avec ce code, la fenêtre est repeinte mais il y a un petit scintillement.

Code : Tout sélectionner

Enumeration window
  #mainform
EndEnumeration

Enumeration gadget
  #result
EndEnumeration

Enumeration font
  #fontvector
  #fontapp
EndEnumeration

Declare draw()

;Initialisation des fonts
LoadFont(#fontvector, "Impact", 10) 
LoadFont(#fontapp, "Verdana", 11)
SetGadgetFont(#PB_Default, FontID(#fontapp))

If OpenWindow(#mainform, 0, 0, 600, 400, "VectorDrawing", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)  
  
  txt=TextGadget(#PB_Any, 20, 100, 200, 20, "Forme selectionnée")
  StringGadget(#result, 220, 100, 200, 22, "")
  
  ;***********************Ajout***************************
  ;A cause du DPI
  ResizeGadget(txt,#PB_Ignore,#PB_Ignore,#PB_Ignore, GadgetHeight(txt,#PB_Gadget_RequiredSize))
  ResizeGadget(#result,#PB_Ignore,#PB_Ignore,#PB_Ignore, GadgetHeight(#result,#PB_Gadget_RequiredSize))
  ;Debug GadgetHeight(#result)
  ;Debug GadgetHeight(#result,#PB_Gadget_RequiredSize)
  ;*******************************************************
  
  If StartVectorDrawing(WindowVectorOutput(0))    
    
    ;Titre
    MovePathCursor(20, 10)
    VectorFont(FontID(#fontvector), 60) 
    AddPathText("Mon application")
    
    ;Remplissage du texte & contour
    VectorSourceColor(RGBA(255, 215, 0, 255))
    FillPath(#PB_Path_Preserve)
    
    VectorSourceColor(RGBA(0, 0, 0, 255))
    StrokePath(1)
    
    StopVectorDrawing()
  EndIf
  
  Repeat
    Event = WaitWindowEvent()
    ;***********************Ajout***************************
    If Event = #PB_Event_Repaint
      If StartVectorDrawing(WindowVectorOutput(0))    
        
        ;Titre
        MovePathCursor(20, 10)
        VectorFont(FontID(#fontvector), 60) 
        AddPathText("Mon application")
        
        ;Remplissage du texte & contour
        VectorSourceColor(RGBA(255, 215, 0, 255))
        FillPath(#PB_Path_Preserve)
        
        VectorSourceColor(RGBA(0, 0, 0, 255))
        StrokePath(1)
        
        StopVectorDrawing()
      EndIf
    EndIf 
    ;*******************************************************
    If EventType() = -1
      Draw()
    EndIf
    
  Until Event = #PB_Event_CloseWindow
EndIf


Procedure Draw()    
  x = WindowMouseX(0)
  y = WindowMouseY(0)
  SetGadgetText(#Result, "")
  If StartVectorDrawing(WindowVectorOutput(0))
    
    ;Cercle
    AddPathCircle(50, 220, 30) ;Ajout cercle
    
    If IsInsidePath(x, y, #PB_Coordinate_Device) 
      ;Curseur dans le cercle
      SetGadgetText(#Result, "Cercle bleu")
      VectorSourceColor(RGBA(0, 255, 0, 255))
    Else
      ;Curseur en dehors du cercle
      VectorSourceColor(RGBA(0, 0, 255, 255))
    EndIf
    FillPath() ;Remplissage avec la couleur couante
    
    ;Box
    VectorSourceColor(RGBA(255, 0, 0, 255))
    AddPathBox(200, 200, 100, 50) 
    
    If IsInsidePath(x, y, #PB_Coordinate_Device) 
      SetGadgetText(#Result, "Rectangle rouge")
      VectorSourceColor(RGBA(255, 0, 0, 255))
    Else
      VectorSourceColor(RGBA(0, 0, 255, 255))
    EndIf
    FillPath() 
    
    ;Polygone
    VectorSourceColor(RGBA(0, 0, 255, 255))
    MovePathCursor(450, 180)
    AddPathLine(50, 10, #PB_Path_Relative)
    AddPathLine(10, 20, #PB_Path_Relative)
    AddPathLine(0, 30, #PB_Path_Relative)
    AddPathLine(-50, 30, #PB_Path_Relative)
    AddPathLine(-50, -30, #PB_Path_Relative)
    AddPathLine(-10, -20, #PB_Path_Relative)
    AddPathLine(50, -40, #PB_Path_Relative)
    If IsInsidePath(x, y, #PB_Coordinate_Device) 
      SetGadgetText(#Result, "Polygone jaune")
      VectorSourceColor(RGBA(255, 215, 0, 255))
    Else
      VectorSourceColor(RGBA(0, 0, 255, 255))
    EndIf
    FillPath()
    
    StopVectorDrawing()
  EndIf      
EndProcedure
M.

Re: [5.40] Vecteurs et interactivité

Publié : mer. 02/sept./2015 18:47
par microdevweb
Merci falsam pour cet exemple, vraiment top cette librairie.

Re: [5.40] Vecteurs et interactivité

Publié : mer. 02/sept./2015 19:04
par falsam
microdevweb a écrit :Merci falsam pour cet exemple, vraiment top cette librairie.
De rien microdevweb.
Mesa a écrit :Quand on dessine sur une fenêtre, son contenu s'efface si elle perd le focus
Merdum!
Mesa a écrit :Avec ton code, le titre s'efface après un Alt+Tab.
Pas sous windows10 chez moi.
Mesa a écrit :oui si on déplace la fenêtre en dehors de l'écran.
C'est vrai tu as raison.

J'ai revu ma copie. Le code est modifié en conséquence et pour éviter les scintillements, les dessins sont réalisés sur des canvas.

Le laisse en l'état le code du premier message et vous propose cette autre démarche.

Code : Tout sélectionner

Enumeration window
  #mainform
EndEnumeration

Enumeration gadget
  #title
  #result
  #shape
EndEnumeration

Enumeration font
  #fontvector
  #fontapp
EndEnumeration

Declare DrawTitle()
Declare DrawShape()

;Initialisation des fonts
LoadFont(#fontvector, "Impact", 10) 
LoadFont(#fontapp, "Verdana", 11)
SetGadgetFont(#PB_Default, FontID(#fontapp))

If OpenWindow(#mainform, 0, 0, 600, 400, "VectorDrawing", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)   
  SetWindowColor(#mainform, RGB(255, 255, 255))
  Gadget = TextGadget(#PB_Any, 20, 100, 200, 20, "Forme selectionnée")
  SetGadgetColor(Gadget, #PB_Gadget_BackColor, RGB(255, 255, 255))
  StringGadget(#result, 220, 100, 200, 22, "")
  
  CanvasGadget(#title, 20, 10, 400, 80)
  DrawTitle()
  
  CanvasGadget(#shape, 0, 150, 600, 120)
  DrawShape()
  
  BindGadgetEvent(#shape, @DrawShape(), #PB_EventType_MouseMove)  
  Repeat : Until WaitWindowEvent() = #PB_Event_CloseWindow 
EndIf

Procedure DrawTitle()
  If StartVectorDrawing(CanvasVectorOutput(#Title))
    VectorFont(FontID(#fontvector), 60) 
    AddPathText("Mon application")
    
    ;Remplissage du texte & contour
    VectorSourceColor(RGBA(255, 215, 0, 255))
    FillPath(#PB_Path_Preserve)
    
    VectorSourceColor(RGBA(0, 0, 0, 255))
    StrokePath(1)
    StopVectorDrawing()
  EndIf     
EndProcedure
  
Procedure DrawShape()    
  x = GetGadgetAttribute(#Shape, #PB_Canvas_MouseX)
  y = GetGadgetAttribute(#Shape, #PB_Canvas_MouseY)
  
  SetGadgetText(#Result, "")
  
  If StartVectorDrawing(CanvasVectorOutput(#Shape))       
    ;Cercle
    AddPathCircle(50, 50, 30) ;Ajout cercle
    
    If IsInsidePath(x, y, #PB_Coordinate_Device) 
      ;Curseur dans le cercle
      SetGadgetText(#result, "Cercle vert")
      VectorSourceColor(RGBA(0, 255, 0, 255))
    Else
      ;Curseur en dehors du cercle
      VectorSourceColor(RGBA(0, 0, 255, 255))
    EndIf
    FillPath() ;Remplissage avec la couleur couante
    
    ;Box
    VectorSourceColor(RGBA(255, 0, 0, 255))
    AddPathBox(200, 30, 100, 50) 
    
    If IsInsidePath(x, y, #PB_Coordinate_Device) 
      SetGadgetText(#result, "Rectangle rouge")
      VectorSourceColor(RGBA(255, 0, 0, 255))
    Else
      VectorSourceColor(RGBA(0, 0, 255, 255))
    EndIf
    FillPath() 
        
    ;Polygone
    VectorSourceColor(RGBA(0, 0, 255, 255))
    MovePathCursor(450, 20)
    AddPathLine(50, 10, #PB_Path_Relative)
    AddPathLine(10, 20, #PB_Path_Relative)
    AddPathLine(0, 30, #PB_Path_Relative)
    AddPathLine(-50, 30, #PB_Path_Relative)
    AddPathLine(-50, -30, #PB_Path_Relative)
    AddPathLine(-10, -20, #PB_Path_Relative)
    AddPathLine(50, -40, #PB_Path_Relative)
    If IsInsidePath(x, y, #PB_Coordinate_Device) 
      SetGadgetText(#result, "Polygone jaune")
      VectorSourceColor(RGBA(255, 215, 0, 255))
    Else
      VectorSourceColor(RGBA(0, 0, 255, 255))
    EndIf
    FillPath()
    
    StopVectorDrawing()
  EndIf      
EndProcedure
L'interactivité fonctionne de la même manière au pixel prés.

@Mesa: J'ai ignoré la prise en charge des DPI car c'était pas le but de cette démo.

Re: [5.40] Vecteurs et interactivité

Publié : jeu. 03/sept./2015 11:39
par Torp
Merci Falsam. En effet vraiment top cette librairie !

Re: [5.40] Vecteurs et interactivité

Publié : ven. 04/sept./2015 17:36
par Brayane
Terrible :D