9 Replies - 6035 Views - Last Post: 24 February 2014 - 08:03 AM Rate Topic: -----

#1 c670   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 17-February 14

Rubber band circle in picture box

Posted 17 February 2014 - 11:59 AM

Hi,

Can anyone tell me how to add a fixed size rubber band circle on a picture box. I have found many examples on how to add it to a form when the mouse it clicked but am unsure of how to put it on a picture box and make it a fixed size.

Any help or guidance would be much appreciated!

Thanks in advance!
Is This A Good Question/Topic? 0
  • +

Replies To: Rubber band circle in picture box

#2 modi123_1   User is online

  • Suitor #2
  • member icon



Reputation: 14097
  • View blog
  • Posts: 56,497
  • Joined: 12-June 08

Re: Rubber band circle in picture box

Posted 17 February 2014 - 12:04 PM

It's the same principle.. over ride the draw of what container you are looking to add it to, feed the coordinates to the 'paint' method, and draw your dashed item.

http://www.dreaminco...bberband-shape/
Was This Post Helpful? 0
  • +
  • -

#3 c670   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 17-February 14

Re: Rubber band circle in picture box

Posted 17 February 2014 - 12:34 PM

Thanks for the quick reply, i have this working now! However I need the circle to have a fixed size of 140 pixels diameter. Do you have any ideas on how this is done?
Was This Post Helpful? 0
  • +
  • -

#4 modi123_1   User is online

  • Suitor #2
  • member icon



Reputation: 14097
  • View blog
  • Posts: 56,497
  • Joined: 12-June 08

Re: Rubber band circle in picture box

Posted 17 February 2014 - 12:40 PM

... make a rectangle object that is 140 pixels height (and width).. update the x/y as needed.. feed into the paint event for the control.
Was This Post Helpful? 0
  • +
  • -

#5 c670   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 17-February 14

Re: Rubber band circle in picture box

Posted 19 February 2014 - 10:06 AM

Thanks for your help, this works perfectly.

I wonder if you can guide me on how to crop the contents of the circle and put it in a new picture box.

Here is the code i have so far:

