none
Picturebox Painting Question

    Question

  • I want to create a program that allows me to upload a photo, paint the color black on it, and be able to delete the black paint to reveal the image beneath.

    I do not want to delete all the paint at once, only the paint that I click and drag my mouse across. 

    My Program can already upload pictures to a picturebox. I just need to understand and know how to paint on top of the image in the picturebox (without editing the picture) and being able to reveal it again by erasing the paint (but not all the paint at once, only the paint I drag my mouse over).

    Thanks!

    Saturday, March 11, 2017 8:59 PM

All replies

  • Essentially you will draw one image on top of the other.  The "bottom" image is your picture and the "top" image is the black area.  There are a number of ways you might do this, but since it sounds like you want interactive painting you would probably set the image on the picturebox using its Image property and then in the PictureBox.Paint event handler you would draw the black area over top of the image.

    As for the black area itself, this might be another bitmap image that you draw to or it might just be a data object which contains information about how to draw the black area.  It mostly depends on the intended user experience and to some degree personal preference.

    I'm guess you want to simulate a "scratch-off" kind of scenario, but if you could explain more about how you envision it working I'm sure you can get more detailed suggestions and examples.


    Reed Kimble - "When you do things right, people won't be sure you've done anything at all"

    Saturday, March 11, 2017 9:08 PM
    Moderator
  • I do not want to delete all the paint at once, only the paint that I click and drag my mouse across. 

    This example is a starting point.  You will probably want to provide a file dialog for the image name, and you could adjust the drawing rectangle so the mouse is centred. If sizemode of normal is not suitable then you will need to scale the calculation of the draw rectangle to match the scaling that the picturebox does.

    Public Class Form1
    
        Public Source As Bitmap
        Public Reveal As Bitmap
        Public Drawing As Boolean = False
        Dim G As Graphics
    
        Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
            PictureBox1.BorderStyle = BorderStyle.FixedSingle
            PictureBox1.SizeMode = PictureBoxSizeMode.Normal
        End Sub
    
        Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
            Source = Image.FromFile("C:\users\public\image1.jpg")
            Reveal = New Bitmap(Source.Width, Source.Height)
            G = Graphics.FromImage(Reveal)
            G.Clear(Color.Black)
            PictureBox1.Image = Reveal
        End Sub
    
        Private Sub PictureBox1_MouseDown(sender As Object, e As MouseEventArgs) Handles PictureBox1.MouseDown
            Drawing = True
        End Sub
    
        Private Sub PictureBox1_MouseMove(sender As Object, e As MouseEventArgs) Handles PictureBox1.MouseMove
            If Reveal IsNot Nothing Then
                If Drawing Then
                    Dim CLickpoint As Point = PictureBox1.PointToClient(MousePosition)
                    Dim G As Graphics = Graphics.FromImage(Reveal)
                    Dim area As New Rectangle(CLickpoint.X, CLickpoint.Y, 50, 50)
                    G.DrawImage(Source, area, area, System.Drawing.GraphicsUnit.Pixel)
                    PictureBox1.Refresh()
                End If
            End If
        End Sub
    
        Private Sub PictureBox1_MouseUp(sender As Object, e As MouseEventArgs) Handles PictureBox1.MouseUp
            Drawing = False
        End Sub
    End Class
    

    Saturday, March 11, 2017 10:14 PM
  • Acamar,

    Congratulations on the MVP.

    It's well-deserved. :)

    *****

    RProgram07,

    Sorry for the intrusion...


    "One who has no vices also has no virtues..."

    Saturday, March 11, 2017 10:55 PM
  • Congratulations on the MVP.

    Thank you. 

    Sunday, March 12, 2017 9:56 PM
  •  Acamar,

     I can`t believe they have not given you the MCC and MVP badges before this,  you have been contributing very good help on the forum since i was a newbie here.  Well deserved!!!  8)


    If you say it can`t be done then i`ll try it

    Sunday, March 12, 2017 10:48 PM
  • I would (and do) for this not use System.Drawing, AFAIK does that not use layers (beside a transparent one for gif). 

    At the same time as WPF is the BitmapImage introduced, it is not as easy to use as the bitmap, but has the possibilities likewise you describe. 

    If you not have really very deep knowledge about imaging, than forget this as long as you don't have that knowledge. 

    https://msdn.microsoft.com/en-us/library/system.windows.media.imaging.bitmapimage(v=vs.110).aspx

    Altough I use the bitmapimage (and as well related classes) can I not really paint with it.  



    Success
    Cor

    Sunday, March 12, 2017 11:37 PM
  • Congratulations on the MVP.

    Thank you. 


    Yes Well Deserved Acamar!

    You have helped many (including me of course).

    Monday, March 13, 2017 12:52 AM
  • Yes! Kind of like a scratch off program. And I would also want to be able to paint onto the photo even after scratching things off. 

    However, I don't want it to actually edit the photo. Just the layer above the photo to appear like part of the photo is hidden and can be scratched away.

    Basically, its to hide/reveal photos or parts of photos. 

    Thanks for posting so quick! I appreciate it!



    • Edited by RProgram07 Monday, March 13, 2017 10:09 PM
    Monday, March 13, 2017 10:08 PM
  • Thanks for the starting point Acamar! :D

    I'm not very experienced in the graphics department of programming, so business with bitmaps and stuff is confusing, which is why I went onto the forums!

    Monday, March 13, 2017 10:12 PM
  • Thanks for the starting point Acamar! :D

    Note that there is an error in the above comment "If sizemode of normal is not suitable then you will need to scale the calculation of the draw rectangle to match the scaling that the picturebox does." You wouldn't do that.  You would create a new image at the required size so it could be displayed without scaling, create the reveal image at that same size, then use the above code without changes to do the revealing.

    [Thanks guys for the nice comments]

    Wednesday, March 15, 2017 11:16 PM