rdavis101
asked on
GDI+ : Stretching vs. Tiling in Graphics.DrawImage
My app copies rectangular sections of one image to another. The destination is not necessarily the same size as the source...sometimes I want to stretch these images, and sometimes tile them.
Looks like Graphics.DrawImage can't tile an image, but I don't know. When copying using Graphics.DrawImage, the image is stretched...that's the default behavior. Certain overloads take ImageAttributes, which should allow me to tile, but can anyone get this to work. Here's a line from my code:
G.DrawImage(PaintImage, Destination, iLeftMargin, iTopMargin, iWidth, iHeight, GraphicsUnit.Pixel, imgAttributes)
Can anyone construct a code example where imgAttributes causes the source to tile into the destination? If not, then how to tile an image? I was thinking maybe that I have to create a brush to tile an image since DrawImage doesn't allow it...
Thanks.
Roger
Looks like Graphics.DrawImage can't tile an image, but I don't know. When copying using Graphics.DrawImage, the image is stretched...that's the default behavior. Certain overloads take ImageAttributes, which should allow me to tile, but can anyone get this to work. Here's a line from my code:
G.DrawImage(PaintImage, Destination, iLeftMargin, iTopMargin, iWidth, iHeight, GraphicsUnit.Pixel, imgAttributes)
Can anyone construct a code example where imgAttributes causes the source to tile into the destination? If not, then how to tile an image? I was thinking maybe that I have to create a brush to tile an image since DrawImage doesn't allow it...
Thanks.
Roger
ASKER
Tried it, but no luck... You try testing it?
Yep, It works
this is how I tested it. The original image (test.jpg) is 141 x 109 big (so it is tiled 4 times, once complete and 3 times incomplete)
Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
Dim x As New System.Drawing.Imaging.Ima geAttribut es
x.SetWrapMode(Drawing2D.Wr apMode.Til e)
Dim g As Graphics = Me.CreateGraphics
Dim i As Image = Image.FromFile("c:\test.jp g")
Dim rec As New Rectangle(0, 0, 200, 200)
g.DrawImage(i, rec, 0, 0, 200, 200, GraphicsUnit.Pixel, x)
end sub
this is how I tested it. The original image (test.jpg) is 141 x 109 big (so it is tiled 4 times, once complete and 3 times incomplete)
Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
Dim x As New System.Drawing.Imaging.Ima
x.SetWrapMode(Drawing2D.Wr
Dim g As Graphics = Me.CreateGraphics
Dim i As Image = Image.FromFile("c:\test.jp
Dim rec As New Rectangle(0, 0, 200, 200)
g.DrawImage(i, rec, 0, 0, 200, 200, GraphicsUnit.Pixel, x)
end sub
ASKER
I tested your code and it does indeed work. I'm clueless why this doesn't work for me. Let me tell you what I'm doing. I decided to build a custom tab control that could be skinned, because there weren't any 3rd party controls I liked. So...when a button (or any other window) is skinned, the bitmap used to skin the button is divided into 9 areas, like a tic-tac-toe grid. The corners don't get stretched or tiled, and the sides get stretched or tiled only in such a way as to look pretty.
So I create a class that takes the TopMargin, LeftMargin, RightMargin, and BottomMargin as properties. The user can attach the class to any button, or really any control, and then skin the object in its Paint Event...like so:
-------------------------- -
Private Sub SkinMe(ByVal G As Graphics)
If imgNormal Is Nothing Then Exit Sub 'If the user hasn't assigned an skinning image yet, just exit
Dim PaintImage As Image '
If bInside = True And Not imgMouseover Is Nothing Then 'The the user isn't using a Mouseover image.
PaintImage = imgMouseover
Else
PaintImage = imgNormal
End If
If bInside = False Then PaintImage = imgNormal
Dim RightSideX As Integer
Dim BottomSideY As Integer
RightSideX = PaintImage.Width - iRightMargin
BottomSideY = PaintImage.Height - iBottomMargin
atTopAttributes.SetWrapMod e(Drawing2 D.WrapMode .Tile)
atBottomAttributes.SetWrap Mode(Drawi ng2D.WrapM ode.Tile)
atRightAttributes.SetWrapM ode(Drawin g2D.WrapMo de.Tile)
atLeftAttributes.SetWrapMo de(Drawing 2D.WrapMod e.Tile)
atMiddleAttributes.SetWrap Mode(Drawi ng2D.WrapM ode.Tile)
Dim UpperLeftDestination As New Rectangle(0, 0, iLeftMargin, iTopMargin)
Dim UpperMiddleDestination As New Rectangle(iLeftMargin, 0, sknButton.Width - iRightMargin - iLeftMargin, iTopMargin)
Dim UpperRightDestination As New Rectangle(sknButton.Width - iRightMargin, 0, iRightMargin, iTopMargin)
Dim MiddleLeftDestination As New Rectangle(0, iTopMargin, iLeftMargin, sknButton.Height - iBottomMargin - iTopMargin)
Dim MiddleMiddleDestination As New Rectangle(iLeftMargin, iTopMargin, sknButton.Width - iRightMargin - iLeftMargin, sknButton.Height - iBottomMargin - iTopMargin)
Dim MiddleRightDestination As New Rectangle(sknButton.Width - iRightMargin, iTopMargin, iRightMargin, sknButton.Height - iBottomMargin - iTopMargin)
Dim LowerLeftDestination As New Rectangle(0, sknButton.Height - iBottomMargin, iLeftMargin, iBottomMargin)
Dim LowerMiddleDestination As New Rectangle(iLeftMargin, sknButton.Height - iBottomMargin, sknButton.Width - iRightMargin - iLeftMargin, iBottomMargin)
Dim LowerRightDestination As New Rectangle(sknButton.Width - iRightMargin, sknButton.Height - iBottomMargin, iRightMargin, iBottomMargin)
G.DrawImage(PaintImage, UpperLeftDestination, 0, 0, iLeftMargin, iTopMargin, GraphicsUnit.Pixel)
G.DrawImage(PaintImage, MiddleLeftDestination, 0, iTopMargin, iLeftMargin, PaintImage.Height - iBottomMargin - iTopMargin, GraphicsUnit.Pixel, atLeftAttributes)
G.DrawImage(PaintImage, LowerLeftDestination, 0, BottomSideY, iLeftMargin, iBottomMargin, GraphicsUnit.Pixel)
G.DrawImage(PaintImage, UpperRightDestination, RightSideX, 0, iRightMargin, iTopMargin, GraphicsUnit.Pixel)
G.DrawImage(PaintImage, MiddleRightDestination, RightSideX, iTopMargin, iRightMargin, PaintImage.Height - iTopMargin - iBottomMargin, GraphicsUnit.Pixel, atRightAttributes)
G.DrawImage(PaintImage, LowerRightDestination, RightSideX, BottomSideY, iBottomMargin, iRightMargin, GraphicsUnit.Pixel)
G.DrawImage(PaintImage, UpperMiddleDestination, iLeftMargin, 0, PaintImage.Width - iLeftMargin - iRightMargin, iTopMargin, GraphicsUnit.Pixel, TopAttributes)
G.DrawImage(PaintImage, MiddleMiddleDestination, iLeftMargin, iTopMargin, PaintImage.Width - iLeftMargin - iRightMargin, PaintImage.Height - iTopMargin - iBottomMargin, GraphicsUnit.Pixel, atMiddleAttributes)
G.DrawImage(PaintImage, LowerMiddleDestination, iLeftMargin, BottomSideY, PaintImage.Width - iLeftMargin - iRightMargin, iBottomMargin, GraphicsUnit.Pixel, atBottomAttributes)
End Sub
--------------------
The code works...I can anchor a button to three sides of a form, then skin it and it stretches in realtime and does a nice stretched mouseover, too (obviously, there's other code supporting this).
But it doesn't let me choose between tile or stretch. I tried passing attributes as properties, which is ultimately what I want to do. No luck. That led to simply including the block
atTopAttributes.SetWrapMod e(Drawing2 D.WrapMode .Tile)
atBottomAttributes.SetWrap Mode(Drawi ng2D.WrapM ode.Tile)
atRightAttributes.SetWrapM ode(Drawin g2D.WrapMo de.Tile)
atLeftAttributes.SetWrapMo de(Drawing 2D.WrapMod e.Tile)
atMiddleAttributes.SetWrap Mode(Drawi ng2D.WrapM ode.Tile)
directly in the code that handles the paint event... But it's not working. The program runs and the button edges stretch instead of tile.
Any clues?
Roger
So I create a class that takes the TopMargin, LeftMargin, RightMargin, and BottomMargin as properties. The user can attach the class to any button, or really any control, and then skin the object in its Paint Event...like so:
--------------------------
Private Sub SkinMe(ByVal G As Graphics)
If imgNormal Is Nothing Then Exit Sub 'If the user hasn't assigned an skinning image yet, just exit
Dim PaintImage As Image '
If bInside = True And Not imgMouseover Is Nothing Then 'The the user isn't using a Mouseover image.
PaintImage = imgMouseover
Else
PaintImage = imgNormal
End If
If bInside = False Then PaintImage = imgNormal
Dim RightSideX As Integer
Dim BottomSideY As Integer
RightSideX = PaintImage.Width - iRightMargin
BottomSideY = PaintImage.Height - iBottomMargin
atTopAttributes.SetWrapMod
atBottomAttributes.SetWrap
atRightAttributes.SetWrapM
atLeftAttributes.SetWrapMo
atMiddleAttributes.SetWrap
Dim UpperLeftDestination As New Rectangle(0, 0, iLeftMargin, iTopMargin)
Dim UpperMiddleDestination As New Rectangle(iLeftMargin, 0, sknButton.Width - iRightMargin - iLeftMargin, iTopMargin)
Dim UpperRightDestination As New Rectangle(sknButton.Width - iRightMargin, 0, iRightMargin, iTopMargin)
Dim MiddleLeftDestination As New Rectangle(0, iTopMargin, iLeftMargin, sknButton.Height - iBottomMargin - iTopMargin)
Dim MiddleMiddleDestination As New Rectangle(iLeftMargin, iTopMargin, sknButton.Width - iRightMargin - iLeftMargin, sknButton.Height - iBottomMargin - iTopMargin)
Dim MiddleRightDestination As New Rectangle(sknButton.Width - iRightMargin, iTopMargin, iRightMargin, sknButton.Height - iBottomMargin - iTopMargin)
Dim LowerLeftDestination As New Rectangle(0, sknButton.Height - iBottomMargin, iLeftMargin, iBottomMargin)
Dim LowerMiddleDestination As New Rectangle(iLeftMargin, sknButton.Height - iBottomMargin, sknButton.Width - iRightMargin - iLeftMargin, iBottomMargin)
Dim LowerRightDestination As New Rectangle(sknButton.Width - iRightMargin, sknButton.Height - iBottomMargin, iRightMargin, iBottomMargin)
G.DrawImage(PaintImage, UpperLeftDestination, 0, 0, iLeftMargin, iTopMargin, GraphicsUnit.Pixel)
G.DrawImage(PaintImage, MiddleLeftDestination, 0, iTopMargin, iLeftMargin, PaintImage.Height - iBottomMargin - iTopMargin, GraphicsUnit.Pixel, atLeftAttributes)
G.DrawImage(PaintImage, LowerLeftDestination, 0, BottomSideY, iLeftMargin, iBottomMargin, GraphicsUnit.Pixel)
G.DrawImage(PaintImage, UpperRightDestination, RightSideX, 0, iRightMargin, iTopMargin, GraphicsUnit.Pixel)
G.DrawImage(PaintImage, MiddleRightDestination, RightSideX, iTopMargin, iRightMargin, PaintImage.Height - iTopMargin - iBottomMargin, GraphicsUnit.Pixel, atRightAttributes)
G.DrawImage(PaintImage, LowerRightDestination, RightSideX, BottomSideY, iBottomMargin, iRightMargin, GraphicsUnit.Pixel)
G.DrawImage(PaintImage, UpperMiddleDestination, iLeftMargin, 0, PaintImage.Width - iLeftMargin - iRightMargin, iTopMargin, GraphicsUnit.Pixel, TopAttributes)
G.DrawImage(PaintImage, MiddleMiddleDestination, iLeftMargin, iTopMargin, PaintImage.Width - iLeftMargin - iRightMargin, PaintImage.Height - iTopMargin - iBottomMargin, GraphicsUnit.Pixel, atMiddleAttributes)
G.DrawImage(PaintImage, LowerMiddleDestination, iLeftMargin, BottomSideY, PaintImage.Width - iLeftMargin - iRightMargin, iBottomMargin, GraphicsUnit.Pixel, atBottomAttributes)
End Sub
--------------------
The code works...I can anchor a button to three sides of a form, then skin it and it stretches in realtime and does a nice stretched mouseover, too (obviously, there's other code supporting this).
But it doesn't let me choose between tile or stretch. I tried passing attributes as properties, which is ultimately what I want to do. No luck. That led to simply including the block
atTopAttributes.SetWrapMod
atBottomAttributes.SetWrap
atRightAttributes.SetWrapM
atLeftAttributes.SetWrapMo
atMiddleAttributes.SetWrap
directly in the code that handles the paint event... But it's not working. The program runs and the button edges stretch instead of tile.
Any clues?
Roger
I'll have a look
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Awesome, dude. Thanks so much!
Dim x As System.Drawing.Imaging.Ima
x.SetWrapMode(Drawing2D.Wr
G.DrawImage(PaintImage, Destination, iLeftMargin, iTopMargin, iWidth, iHeight, GraphicsUnit.Pixel, x)