clic sur une image avec rotation

Partagez votre expérience de PureBasic avec les autres utilisateurs.
Avatar de l’utilisateur
blendman
Messages : 2017
Inscription : sam. 19/févr./2011 12:46

clic sur une image avec rotation

Message par blendman »

salut

Voici un petit code pour savoir si on a cliqué à l'intérieur d'une image qui a eu une rotation.

Une autre utilisation possible, c'est d'utiliser cette technique pour savoir si on a cliqué sur un sprite qui a une rotation, ou si un autre sprite est entré en collision avec.
Car comme on récupère les coordonnées dans l'image, rien ne nous empêche ensuite de vérifier avec un point(x,y) si on est sur de l'alpha=0 ou pas (donc, s'il y a collision, avec des images avec canal alpha).
Je ferais peut-être un autre code qui montre la collision entre 2 sprites avec rotation (et cette technique) si je trouve le temps ^^.

En attendant, voici le code :

Code : Tout sélectionner

; Clic on rotated Image or rectangle
; blendman 10.2021, PB5.73

Procedure DrawCanvas(mx,my)
  
  x1=500
  y1=50
  w1 = 200
  h1 = 50
  angle = 60
  
  ; to see the debug technique
  SeeDebug =0
  
  If StartVectorDrawing(CanvasVectorOutput(0))
    ; Background
    AddPathBox(0,0,GadgetWidth(0),GadgetHeight(0))
    VectorSourceColor(RGBA(255, 255,255,255))
    FillPath()
    
    ; To see the original
    If SeeDebug = 1
      ; original image
      AddPathBox(x1, y1, w1, h1)
      VectorSourceColor(RGBA(255, 0, 0, 10))
      StrokePath(10)
      
      Cos.f = Cos(Radian(Angle))
      Sin.f = Sin(Radian(Angle))
      ;     x3 = X1*Cos-Y1*Sin
      ;     y3 = X1*Sin+Y1*Cos
      
      ; draw rectangle rotated
      AddPathBox(x1,y1,5,5)
      xa = w1
      ya = 0
      x3 = Xa*Cos-Ya*Sin + X1
      y3 = Xa*Sin+Ya*Cos + y1
      AddPathBox(x3,y3,5,5)
      xa = w1
      ya = h1
      x3 = Xa*Cos-Ya*Sin + X1
      y3 = Xa*Sin+Ya*Cos + y1
      AddPathBox(x3,y3,5,5)
      xa = 0
      ya = h1
      x3 = Xa*Cos-Ya*Sin + X1
      y3 = Xa*Sin+Ya*Cos + y1
      AddPathBox(x3,y3,5,5)
      VectorSourceColor(RGBA(0, 0, 255, 150))
      FillPath()
      
      AddPathBox(mx+ X1,my+ y1,5,5)
      VectorSourceColor(RGBA(0, 255, 0, 255))
      FillPath()
      
    EndIf
  
    ; rotated image
    RotateCoordinates(x1,y1,angle)
    MovePathCursor(x1,y1)
    DrawVectorImage(ImageID(0),255,w1,h1)
    ;AddPathBox(x1, y1, w1, h1)
    ;VectorSourceColor(RGBA(0, 0, 0, 100))
    ;StrokePath(10)
   
    StopVectorDrawing()
  EndIf

EndProcedure
Procedure GetClicOnImageRotated(mx,my,imagex,imagey,imageangle,imagew,imageh)
  xa = mx-imagex
  ya = my-imagey
  
  Cos.f = Cos(Radian(-imageangle))
  Sin.f = Sin(Radian(-imageangle))
  x = Xa*Cos-Ya*Sin 
  y = Xa*Sin+Ya*Cos 
  
  ; Debug Str(x)+"/"+Str(y)
  
  If x>=0 And x<=imagew And y>=0 And y<=imageh
    Debug "clic on the rectangle"
     ; DrawCanvas(x,y)
    ProcedureReturn 1
  EndIf
 
EndProcedure

w = 1000
h = 600
If OpenWindow(0, 0, 0, w, h, "clic on rotated image", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
  CanvasGadget(0, 0, 0, w, h)
  LoadImage(0, #PB_Compiler_Home + "Examples\Sources\Data\GeeBee2.bmp")

  x1 = 500
  y1 = 50
  w1 = 200
  h1 = 50
  angle = 60
  DrawCanvas(mx,my)
  Repeat
    Event = WaitWindowEvent(1)
    If event = #PB_Event_Gadget
      If EventGadget() = 0
        If EventType() = #PB_EventType_LeftButtonDown
          x = GetGadgetAttribute(0, #PB_Canvas_MouseX)
          y = GetGadgetAttribute(0, #PB_Canvas_MouseY)
          GetClicOnImageRotated(x,y,x1,y1,angle,w1,h1)
        EndIf
        
      EndIf
      
    EndIf
    
  Until Event = #PB_Event_CloseWindow
EndIf
A+
Avatar de l’utilisateur
threedslider
Messages : 393
Inscription : dim. 01/juil./2018 22:38

Re: clic sur une image avec rotation

Message par threedslider »

Hello Blendman !

J'ai essayé de cliquer l'image ne fait pas la rotation ? Juste un message debug comme quoi on l'a cliqué. L'alpha est rose pas encore transparente...

Voilà l'info si tu peux debuger ou corriger ton code :wink:

Intéresser de voir ton évolution et l’amélioration de cette image en rotation.

Happy coding !
Avatar de l’utilisateur
blendman
Messages : 2017
Inscription : sam. 19/févr./2011 12:46

Re: clic sur une image avec rotation

Message par blendman »

salut
threedslider a écrit : dim. 10/oct./2021 12:07 J'ai essayé de cliquer l'image ne fait pas la rotation ? Juste un message debug comme quoi on l'a cliqué. L'alpha est rose pas encore transparente...

Voilà l'info si tu peux debuger ou corriger ton code :wink:
Heu... comment dire :)
Hé bien, oui le code fait exactement ce qu'il est sensé faire :D
Il n'y a pas de bug ^^.

Le but de ce code, je l'avais noté dans le 1er message : "Voici un petit code pour savoir si on a cliqué à l'intérieur d'une image qui a eu une rotation."

Donc, lorsque tu cliques sur l'image, tu as un message du debugger pour te dire que tu as cliqué sur l'image.
Et c'est tout, car c'est l'objectif du code "savoir si on a cliqué sur l'image" :).
La difficulté, c'est de cliquer sur une image qui a été rotationnée (qui a eu une rotation).
Sur une image normale, c'est très facile de savoir si on a cliqué dessus : on connaît sa position et sa taille et on vérifie si on a cliqué dans le rectangle formé par cette image.
Mais si une image a une rotation, là, c'est très différent, car il faut prendre en plus la rotation, donc calculer avec les cos et sin etc. je n'ai jamais trouvé de codequi permet de savoir si on a cliqué sur une image avec une rotation, donc j'ai posté celui que j'ai fait :).

Concernant "l'alpha", pas de bug non plus ^^. L'image n'a pas de canal alpha, puisque c''est une image BMP ^^ (c'est une image du dossier purebasic).
La couleur rose, c'est lorsque certains se servent de sprite où on peut définir la couleur de transparence (avec TransparentSpriteColor(#Sprite, Couleur)).
Mais là, je ne me sers pas de sprite, mais de la vectorlib (on peut utiliser des sprites, ça ne change rien au code pour cliquer sur une image avec rotation).

Voilà :)
Répondre