Image Grid Slice

[joshl_1995]

Hello Daniweb Community,
I'm wanting to slice a square image into 9 pieces like below

the code I'm currently using is this

    Private Function CropBitmap(ByRef bmp As Bitmap, ByVal cropX As Integer, ByVal cropY As Integer, ByVal cropWidth As Integer, ByVal cropHeight As Integer) As Bitmap
        Dim rect As New Rectangle(cropX, cropY, cropWidth, cropHeight)
        Dim cropped As Bitmap = bmp.Clone(rect, bmp.PixelFormat)
        Return cropped
    End Function

    Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
        PictureBox1.Image = CropBitmap(New Bitmap(PictureBox2.Image), 0, 0, 21, 21)
        PictureBox3.Image = CropBitmap(New Bitmap(PictureBox2.Image), 0, 21, 21, 22)
        PictureBox4.Image = CropBitmap(New Bitmap(PictureBox2.Image), 0, 43, 21, 21)

        PictureBox5.Image = CropBitmap(New Bitmap(PictureBox2.Image), 22, 0, 22, 21)
        PictureBox6.Image = CropBitmap(New Bitmap(PictureBox2.Image), 22, 22, 22, 22)
        PictureBox7.Image = CropBitmap(New Bitmap(PictureBox2.Image), 22, 43, 22, 21)

        PictureBox8.Image = CropBitmap(New Bitmap(PictureBox2.Image), 43, 0, 21, 21)
        PictureBox9.Image = CropBitmap(New Bitmap(PictureBox2.Image), 43, 22, 21, 22)
        PictureBox10.Image = CropBitmap(New Bitmap(PictureBox2.Image), 43, 43, 21, 21)
    End Sub

but when I use this method I get this result

for some reason it has a liner on it.

Does anyone know of a soulution to fix this? or if there is another script that'll do this?

[ddanbe]

It be having to do something with screencoordinates. Start with having a look at the PointToScreen method.

[Minimalist]

I do think crop is not the way to do what you want. Look into split image.Maybe you just want to overlay lines?

[joshl_1995]

Maybe it'll be easier to say I want it to scale, not stretch, scale so like the picture.

So I would like it so I can expand the top, sides and bottom then stretch the center to fill the center.

[Minimalist]

Assuming you got the image in a picture box you can simple do something like this:

Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
        Me.PictureBox1.Size = New System.Drawing.Size(140, 70)
    End Sub

[joshl_1995]

No that didn't work, as I said I didn't want to stretch the image.

[joshl_1995]

Here is a sketchup of the procedure (of how the images are placed and are resized) and as you can see even in this example there is a liner of the background fading in.

[Minimalist]

What should be the end product? Sliding game? It is hard to give good advice without knowing what the result should look like. Ayway one way of doing it is this,I only used three pictureboxes for demonstration:
Just click on the image to see the animation.

Public Class Form1

    Private Sub Scale_Click(sender As Object, e As EventArgs) Handles Button1.Click
        Me.PictureBox1.Size = New System.Drawing.Size(70, 70)
        Me.PictureBox2.Size = New System.Drawing.Size(70, 70)
        Me.PictureBox3.Size = New System.Drawing.Size(70, 70)
        PictureBox2.Top = PictureBox1.Top
        PictureBox2.Left = PictureBox1.Left + PictureBox1.Width + 4
        PictureBox3.Top = PictureBox1.Top + PictureBox1.Height + 4
        PictureBox3.Left = PictureBox1.Left
    End Sub
    Private Sub ScaleUp_Click(sender As Object, e As EventArgs) Handles Button2.Click
        Me.PictureBox1.Size = New System.Drawing.Size(100, 100)
        Me.PictureBox2.Size = New System.Drawing.Size(100, 100)
        Me.PictureBox3.Size = New System.Drawing.Size(100, 100)
        PictureBox2.Top = PictureBox1.Top
        PictureBox2.Left = PictureBox1.Left + PictureBox1.Width + 4
        PictureBox3.Top = PictureBox1.Top + PictureBox1.Height + 4
        PictureBox3.Left = PictureBox1.Left
    End Sub
End Class

[joshl_1995]

No that won't work, I'm making this for notifications.
In this image

I'm wanting to start with a single image then split it into 9 pieces, so in this image I'm wanting to resize part 2, 4, 5, 6 and 8.
I would like 2 and 8 to stretch width wise, 4 and 6 to stretch height wise and 5 to stretch to fill. Here (I hope) you can see what I'm talking about.

I hope this helps.

[Minimalist]

Ok this raises two questions:
1) Is this always the same image?
2)How do you want to resize the different parts of the picture? Button,Clicking on the part etc?

[joshl_1995]

It starts with a single image that is then split into 9 separate pieces and each piece will be placed into it's own PictureBox that have been anchored to expand, (like in previous images). So that way these will be resized is from the user manually resizing the window.

