PureBasic

Forums PureBasic - Français
https://www.purebasic.fr/french/

Canva avec forme personnalisable

https://www.purebasic.fr/french/viewtopic.php?t=16658

Page 1 sur 2

Canva avec forme personnalisable

Publié : dim. 23/avr./2017 16:43
par Shadow
Salut,

Se serais vraiment bien on pouvais donner une forme voulue en canvas.
Par exemple Ronde, Triangle ou même polygonale !

Re: Canva avec forme personnalisable

Publié : dim. 23/avr./2017 17:22
par Ar-S
En natif ça ne sera pas possible. Tout comme un bouton rond.
L’intérêt du canvas est de pouvoir mettre du graphisme dessus, donc tu peux très bien créer un canvas carré qui aura un fond couleur fenêtre et une forme géométrique à l’intérieur. ça donnera l'illusion d'un bouton non carré.

Re: Canva avec forme personnalisable

Publié : dim. 23/avr./2017 17:52
par Shadow
Oui mais c'est pas très propre, a cause des coins :/

Re: Canva avec forme personnalisable

Publié : dim. 23/avr./2017 19:42
par Ar-S
Il ni a rien de "pas très propre, a cause des coins"
Ou commence le gadget ? Ou finit le gadget ?

Code : Tout sélectionner

Enumeration
  #Win
  #C
EndEnumeration

Procedure exit()
  End
EndProcedure

Procedure DR()
  StartDrawing(CanvasOutput(#C))
  Box(0,0,300,200,$FFFFFF)
  Circle(80,70,60,#Red)
  StopDrawing()
EndProcedure


OpenWindow(#win,#PB_Ignore,#PB_Ignore,300,160,"",#PB_Window_ScreenCentered|#PB_Window_SystemMenu)
SetWindowColor(#Win,$FFFFFF)

CanvasGadget(#C,1,1,200,150)
DR()
BindEvent(#PB_Event_CloseWindow, @Exit() )

Repeat 
   WaitWindowEvent() 
ForEver

Re: Canva avec forme personnalisable

Publié : dim. 23/avr./2017 20:07
par GallyHC
Bonjour,

J'imagine mal un "canvas" autre que rectangulaire, juste sur le fait des calculs a faire pour obtenir les bords. Après je penses que la mémoire est lineaire et qu'un rectangle est la seul chose possible (à part une ligne). A mon avis ce que tu demande ressemble plus à une transparence avec le fond (fenêtre et touts objets en dessous).

Cordialement,
GallyHC

Re: Canva avec forme personnalisable

Publié : dim. 23/avr./2017 20:43
par SPH
Bien dit Gally 8)

Re: Canva avec forme personnalisable

Publié : lun. 24/avr./2017 8:13
par Shadow
Si tu clique sur la partie transparente, dans les coins, alors tu est encore sur le Bouton !

Re: Canva avec forme personnalisable

Publié : lun. 24/avr./2017 8:50
par Micoute
Quel est l'imbécile qui clique sur les coins d'un cercle ?

Re: Canva avec forme personnalisable

Publié : lun. 24/avr./2017 9:01
par Zorro
:lol: :lol:

Re: Canva avec forme personnalisable

Publié : lun. 24/avr./2017 12:10
par JohnJohnsonSHERMAN
:mrgreen: :mrgreen: :mrgreen:

@Shadow :
Tu pourrais toujours te protéger de cela en faisant des calculs extrêmement compliqués à base de sinus et de cosinus, pour déterminer si tu est ou non dans le fameux cercle au moment du clic :P

Re: Canva avec forme personnalisable

Publié : lun. 24/avr./2017 12:32
par falsam
La solution est de passer par la lib vector. Un exemple avec ce code. Passe le souris sur le cercle le rectangle et le polygone.

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

Re: Canva avec forme personnalisable

Publié : lun. 24/avr./2017 13:45
par Shadow
Magnifique Falsam :D :wink:
Merci.

Re: Canva avec forme personnalisable

Publié : lun. 24/avr./2017 14:10
par Zorro
JohnJohnsonSHERMAN a écrit ::mrgreen: :mrgreen: :mrgreen:

@Shadow :
Tu pourrais toujours te protéger de cela en faisant des calculs extrêmement compliqués à base de sinus et de cosinus, pour déterminer si tu est ou non dans le fameux cercle au moment du clic :P
:lol: il serai plus simple alors de calculer la distance du pointeur par rapport au centre du cercle non ??

parceque c'est un cercle, et que du coup ,forcement si on mesure la distance par rapport au centre on se trouve obligatoirement au dehors ou en dedans
pas de sinus ou de trucmuch compliqué :lol:

la methode architecte de cleopatre (Asterix)

Re: Canva avec forme personnalisable

Publié : lun. 24/avr./2017 20:03
par JohnJohnsonSHERMAN
@Dobro : En fait t'as raison... Jai zappé un truc super utile qu'on utilise souvent... le théoréme de Pythagore :P

Pour exprimer la distance entre le pointeur et le centre du cercle, il faut convertir des coordonnées cartésiennes (x,y) en coordonnées polaires (angle,rayon) pour avoir la distance centre-pointeur... Et pour ca il faut et il suffit de quelques calculs simples : théoréme de Pythagore

Prenons le triangle rectangle formé par le centre du cercle A, un point B situé sur l'axe des abscisses et un point C situé à l'emplacement du pointeur. On a donc un triangle rectangle.
Image

Il est simplissime de calculer la longueur AC de l'hypoténuse (et aussi distance entre le pointeur et le centre du cercle) :
AC² = AB² + BC²
<=>AC = sqrt(AB² + BC²)

Si l'on extrapole cela à notre probléme ca donne :

Code : Tout sélectionner

rayon = Sqrt(Pow(centreX-pointeurX, 2) + Pow(centreY+pointeurY, 2))
Simple non? Et pourtant je l'avais oublié... :)

Re: Canva avec forme personnalisable

Publié : lun. 24/avr./2017 21:32
par Ar-S
Ou travailler en détectant la couleur du cercle... 0 calcul..
Bref faut se creuser un peu la tête.. Les solutions sont là.
Fuseau horaire sur UTC+01:00
Page 1 sur 2

Développé par phpBB® Forum Software © phpBB Limited

Traduction française officielle © Qiaeru