GLISSER-DEPOSER : déplacer un PICTURE

Sujet: GLISSER-DEPOSER : déplacer un PICTURE Mar 30 Jan 2024 - 18:30

Bonjour à tous !

Je vous propose trois petits programmes sur le thème du GLISSER-DEPOSER.
Le support est le FORM 0 et l’objet à déplacer est un PICTURE.

Code:: ' Déplacer un objet à l'aide de la souris
' Marc - Janvier 2024
' Ecrit en langage PANORAMIC 0.9.29i9

dim objet%, number_mouse_down, last_souris_x%, last_souris_y%
dim null%, souris_x%, souris_y%, souris_move_x%, souris_move_y%

label deplacerObjet

color 0,0,0,0
CAPTION 0,"Glisser-déposer un objet"

' créer un objet PICTURE
picture 1
width 1,50
height 1,50
top 1,150
left 1,150
on_mouse_down 1,deplacerObjet

end
' ------------------------------------------------------------------------------
deplacerObjet:
   ' identification de l'objet qui est cliqué avec la souris
   objet% = number_mouse_down

   ' sortir de la procédure si c'est le bouton droit de la souris qui a été enfoncé
   if mouse_right_down(objet%) = 1
   ' réinitialiser les fonctions
   null% = mouse_left_up(objet%)
   null% = mouse_left_down(objet%)
   null% = mouse_right_up(objet%)
   null% = mouse_right_down(objet%)
   return
   end_if

   ' déactiver la détection d'appui sur un bouont de la souris
   off_mouse_down objet%

   ' boucle active tant que le bouton gauche de la souris reste appuyé
   while mouse_left_up(objet%) = 0
   souris_x% = mouse_x_position(objet%)
   souris_y% = mouse_y_position(objet%)

   if souris_x% <> last_souris_x% or souris_y% <> last_souris_y%
   souris_move_x% = souris_x% - mouse_x_left_down(objet%)
   souris_move_y% = souris_y% - mouse_y_left_down(objet%)
   end_if

   left objet%, left(objet%) + souris_move_x%
   last_souris_x% = souris_x%
   souris_move_x% = 0

   top objet%, top(objet%) + souris_move_y%
   last_souris_y% = souris_y%
   souris_move_y% = 0

   ' ralentissement de la boucle WHILE pour ne past0 affoler le processeur
   pause 20
   end_while

   ' rétablir la détection de l'appui d'un bouton de la souris sur l'objet
   on_mouse_down objet%,deplacerObjet

   ' réinitialiser les fonctions
   null% = mouse_left_up(objet%)
   null% = mouse_left_down(objet%)
   null% = mouse_right_up(objet%)
   null% = mouse_right_down(objet%)
return

Capture d'écran:

Dans l’exemple qui suit, des limites ont été ajoutées pour ne pas pouvoir approcher un PICTURE à moins de 20 pixels des bords. La routine du glisser-déposer est mise sous forme de SUB, ce qui permet de supprimer toutes les variables globales.

Code:: ' Glisser-déposer d'un objet à l'aide de la souris
' Limitation du déplacement à 20 pixels des bords
' Marc - Janvier 2024
' Ecrit en langage PANORAMIC 0.9.29i9

label deplacerObjet

color 0,0,0,0
caption 0,"Glisser-déposer un objet PICTURE + limitations de déplacement + routine SUB"

' créer un objet PICTURE
picture 1
width 1,90
height 1,50
top 1,150
left 1,150
on_mouse_down 1,deplacerObjet

end
' ------------------------------------------------------------------------------
deplacerObjet:
   moveItem()
