Image de fond et centrage de gadget

Informations pour bien débuter en PureBasic
FR4NK13
Messages : 72
Inscription : mar. 03/juil./2018 9:30

Re: Image de fond et centrage de gadget

Message 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 :/
Avatar de l’utilisateur
Micoute
Messages : 2522
Inscription : dim. 02/oct./2011 16:17
Localisation : 35520 La Mézière

Re: Image de fond et centrage de gadget

Message 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
Microsoft Windows 10 Famille 64 bits : Carte mère : ASRock 970 Extreme3 R2.0 : Carte Graphique NVIDIA GeForce RTX 3080 : Processeur AMD FX 6300 6 cœurs 12 threads 3,50 GHz PB 5.73 PB 6.00 LTS (x64)
Un homme doit être poli, mais il doit aussi être libre !
boby
Messages : 261
Inscription : jeu. 07/juin/2007 22:54

Re: Image de fond et centrage de gadget

Message 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 ?
FR4NK13
Messages : 72
Inscription : mar. 03/juil./2018 9:30

Re: Image de fond et centrage de gadget

Message 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:
boby
Messages : 261
Inscription : jeu. 07/juin/2007 22:54

Re: Image de fond et centrage de gadget

Message 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.
Avatar de l’utilisateur
microdevweb
Messages : 1798
Inscription : mer. 29/juin/2011 14:11
Localisation : Belgique

Re: Image de fond et centrage de gadget

Message 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.
Windows 10 64 bits PB: 5.70 ; 5.72 LST
Work at Centre Spatial de Liège
Répondre