Spostare con il mouse un'immagine all'interno di una PictureBox

Lo spostamento di un'immagine è operazione che in modo più corretto va adottata con una DrawingArea. ^{[nota 1]}

Ad ogni modo nella presente pagina cercheremo di ottenere l'effetto del movimento con il mouse di una immagine posta in una PictureBox, evitando di muovere tale Controllo grafico, per ottenere l'effetto visivo dello spostamento dell'immagine caricata.

Bisogna considerare che la PictureBox è un area da disegno rigida, nel senso che non è possibile assegnare coordinate x e y, ove far apparire al suo interno l'immagine caricata.
L'unica possibilità in tal senso è quella di usare la Proprietà ".Alignment" della PictureBox, che però posiziona l'immagine caricata soltanto in coordinate prestabilite e fisse della PictureBox.

In questa pagina prenderemo in considerazione due casi nei quali muovere con il mouse una immagine caricata in una PictureBox:
1) spostare l'immagine all'interno di un Oggetto Image originario, ossia appartenente e di dimensioni pari all'immagine medesima;
2) spostare l'immagine all'interno di un Oggetto Image di dimensioni superiori all'immagine medesima.

Muovere un'immagine all'interno del suo stesso Oggetto Image

In questo caso lo spostamento con il mouse dell'immagine avverrà del suo stesso Oggetto Image di dimensioni pari all'immagine caricata.

Private PictureBox1 As PictureBox
Private im As Image
Private rc As Rect
Private x As Short
Private y As Short


Public Sub Form_Open()

  im = Image.Load("/usr/share/gambas3/control/gb.term.form/termradiobutton.png")

  Me.Resize(im.W, im.H)

  rc = New Rect(0, 0, Me.W, Me.H)

  With PictureBox1 = New PictureBox(Me) As "PictureBox1"
    .Move(0, 0, im.W, im.H)
    .Image = im.Copy(rc.X, rc.Y, rc.W, rc.H)
    .Background = Color.SoftYellow
  End With

End


Public Sub PictureBox1_MouseDown()

' I dati seguenti, utili per lo spostamento dell'immagine, sono raccolti, soltanto se si è cliccato nella immagine da muovere:
  With rc
    If Not .Contains(Mouse.X, Mouse.Y) Then Return
    x = Mouse.X - .X
    y = Mouse.Y - .Y
  End With

End


Public Sub PictureBox1_MouseUp()

  PictureBox1.Mouse = Mouse.Default 

End


Public Sub PictureBox1_MouseMove()

  With rc
' Lo spostamento avviene, soltanto se si è cliccato nella immagine da muovere:
    If Not .Contains(Mouse.X, Mouse.Y) Then Return
' Sono quindi raccolti i seguenti dati utili per lo spostamento dell'immagine:
    .X = Mouse.X - x
    .Y = Mouse.Y - y
  End With

  PictureBox1.Mouse = 18

  With PictureBox1
' Impedisce che il movimento rapido dell'immagine lasci tracce visibili del movimento precedente:
    .Image = PictureBox1.Image.Fill(PictureBox1.Background)
' Effettua lo spostamento dell'immagine all'interno dell'immagine ospitante:
    .Image = PictureBox1.Image.DrawImage(im, rc.X, rc.Y, rc.W, rc.H)
  End With

End

Muovere un'immagine all'interno di un Oggetto Image di dimensioni superiori all'immagine medesima

In questo caso si procederà come segue:
1) si posizionerà ovviamente un'unica PictureBox sul Form;
2) poiché è possibile assegnare un'immagine all'interno di un'altra immagine, alle coordinate volute, si creerà un Oggetto Image avente dimensioni superiori all'immagine da caricare, ad esempio di dimensioni uguale alla PictureBox.
3) si attribuirà a tale Oggetto Image di base il medesimo colore di sfondo della PictureBox, affinché durante lo spostamento dell'immagine, caricata, non restino tracce visibili del movimento precedente;
4) tale Oggetto Image, pertanto, ospiterà la vera immagine, della quale a noi interessa mostrare lo spostamento nella PictureBox;
5) si disegnerà mediante il Metodo ".DrawinImage()", richiamato dall'Oggetto Image base, creato e descritto al precedente punto 2);
6) con l'Evento "_MouseMove()" della PictureBox si procederà allo spostamento dell'immagine, che ci interessa, all'interno di quella più grande ospitante.

Mostriamo un esempio pratico:

Private PictureBox1 AS PictureBox
Private im AS Image
Private im2 AS Image
Private rc As Rect
Private x As Short
Private y As Short


Public Sub Form_Open()

  With Me
    .W = Screen.AvailableWidth * 0.5
    .H = Screen.AvailableHeight * 0.5
  End With

  With PictureBox1 = New PictureBox(Me) As "PictureBox1"
    .W = Me.W
    .H = Me.H
    .Background = Color.SoftYellow
  End With

  im = New Image(PictureBox1.W, PictureBox1.H, PictureBox1.Background, Image.Standard)
  im2 = Image.Load("/usr/share/gambas3/control/gb.term.form/termradiobutton.png")

  rc = New Rect((PictureBox1.W / 2) - (im2.W / 2), (PictureBox1.H / 2) - (im2.H / 2), im2.W, im2.H)

' Pone l'immagine, da spostare, al centro della sua immagine ospitante vuota, facendola apparire al centro del "Form":
  PictureBox1.Image = im.DrawImage(im2, rc.X, rc.Y, rc.W, rc.H)

End


Public Sub PictureBox1_MouseDown()

' I dati seguenti, utili per lo spostamento dell'immagine, sono raccolti, soltanto se si è cliccato nella immagine da muovere:
  With rc
    If Not .Contains(Mouse.X, Mouse.Y) Then Return
    x = Mouse.X - .X
    y = Mouse.Y - .Y
  End With

End


Public Sub PictureBox1_MouseUp()

  PictureBox1.Mouse = Mouse.Default 

End


Public SUB PictureBox1_MouseMove()

  With rc
' Lo spostamento avviene, soltanto se si è cliccato nella immagine da muovere:
    If Not .Contains(Mouse.X, Mouse.Y) Then Return
' Sono quindi raccolti i seguenti dati utili per lo spostamento dell'immagine:
    .X = Mouse.X - x
    .Y = Mouse.Y - y
  End With

  PictureBox1.Mouse = 18

' Impedisce che il movimento rapido dell'immagine lasci tracce visibili del movimento precedente:
  im = im.Fill(PictureBox1.Background)

' Effettua lo spostamento dell'immagine all'interno dell'immagine ospitante:
  PictureBox1.Image = im.DrawImage(im2, rc.X, rc.Y, rc.W, rc.H)

End

Note

[1] vedere al riguardo la seguente pagina: Spostare con il mouse un'immagine caricata in una DrawingArea