return
' ------------------------------------------------------------------------------
sub moveItem()
   dim_local objet%, x_objet%, y_objet%, number_mouse_down, last_souris_x%, last_souris_y%
   dim_local null%, souris_x%, souris_y%, souris_move_x%, souris_move_y%

   ' identification de l'objet qui est cliqué avec la souris
   objet% = number_mouse_down

   ' sortir de la procédure si c'est le bouton droit de la souris qui a été enfoncé
   if mouse_right_down(objet%) = 1
   ' réinitialiser les fonctions
   null% = mouse_left_up(objet%)
   null% = mouse_left_down(objet%)
   null% = mouse_right_up(objet%)
   null% = mouse_right_down(objet%)
   exit_sub
   end_if

   ' déactiver la détection d'appui sur un bouont de la souris
   off_mouse_down objet%

   ' boucle active tant que le bouton gauche de la souris reste appuyé
   while mouse_left_up(objet%) = 0
   souris_x% = mouse_x_position(objet%)
   souris_y% = mouse_y_position(objet%)

   if souris_x% <> last_souris_x% or souris_y% <> last_souris_y%
   souris_move_x% = souris_x% - mouse_x_left_down(objet%)
   souris_move_y% = souris_y% - mouse_y_left_down(objet%)
   end_if

   x_objet% = left(objet%) + souris_move_x%
   y_objet% = top(objet%) + souris_move_y%

   ' créer une limite haute à 20 pixels du bord
   if y_objet% < 20
   y_objet% = 20
   end_if

   ' créer une limite gauche à 20 pixels du bord
   if x_objet% < 20
   x_objet% = 20
   end_if

   ' créer une limite basse à 20 pixels du bord
   if y_objet% > height_client(0) - height(objet%) - 20
   y_objet% = height_client(0) - height(objet%) - 20
   end_if

   ' créer une limite droite à 20 pixels du bord
   if x_objet% > width_client(0) - width(objet%) - 20
   x_objet% = width_client(0) - width(objet%) - 20
   end_if

   left objet%,x_objet%
   last_souris_x% = souris_x%
   souris_move_x% = 0

   top objet%,y_objet%
   last_souris_y% = souris_y%
   souris_move_y% = 0

   ' ralentissement de la boucle WHILE pour ne pas affoler le processeur
   pause 20
   end_while

   ' rétablir la détection de l'appui d'un bouton de la souris sur l'objet
   on_mouse_down objet%,deplacerObjet

   ' réinitialiser les fonctions
   null% = mouse_left_up(objet%)
   null% = mouse_left_down(objet%)
   null% = mouse_right_up(objet%)
   null% = mouse_right_down(objet%)
end_sub

Le dernier code-source met en scène 5 PICTURES ainsi qu’une grille magnétique pour l’alignement automatique des PICTURES.

Code:: ' Démo : Déplacer des PICTUREs à l'aide de la souris avec limitation à 20 pixels des bords
' Alignement automatique des PICTUREs sur une grille magnétique
' Marc - Janvier 2024
' Ecrit en langage PANORAMIC 0.9.29i9

label deplacerObjet

full_space 0
caption 0,"Démo : déplacer des PICTUREs sur la FORM 0 avec alignement automatique sur une grille"

creerGrileMagnetique()

creerCinqPictures()

end
' ------------------------------------------------------------------------------
sub creerGrileMagnetique()
   dim_local n%
   ' créer la grille magnétique avec un pas de 20 pixels
   picture 10
   full_space 10
   color 10,240,240,240
   hide 10
   2d_target_is 10
   2d_pen_color 220,220,250
   ' dessiner les lignes verticales
   for n% = -1 to width_client(0) step 20
   2d_line n%,0,n%,height_client(0)
   next n%
   ' dessiner les lignes horizontales
   for n% = -1 to width_client(0) step 20
   2d_line 0,n%,width_client(0),n%
   next n%
end_sub
' ------------------------------------------------------------------------------
sub creerCinqPictures()
   ' créer quelques objets PICTUREs
   picture 1 : top 1,150 : left 1,150 : height 1,180 : color 1,255,255,0
   on_mouse_down 1,deplacerObjet

   picture 2 : width 2,80 : top 2,350 : left 2,120 : color 2,150,0,0
   on_mouse_down 2,deplacerObjet

   picture 3 : top 3,120 : left 3,300 : color 3,0,0,150
   on_mouse_down 3,deplacerObjet

   picture 4 : top 4,400 : left 4,300 : color 4,0,150,0
   on_mouse_down 4,deplacerObjet

   picture 5 : top 5,260 : left 5,400 : width 5,210 : color 5,255,0,255
   on_mouse_down 5,deplacerObjet
end_sub
' ------------------------------------------------------------------------------
deplacerObjet:
   moveItem()
