PureBasic

Forums PureBasic - Français
http://forums.purebasic.com/french/

Image de fond et centrage de gadget

http://forums.purebasic.com/french/viewtopic.php?t=17355

Page 2 sur 2

Re: Image de fond et centrage de gadget

Publié : mar. 24/juil./2018 22:52
par FR4NK13
Alors lorsque je place le loadimage + le canvas gadget pour le fond ça me met un petit carré blanc dans le coin et quand je redimentionne ben ça met un fond tout blanc :/

Re: Image de fond et centrage de gadget

Publié : mer. 25/juil./2018 6:25
par Micoute
Bonjour FR4NK13, voici un exemple:

Code : Tout sélectionner

EnableExplicit

Structure canvasitem
  img.i
  X.w
  Y.w
  Width.w
  Height.w
  drag_x.w
  drag_y.w
  alphatest.b
  IsGrid.i
  Index.i
EndStructure

Enumeration
  #MyCanvas = 1   ; juste pour tester si un nombre différent de 0 fonctionne maintenant
EndEnumeration

Define Event.i, X.i, Y.i, Drag.i, hole.i, Grid.i

Define *currentItem.canvasitem
NewList Images.canvasitem()


Procedure AddImage (List Images.canvasitem(), X, Y, img, alphatest = #False, Grid = #False)
  If AddElement(Images())
    If alphatest And ImageDepth(img) < 32
      alphatest = #False
    EndIf
    
    Images()\IsGrid = Grid
    Images()\Index = ListIndex(Images())
    Images()\img    = img
    Images()\x      = X
    Images()\y      = Y
    Images()\width  = ImageWidth(img)
    Images()\height = ImageHeight(img)
    Images()\alphatest = alphatest
    
    If Grid
      MoveElement(Images(), #PB_List_First)
    EndIf
  EndIf
EndProcedure

Procedure DrawCanvas (canvas.i, List Images.canvasitem(), bgColor.l = $ffffff)
  Shared *currentItem, Drag
  Protected shadow, *i.canvasitem = *currentItem
  
    If Drag And *i
      shadow = CopyImage(*i\img, #PB_Any)
      StartDrawing(ImageOutput(shadow))
      Box(0, 0, *i\width, *i\height, 0)
      StopDrawing()
    EndIf
    
    If StartDrawing(CanvasOutput(canvas))
      Box(0, 0, GadgetWidth(canvas), GadgetHeight(canvas), bgColor)
      DrawingMode(#PB_2DDrawing_AlphaBlend)
      ForEach Images()
       *i = Images()
        If Drag And *i = *currentItem
          DrawAlphaImage(ImageID(shadow), *i\x + 3, *i\y + 3, 30)
        EndIf
        DrawImage(ImageID(*i\img), *i\x, *i\y) ; draw all images with z-order
      Next
      StopDrawing()
    EndIf
    
    If shadow
    FreeImage(shadow)
  EndIf
EndProcedure

Procedure.i HitTest (List Images.canvasitem(), X, Y) ; recherche de hit, à partir de la fin (ordre)
  Protected hit_x.w, hit_y.w, alpha.b, *i.canvasitem 
  *i = LastElement(Images())
  PushListPosition(Images())
  
  While *i
    If *i And Not *i\IsGrid
      hit_x = X - *i\x
      hit_y = Y - *i\y
      If hit_x >= 0 And hit_y >= 0 And hit_x < *i\width And hit_y < *i\height
        alpha = 255
        If *i\alphatest And StartDrawing(ImageOutput(*i\img))
          DrawingMode(#PB_2DDrawing_AlphaChannel)
          alpha = Point(hit_x, hit_y) >> 24 ; get alpha
          StopDrawing()
        EndIf
        If alpha
          Select EventType()
            Case #PB_EventType_LeftButtonDown
              MoveElement(Images(), #PB_List_Last)
              *i\drag_x = hit_x
              *i\drag_y = hit_y          
              
            Case #PB_EventType_LeftButtonUp
              PushListPosition(Images())
              Protected *Prev = SelectElement(Images(), Images()\Index)
              PopListPosition(Images())
              MoveElement(Images(), #PB_List_After, *Prev)
              
          EndSelect
          Break
        EndIf
      EndIf
    EndIf
    *i = PreviousElement(Images())
  Wend
  
  PopListPosition(Images())
  ProcedureReturn *i
  
EndProcedure

AddImage(Images(),  10, 10, LoadImage(#PB_Any, #PB_Compiler_Home + "Examples/Sources/Data/PureBasic.bmp"))
AddImage(Images(), 100,100, LoadImage(#PB_Any, #PB_Compiler_Home + "Examples/Sources/Data/GeeBee2.bmp"))
AddImage(Images(),  50,200, LoadImage(#PB_Any, #PB_Compiler_Home + "Examples/Sources/Data/AlphaChannel.bmp"))

hole = CreateImage(#PB_Any,100,100,32)
If StartDrawing(ImageOutput(hole))
  DrawingMode(#PB_2DDrawing_AllChannels)
  Box(0,0,100,100,RGBA($00,$00,$00,$00))
  Circle(50,50,48,RGBA($00,$FF,$FF,$FF))
  Circle(50,50,30,RGBA($00,$00,$00,$00))
  StopDrawing()
EndIf
AddImage(Images(),170,70,hole,#True)



If OpenWindow(0, 0, 0, 420, 420, "Déplacer/glisser Image Canvas", #PB_Window_SystemMenu | #PB_Window_ScreenCentered) = 0
  MessageRequester("Erreur fatale", "Programme terminé.")
  End
EndIf

CanvasGadget(#MyCanvas, 10, 10, 400, 400)

Define Y,X, Steps = 5
Grid = CreateImage(#PB_Any, 400, 400,32,#PB_Image_Transparent)
If StartDrawing(ImageOutput(Grid))
  DrawingMode(#PB_2DDrawing_AlphaChannel|#PB_2DDrawing_Transparent)
  For X = 0 To OutputWidth()-1
    For Y = 0 To OutputHeight()-1
      Plot(X,Y,RGBA(0,0,0,255))
      Y+Steps
    Next
    X+Steps
  Next
  StopDrawing()
EndIf

AddImage(Images(),0,0,Grid,#True, #True)

DrawCanvas(#MyCanvas, Images(), $f0fff0)


Repeat
  Event = WaitWindowEvent()
  
  If Event = #PB_Event_Gadget And EventGadget() = #MyCanvas
    Select EventType()
      Case #PB_EventType_LeftButtonDown
        X = GetGadgetAttribute(#MyCanvas, #PB_Canvas_MouseX)
        Y = GetGadgetAttribute(#MyCanvas, #PB_Canvas_MouseY)
        *currentItem = HitTest(Images(), X, Y)
        
        If *currentItem
          Debug *currentItem\Index
          Drag = #True
          DrawCanvas(#MyCanvas, Images(), $f0fff0)
        EndIf
        
      Case #PB_EventType_LeftButtonUp
        Drag = #False
        *currentItem = HitTest(Images(), X, Y)
        If *currentItem
          DrawCanvas(#MyCanvas, Images(), $f0fff0)
          ResizeImage(Images()\img, Images()\width, Images()\height)
        EndIf
        
      Case #PB_EventType_MouseMove
        X = GetGadgetAttribute(#MyCanvas, #PB_Canvas_MouseX)
        Y = GetGadgetAttribute(#MyCanvas, #PB_Canvas_MouseY)
        If Drag
          *currentItem\x = X - *currentItem\drag_x
          *currentItem\y = Y - *currentItem\drag_y
          DrawCanvas(#MyCanvas, Images(), $f0fff0)
        ElseIf HitTest(Images(), X, Y)
          SetGadgetAttribute(#MyCanvas, #PB_Canvas_Cursor, #PB_Cursor_Hand) 
        Else
          SetGadgetAttribute(#MyCanvas, #PB_Canvas_Cursor, #PB_Cursor_Default) 
        EndIf
    EndSelect
  EndIf   
Until Event = #PB_Event_CloseWindow

Re: Image de fond et centrage de gadget

Publié : mer. 25/juil./2018 7:48
par boby
Alors lorsque je place le loadimage + le canvas gadget pour le fond ça me met un petit carré blanc dans le coin et quand je redimentionne ben ça met un fond tout blanc :/
Y a il une raison particulière que je n'ai pas compris à l'utilisation d'un canevas pour afficher une image ?
Un simple ImageGadget ne te faciliterai pas la vie ?
ou encore simplement :

Code : Tout sélectionner

window = OpenWindow(#PB_Any,0,0,300,300,"bla",#PB_Window_ScreenCentered|#PB_Window_SystemMenu)
LoadImage(0,"Examples/Sources/data/Background.bmp")
StartDrawing(WindowOutput(window))
DrawImage(ImageID(0),(WindowWidth(window)-ImageWidth(0))/2,(WindowHeight(window)-ImageHeight(0))/2)
StopDrawing()
Repeat : Until  WaitWindowEvent() = #PB_Event_CloseWindow
??? Je n'arrive pas à comprendre l'utilisation du canevasgadget dans ce cas... Je passe à coté d'un truc ou souhaite on simplement consommer plus de ressource processeur et se compliquer le code avec un gadget ("compliqué") inutile simplement pour le plaisir ?

Re: Image de fond et centrage de gadget

Publié : mer. 25/juil./2018 8:04
par FR4NK13
Merci à toi aussi Micoute,

Le soucis c'est que je ne comprends rien à tous vos codes là comme ça et plus il y en a plus je suis embrouillée :oops:
Si quelqu'un pourrait me rectifier le soucis dans mon code en m'expliquant ce qu'il manque et le détail du code ce serait gentil
parce que là je suis complètement perdue :/
Je n'arrive pas à comprendre l'utilisation du canevasgadget
Eh bien, c'était MicroDev qui m'avait dit d'en mettre un.... :lol:

Re: Image de fond et centrage de gadget

Publié : mer. 25/juil./2018 9:24
par boby
Le soucis c'est que je ne comprends rien à tous vos codes là comme ça et plus il y en a plus je suis embrouillée
D'où l’intérêt de ne donner que des codes court.
Eh bien, c'était MicroDev qui m'avait dit d'en mettre un
Et je t'ai donné d'autres solutions possible, qui ME SEMBLENT plus simple d'utilisation, libre à toi de décider quel est celle qui te conviens le mieux.

Maintenant si tu veux une adaptation de ton code à ce que je crois comprendre être ta demande :

Code : Tout sélectionner

EnableExplicit
Enumeration
  #Texte
  #Fenetre_A_Propos
  #A_Propos
  #Bouton_Ferme_A_Propos
  #Texte_A_Propos1
  #Texte_A_Propos2
  #Texte_A_Propos3
 
  #Menu
  #Quitter
  #Regles
 
  #Pikachu_Sound
  #Evoli_Sound
  #Rocabot_Sound
 
  #Pikachu
  #Evoli
  #Rocabot
  #Background
EndEnumeration

;=================Loadings======================
LoadSound(#Pikachu_sound, "Pikachu.ogg")
LoadSound(#Evoli_sound, "Evoli.ogg")
LoadSound(#Rocabot_sound, "Rocabot.ogg")
LoadImage(#Pikachu, "Pikachu.BMP")
LoadImage(#Evoli, "Evoli.BMP")
LoadImage(#Rocabot, "Rocabot.BMP")
LoadImage(#Background,"Examples/Sources/Data/Background.bmp")
;================End Loadings====================

;================Declaration=====================
Declare Close()
Declare Resize()
Declare A_Propos()
Declare Regles()
Declare PlayPokemonSound()
;===============End Declaration==================
MessageRequester("Bienvenue","Amuse toi bien avec tes Pokémon !")
If OpenWindow(0,0,0,800,600,"Pokémon V.1",#PB_Window_SystemMenu|#PB_Window_ScreenCentered|#PB_Window_MaximizeGadget|#PB_Window_SizeGadget|#PB_Window_MinimizeGadget)
  
  ButtonImageGadget(#pikachu, 0, 0, 210, 280, ImageID(#pikachu))
  ButtonImageGadget(#Evoli, 0, 0, 210, 280, ImageID(#Evoli))
  ButtonImageGadget(#Rocabot, 0, 0, 210, 280, ImageID(#Rocabot))
  ImageGadget(#Background,0,0,ImageWidth(#Background),ImageHeight(#Background),ImageID(#Background))
  TextGadget(#Texte,10,10,240,30,"Salut ! Choisi ton Pokemon",#PB_Text_Center)
   
   
  CreateMenu(#Menu, WindowID(0))
  MenuTitle("Fichier")     
  MenuItem(#quitter, "Quitter")   
  
  MenuTitle("Aide")     
  MenuItem(#Regles, "Règles ")
  MenuItem(#A_Propos, "A propos")
  Resize()
  BindEvent(#PB_Event_CloseWindow,@Close())
  BindEvent(#PB_Event_SizeWindow,@Resize())
  BindMenuEvent(#Menu,#Quitter,@Close())
  BindMenuEvent(#Menu,#A_Propos,@A_Propos())
  BindMenuEvent(#Menu,#Regles,@Regles())
  BindGadgetEvent(#Pikachu,@PlayPokemonSound())
  BindGadgetEvent(#Evoli,@PlayPokemonSound())
  BindGadgetEvent(#Rocabot,@PlayPokemonSound())
EndIf
Repeat : WaitWindowEvent() : ForEver
Procedure A_Propos()
  Protected iColor.i
 
  If OpenWindow(#Fenetre_A_Propos,153,40,260,115, "A Propos", #PB_Window_TitleBar|#PB_Window_BorderLess,WindowID(0))
    ; -> Normalement mettre le gadget de la fenêtre, exemple => WindowID(#Fenetre)
   
    SetWindowColor(#Fenetre_A_propos, RGB(150,150,150)) ; ---> Change la couleur de la fenêtre 
   
    TextGadget(#Texte_A_Propos1,10, 10, 240, 20,"Pokémon, V.1",#PB_Text_Center) ; -> #PB_Text_Center -> Centre le texte dans la fenêtre  <==== ??? Bah non, centrer le texte dans le textgadget...
    TextGadget(#Texte_A_Propos2,10, 30, 240, 20,"Jeu de stratégie",#PB_Text_Center)
    TextGadget(#Texte_A_Propos3,10, 50, 240, 20,"By Salomé DURTH - 2018",#PB_Text_Center)   
       
    ButtonGadget(#Bouton_Ferme_A_Propos,110,80,40,20,"Ok")
   
    For iColor = #Texte_A_Propos1 To #Texte_A_Propos3
      SetGadgetColor(iColor,#PB_Gadget_BackColor, RGB(150,150,150))       
      SetGadgetColor(iColor,#PB_Gadget_FrontColor,RGB(255, 255, 255))
    Next     
    BindGadgetEvent(#Bouton_Ferme_A_Propos,@Close())          
  EndIf       
EndProcedure
Procedure Regles()
  MessageRequester("Règles"," Jeu de stratégie. Choisis ton Pokémon et remporte les combats. ")
EndProcedure
Procedure Resize()
  Protected width = WindowWidth(0), heigh = WindowHeight(0)
  ResizeGadget(#Background,(width-ImageWidth(#Background))/2,(heigh-ImageHeight(#Background))/2,#PB_Ignore,#PB_Ignore)
  ResizeGadget(#Texte,width/2-GadgetWidth(#Texte)/0.8,heigh/6.5-GadgetHeight(#Texte)/2,#PB_Ignore,#PB_Ignore)
  ResizeGadget(#pikachu,width/5-GadgetWidth(#Texte),heigh/3.5-GadgetHeight(#Texte)/2,#PB_Ignore,#PB_Ignore)
  ResizeGadget(#Evoli,width/2-GadgetWidth(#Texte),heigh/3.5-GadgetHeight(#texte)/2,#PB_Ignore,#PB_Ignore)
  ResizeGadget(#Rocabot,width/1.4-GadgetWidth(#Texte)/10,heigh/3.5-GadgetHeight(#Texte)/2,#PB_Ignore,#PB_Ignore)
EndProcedure
Procedure PlayPokemonSound()
  Select EventGadget()
    Case #Pikachu
      PlaySound(#Pikachu_Sound)
    Case #Evoli
      PlaySound(#Evoli_Sound)
    Case #Rocabot
      PlaySound(#Rocabot_Sound)
  EndSelect
EndProcedure
Procedure Close()
  If GetActiveWindow() = 0
    End
  Else
    CloseWindow(GetActiveWindow())
  EndIf
EndProcedure
remplace la ligne LoadImage(#Background,"Examples/Sources/Data/Background.bmp") par ton image de background et compile.

Une fois de plus je ne suis pas sur que te fournir un code complet te soit d'une grande aide pour te faire progresser, mais puis-ce que c'est ce que tu demande, voici comment moi, je m'y prendrai.

Re: Image de fond et centrage de gadget

Publié : mer. 25/juil./2018 9:40
par microdevweb
@boby,

Pourquoi un canvas, simplement parce qu’il peut être utilisé comme container au contraire d'un simple image gadget.

@FR4NK13,

Je penses que tu essaies de brûler les étapes, tous le monde est passé par la et l'impatience fait que l'on est vite perdu.

Il ne suffit pas de recopier un code pour avancé, c'est en cherchant que l'on fais travailler sa logique et pierre par pierre on agrandis ses connaissances.

En toute logique chaque instruction employée doit être maîtrisée et connue, avant de vouloir intégré des sons des images ou même ouvrir une fenêtre tu dois jonglé avec des variables des instructions conditionnels boucles etc.

A l'école on passe de nombreux mois voir même plus d'un ans avant d'aborder une ui (interface graphique).

Donc je ne saurais trop te conseiller de revenir au base au fin de fortifier tes connaissances en logique de programmation.
Fuseau horaire sur UTC+01:00
Page 2 sur 2

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

Traduction française officielle © Qiaeru