[Minimalist]

Well again, is this always the same initial picture with the numbers or does this initial picture change? Is it always the same numbers that stretch and the corners stay the same? A user may change the window through pulling on the sides or corners. Is the scaling in the three events the same?

[joshl_1995]

I have no idea what is so confusing about this, the image will always be the same. The use will browse for the image then click a button that'll then open another form with what I'm wanting to do (refer to all my previous posts) so upon form load the image from the previous form (that the user browsed for) will be split into 9 pieces (at mentioned several times) those several pieces will then be stretch as mentioned in previous posts (hence making it the same picture throughout the whole use of this form (for all an eternity, until the form has been closed)).

As said before

hence making it the same picture throughout the whole use of this form (for all an eternity, until the form has been closed)

So yes the number will always be the same and as I said yes the corners will just be split and left alone unstretched.
And I got no idead how it makes a difference either resizing the window by pulling the sides or corner.

What do you mean by?

Is the scaling in the three events the same?

[Minimalist]

Well if it is always the same picture it just would be easier to load the numbers as single bitmaps into the pictureboxes. It can be split but needs fiddling to get the size of the initial picture correct for splitting. Now I am trying to find a solution for the resizing. And yes, it makes a difference.
O.K. that's what I came up with sofar but there is a flicker so I try to improve it.

[ddanbe]

Flickering can be reduced by using the DoubleBuffered property.
Set it to True.

[Minimalist]

Thanks ddanbe, will work on it when I get time again. Actually was just a matter of setting the forms doublebuffering to true and works like a charm now.

[joshl_1995]

Well kind of what I want except for the liner. Look to the left of the 5th piece.

[joshl_1995]

I've got a working script that is doing exactly what I want but at I said near the beginning I keep getting this result

Notice the liner

The code I'm using is this

Dim img As Image = Image.FromFile(Main.PictureBox1.ImageLocation)
Dim widthThird As Integer = CInt(CDbl(img.Width) / 3.0 + 0.5)
Dim heightThird As Integer = CInt(CDbl(img.Height) / 3.0 + 0.5)
Dim bmps As Bitmap(,) = New Bitmap(2, 2) {}
For i As Integer = 0 To 2
    For j As Integer = 0 To 2
        bmps(i, j) = New Bitmap(widthThird, heightThird)
        Dim g As Graphics = Graphics.FromImage(bmps(i, j))
        g.DrawImage(img, New Rectangle(0, 0, widthThird, heightThird), New Rectangle(j * widthThird, i * heightThird, widthThird, heightThird), GraphicsUnit.Pixel)
        g.Dispose()
    Next
Next
PictureBox1.Image = bmps(0, 0)
PictureBox5.Image = bmps(0, 1)
PictureBox8.Image = bmps(0, 2)
PictureBox3.Image = bmps(1, 0)
PictureBox6.Image = bmps(1, 1)
PictureBox9.Image = bmps(1, 2)
PictureBox4.Image = bmps(2, 0)
PictureBox7.Image = bmps(2, 1)
PictureBox10.Image = bmps(2, 2)

Which is ran on the forms load event. Then I just resize the window like normal (because the picture boxes are anchored)

[Minimalist]

Well that is why I get the line which is part of a neihbouring part of the picture. That means division by 3 will be not exactly give the slicing.

[joshl_1995]

That makes sense, so I can't slice them using this method?
All I'm wanting is a method that works the same way as the code provided here but without that annoying liner.

[Minimalist]

Well what you can try is to have another picturebox. Move each part into this picturebox, crop the edge off and than move it into the designated picturebox.

[joshl_1995]

Didn't work just keeps coming up with that liner. Stupid thing, why!!!! I'm going to try a couple more methods then I'm just going to throw the whole idea out the windows into oncoming traffic (putting it in hospital) then pull the plug on it's life support.

[Minimalist]

Well as I stated before, can create 9 small bitmaps and move these into the pictureboxes. That way you won't get any line and since it's always the same picture it doesn't really matter.

[joshl_1995]

But it'll still be the same result. Doesn't matter anyway, I've started playing around with XAML and have found a perfect working solution. Works just the say I want it, however now seen I don't know much about XAML would anyone know how to edit a BitmapImage refer to this.
So what I've done is made a Windows Form Application and added a WPF UserControl then dragged it into the Form (Into an ElementHost) and am displaying it on there however I would like to know how to edit the masterImage as shown in the link.

So I want to set the image path then click a button that'll open the form hosting the WPF UserControl with the selected image entered. I found out how to set and get the image path but whenI press the button it just displays the default image and not the one I browsed for, if you know what I mean.

Would this be better to open this in a new article? or just keep it here?

[joshl_1995]

Never mind, I've solved it myself just a few minor tweeks. If anyone is interested in this is what I used to do what I wanted.