Private Sub PictureBox1_MouseDown(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles PictureBox1.MouseDown
        'start creating circle when the mouse is clicked 

        PictureBox1.Refresh() 'erases previous rectangle
        Xstart = e.X
        Ystart = e.Y
 

        bRB = True
    End Sub

    Private Sub PictureBox1_MouseMove(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles PictureBox1.MouseMove
        'drag the circle over the seclected area

        If bRB Then
            PictureBox1.Refresh() 'erases previous rectangle




            Select Case e.X
                Case Is < 0
                    RBRectangle.X = 0
                    ' RBRectangle.Width = Xstart
                    RBRectangle.Width = 140

                Case 0 To Xstart
                    RBRectangle.X = e.X
                    'RBRectangle.Width = Xstart - e.X
                    RBRectangle.Width = 140

                Case Xstart To PBWidth
                    RBRectangle.X = Xstart
                    'RBRectangle.Width = e.X - Xstart
                    RBRectangle.Width = 140
                Case Is > PBWidth
                    RBRectangle.X = Xstart
                    'RBRectangle.Width = PBWidth - Xstart
                    RBRectangle.Width = 140
            End Select

            Select Case e.Y
                Case Is < 0
                    RBRectangle.Y = 0
                    'RBRectangle.Height = Ystart
                    RBRectangle.Height = 140

                Case 0 To Ystart
                    RBRectangle.Y = e.Y
                    'RBRectangle.Height = Ystart - e.Y
                    RBRectangle.Height = 140
                Case Ystart To PBHeight
                    RBRectangle.Y = Ystart
                    'RBRectangle.Height = e.Y - Ystart
                    RBRectangle.Height = 140
                Case Is > PBHeight
                    RBRectangle.Y = Ystart
                    'RBRectangle.Height = PBHeight - Ystart
                    RBRectangle.Height = 140
            End Select

            PictureBox1.CreateGraphics.DrawEllipse(RBPen, RBRectangle)
        End If
    End Sub

    Private Sub PictureBox1_MouseUp(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles PictureBox1.MouseUp
        'show the area in the rectangle as a new image 
       
        If bRB Then

'codeto crop image
            bRB = False


          

        End If
    End Sub





Was This Post Helpful? 0
  • +
  • -

#6 modi123_1   User is online

  • Suitor #2
  • member icon



Reputation: 14097
  • View blog
  • Posts: 56,497
  • Joined: 12-June 08

Re: Rubber band circle in picture box

Posted 19 February 2014 - 10:12 AM

Kudos on getting it to work! I am glad to be of some help.
Was This Post Helpful? 0
  • +
  • -

#7 IronRazer   User is offline

  • Custom Control Freak
  • member icon

Reputation: 1503
  • View blog
  • Posts: 3,801
  • Joined: 01-February 13

Re: Rubber band circle in picture box

Posted 20 February 2014 - 05:48 PM

Hi,
You can`t actually create a rounded (ellipse) image but, you can create a rectangle shaped image and make the outside area of the ellipse transparent which will make it appear to be round. Below is a sub i created a while back for one of my programs that will do this for you. You just need to send it the selected rectangle of the ellipse which in your case appears to be RBRectangle and you also need to send it the picturebox name that the image is assigned to which yours appears to be PictureBox1.

The picturebox sizemode has to be set to Normal or AutoSize so that the correct area of the image is cropped according to the selected ellipse rectange.

For the name of your picturebox and your selected ellipse rectangle you would call the sub like this.
CropEllipse(RBRectangle, PictureBox1)


I have commented each line of code to try to help you understand what is being done. Some may be a little confusing but, after you read threw it you can remove all the comments and it may be a little easier to understand. Not to mention a lot shorter.

    Private Sub CropEllipse(ByVal EllipseRect As Rectangle, ByVal PicBox As PictureBox)

        'Create a new bitmap the same size as the EllipseRect
        Using workBmp As New Bitmap(EllipseRect.Width, EllipseRect.Height)

            'Create a new rectangle that the x,y are 0 and the width and height are the same as the EllipseRect
            Dim destrect As New Rectangle(0, 0, EllipseRect.Width, EllipseRect.Height)

            'Create a graphics object from the workBmp bitmap
            Using grx As Graphics = Graphics.FromImage(workBmp)

                'Draw the PicBox image onto the workBmp bitmap
                grx.DrawImage(PicBox.Image, destrect, EllipseRect, GraphicsUnit.Pixel)

                'Create another new bitmap the size of EllipseRect
                Using overlay As New Bitmap(EllipseRect.Width, EllipseRect.Height)

                    'Create a graphics object from the overlay bitmap
                    Using olgrx As Graphics = Graphics.FromImage(overlay)

                        'Fill the overlay bitmap with an odd color that will be used to indicate the transparent area
                        olgrx.Clear(Color.FromArgb(255, 64, 0, 64))

                        'Fill in an elipse that is the same size as the EllipseRect
                        olgrx.FillEllipse(Brushes.White, destrect)
                    End Using

                    'Make the white elipse transparent so that when drawn onto the workBmp we only see the elipse shape of the image with a solid color around it
                    overlay.MakeTransparent(Color.White)

                    'Draw the overlay bitmap on top of the workBmp which has the PicBox image already drawn on it
                    grx.DrawImage(overlay, 0, 0)
                End Using
            End Using

            'Now the odd color that we used to indicate the transparent color is set to transparent.This leaves you the elipse shape of the PicBox image
            workBmp.MakeTransparent(Color.FromArgb(255, 64, 0, 64))

            'Now there is a chance that the PicBox image contained the same color we used to indicate the transparent color
            'so we need to make sure that color is filled back in. Since it was set transparent we can just draw it back on top
            'of a matching elipse size that is the color of the odd color used to indicate the transparent color.

            'Create the new backdrop bitmap the size of EllipseRect
            Using backdrop As New Bitmap(EllipseRect.Width, EllipseRect.Height)

                'Create the graphics object from the backdrop bitmap
                Using bdgrx As Graphics = Graphics.FromImage(backdrop)

                    'Fill an elipse the same size as our elipse image of the PicBox image with the color we used to indicate the transparent color
                    bdgrx.FillEllipse(New SolidBrush(Color.FromArgb(255, 64, 0, 64)), destrect)

                    'Draw the elipse image of the PicBox image on top of the elipse we just made of the odd transparent color
                    bdgrx.DrawImage(workBmp, 0, 0)
                End Using

                'Set the PicBox image to the finished rounded ellipse image
                PicBox.Image = New Bitmap(backdrop)
            End Using

        End Using
    End Sub



Here is a picture i used and then the cropped ellipse of my selected rectangle
Attached Image Attached Image
Was This Post Helpful? 0
  • +
  • -

#8 deery5000   User is offline

  • D.I.C Lover

Reputation: 87
  • View blog
  • Posts: 1,097
  • Joined: 09-May 09

Re: Rubber band circle in picture box

Posted 21 February 2014 - 05:01 AM

This is awesome . . .

I can definitly utilise this in my movie collection application to generate a DVD image

gota love Dream in code :)
Was This Post Helpful? 0
  • +
  • -

#9 IronRazer   User is offline

  • Custom Control Freak
  • member icon

Reputation: 1503
  • View blog
  • Posts: 3,801
  • Joined: 01-February 13

Re: Rubber band circle in picture box

Posted 21 February 2014 - 11:56 AM

Quote

This is awesome . . .

I can definitly utilise this in my movie collection application to generate a DVD image

gota love Dream in code :)


Glad you like it. I thought it was the cats a-- when i first wrote it. You can change the Ellipse rectangle to make it a tall narrow or short wide oval shape also or just a round circle if you want. Have fun with it. :)
Was This Post Helpful? 0
  • +
  • -

#10 IronRazer   User is offline

  • Custom Control Freak
  • member icon

Reputation: 1503
  • View blog
  • Posts: 3,801
  • Joined: 01-February 13

Re: Rubber band circle in picture box

Posted 24 February 2014 - 08:03 AM

Hi Again,
I have found a way of using a GraphicsPath and a TextureBrush to create a much smoother looking ellipse of the image and figured i would update my example to this. You will notice the edges of the ellipse are not as jagged looking as the they where using the code i first posted. The code is a little shorter also.
Imports System.Drawing.Drawing2D

Public Class Form1

    Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        PictureBox1.Image = New Bitmap("C:\TestFolder\MyImage.jpg")
    End Sub

    Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
        Dim selrect As New Rectangle(100, 50, 200, 100)
        CropEllipse(selrect, PictureBox1)
    End Sub

    Private Sub CropEllipse(ByVal EllipseRect As Rectangle, ByVal PicBox As PictureBox)
        Using workBmp As New Bitmap(EllipseRect.Width, EllipseRect.Height)
            Dim setrect As New Rectangle(0, 0, EllipseRect.Width, EllipseRect.Height)
            Using grx As Graphics = Graphics.FromImage(workBmp)
                grx.DrawImage(PicBox.Image, setrect, EllipseRect, GraphicsUnit.Pixel)
                Using bm As New Bitmap(EllipseRect.Width, EllipseRect.Height)
                    Using grx2 As Graphics = Graphics.FromImage(bm)
                        grx2.SmoothingMode = SmoothingMode.AntiAlias
                        Using tb As New TextureBrush(workBmp)
                            tb.TranslateTransform(0, 0)
                            Using gp As New GraphicsPath
                                gp.AddEllipse(0, 0, workBmp.Width, workBmp.Height)
                                grx2.FillPath(tb, gp)
                            End Using
                        End Using
                    End Using
                    If PicBox.Image IsNot Nothing Then PicBox.Image.Dispose()
                    PicBox.Image = New Bitmap(bm)
                End Using
            End Using
        End Using
    End Sub
End Class



Have fun with it. B)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1