return
' ------------------------------------------------------------------------------
sub moveItem()
   dim_local objet%, x_objet%, y_objet%, number_mouse_down, last_souris_x%, last_souris_y%
   dim_local null%, souris_x%, souris_y%, souris_move_x%, souris_move_y%

   ' identification de l'objet qui est cliqué avec la souris
   objet% = number_mouse_down

   ' sortir de la procédure si c'est le bouton droit de la souris qui a été enfoncé
   if mouse_right_down(objet%) = 1
   ' réinitialiser les fonctions
   null% = mouse_left_up(objet%)
   null% = mouse_left_down(objet%)
   null% = mouse_right_up(objet%)
   null% = mouse_right_down(objet%)
   exit_sub
   end_if

   ' déactiver la détection d'appui sur un bouont de la souris
   off_mouse_down objet%

   ' boucle active tant que le bouton gauche de la souris reste appuyé
   while mouse_left_up(objet%) = 0

   ' afficher le grille magnétique
   show 10

   souris_x% = mouse_x_position(objet%)
   souris_y% = mouse_y_position(objet%)

   if souris_x% <> last_souris_x% or souris_y% <> last_souris_y%
   souris_move_x% = souris_x% - mouse_x_left_down(objet%)
   souris_move_y% = souris_y% - mouse_y_left_down(objet%)
   end_if

   x_objet% = left(objet%) + souris_move_x%
   y_objet% = top(objet%) + souris_move_y%

   ' créer une limite haute à 20 pixels du bord
   if y_objet% < 20
   y_objet% = 20
   end_if

   ' créer une limite gauche à 20 pixels du bord
   if x_objet% < 20
   x_objet% = 20
   end_if

   ' créer une limite basse à 20 pixels du bord
   if y_objet% > height_client(0) - height(objet%) - 20
   y_objet% = height_client(0) - height(objet%) - 20
   end_if

   ' créer une limite droite à 20 pixels du bord
   if x_objet% > width_client(0) - width(objet%) - 20
   x_objet% = width_client(0) - width(objet%) - 20
   end_if

   left objet%,x_objet%
   last_souris_x% = souris_x%
   souris_move_x% = 0

   top objet%,y_objet%
   last_souris_y% = souris_y%
   souris_move_y% = 0

   display

   ' ralentissement de la boucle WHILE pour ne pas affoler le processeur
   pause 20
   end_while

   ' Ajustage du PICTURE sur la grille magnétique
   x_objet% = int(0.5+x_objet%/20)*20
   y_objet% = int(0.5+y_objet%/20)*20
   left objet%,x_objet%
   top objet%,y_objet%

   ' Petite pause juste pour voir furtivement l'ajustement sur la grille
   pause 100

   ' rétablir la détection de l'appui d'un bouton de la souris sur l'objet
   on_mouse_down objet%,deplacerObjet

   ' cacher le grille magnétique
   hide 10

   ' réinitialiser les fonctions
   null% = mouse_left_up(objet%)
   null% = mouse_left_down(objet%)
   null% = mouse_right_up(objet%)
   null% = mouse_right_down(objet%)
end_sub

GLISSER-DEPOSER : déplacer un PICTURE Glisse12

Bonne programmation à tous !

Nombre de messages : 2709 Date d'inscription : 13/09/2009

C'est intéressant !!!
Et beaucoup plus pointu que ce que j'ai fait dans Puzzles-ABCD et Tangram.
Le problème, c'est que je l'ai fait non avec des picture, mais avec sprites sur un scene2d,
(ce qui a l'avantage de pouvoir utiliser des pièces pas exclusivement rectangulaires)
et je me demande si ta méthode marcherait dans ce cas de figure.
scratch

Parce que le problème qui se pose à moi, c'est que :
- le Puzzles-ABCD marche bien partout,
- mais le Tangram semble plus « lourd »
s'il marche bien avec la souris d'un ordinateur rapide,
il marche moins bien avec un ordinateur lent fonctionnant en tactile.
Ce qui ne va pas, c'est que que quand on fait glisser une pièce, elle ne bouge pas,
sauf si on garde le doigt immobile longtemps (l'équivalent d'un clic droit)
où après cela, ça marche bien.
Et si on utilise l'ordi tactile avec un crayon graphique (ou une souris externe), là ça marche impecc...
Peut-être ta méthode est-elle moins « lourde » ?
J'ai essayé de la transformer, mais on ne peut pas faire un on_mous_down individuellement sur un sprite...
scratch

Nombre de messages : 2709 Date d'inscription : 13/09/2009

@ Marc
J'ai examiné des démonstrations
et c'est marrant, il n'y a pas de on_mouse_move
et pourtant, le résultat est le même.
Et petite question, à quoi sert de réinitialiser :
null% = ... ?
Est-ce que ça évite des erreurs ou permet de fonctionner plus vite ?
scratch

Bonjour JJN4 !

Citation :: Et petite question, à quoi sert de réinitialiser :
null% = ... ?

Pour remettre les 4 fonctions à "0" avant d'entrer dans une boucle de lecture.
Si une des fonctions est restée à "1" avant d'entrer dans la boucle, elle sera immédiatement détectée alors qu'il n'y a pas de bouton-souris enfoncé !

Je viens de mettre un petit tuto à ce sujet dans la rubrique "Bavardage".

@JJN4

Pour Tangram, tu ne peux pas utiliser de PICTUREs faute de disponibilité d’une couleur de transparence.

» déplacer des picture avec la souris
» déplacer des picture avec la souris
» Glisser des fichiers sources sur la fenêtre de l'éditeur
» Déplacer dynamiquement un objet dans une form
» Déplacer la coloration bleue des cellules d'un grid