Diagonal Shadow with GDI+

Question

I am trying to draw a diagonal shadow.

First I make all pixel to black:

Next with a simple for cicle this is are the result

Now I want to stretch this image diagonally to simulate a shadow.
I have tried:

Bitmap b = new Bitmap(tImage.Width + 100, tImage.Height);
Graphics p = Graphics.FromImage(b);
p.RotateTransform(30f);
p.TranslateTransform(100f, -200f);
p.DrawImage(tImage, new Rectangle(0, -20, b.Width+20, b.Height));

but the images are rotated and translated.

Please anyone have a solution for me?

I need it to look like this (created in Photoshop):

Answer 1

Creating a nice dropshadow is quite a task using Winforms and GDI+.

It features neither polygon scaling nor blurring; and let's not even think about 3D..! - But we can at least do a few things without too much work and get a nice result for many images..

Let's assume you already have an image that is cut out from its background.

The next step would be to turn all colors into black.

Then we most likely would want to add some level of transparency, so that the background the shadow falls on, still shines through.

Both task are done quite effectively by using a suitable ColorMatrix.

With a very transparent version we can also create simple blurring by drawing the image with offsets. For best results I would draw it nine times with 3 differents weights/alpha values..

High quality blurring is an art as you can see by even just looking at the filters and adjustments in pro software like Adobe Photoshop or Affinity Photo. Here is a nice set of interesting links..

But since we are only dealing with a b/w bitmap a simplitstic appraoch is good enough.. I use 3 alpha values of 5%, 10% and 20% for the 4 corner, the 4 edge and the 1 center drawings.

The final step is drawing the shadow with some skewing.

This is explained here; but while this is seemingly very simple it is also somewhat impractical. The three points the DrawImage overlay expects need to be calculated.

So here is a method that does just that; do note that is is a strongly simplified method:

The overlay takes three points, that is 6 floats. We only use 3 numbers:

• one for the amount of skewing; 0.5 means the top is shifted to the right by half the width of the bitmap.
• the other two are the scaling of the resulting bounding box. 1 and 0.5 mean that the width is unchanged and the height is reduced to 50%.

Here is the function:

public Bitmap SkewBitmap(Bitmap inMap, float skewX, float ratioX, float ratioY )
{
    int nWidth = (int)(inMap.Width * (skewX + ratioX));
    int nHeight = (int)(Math.Max(inMap.Height, inMap.Height * ratioY));
    int yOffset = inMap.Height - nHeight;

    Bitmap outMap = new Bitmap(nWidth, nHeight);

    Point[] destinationPoints = {
        new Point((int)(inMap.Width * skewX), (int)(inMap.Height * ratioY) + yOffset),
        new Point((int)(inMap.Width * skewX + inMap.Width * ratioX),
                  (int)(inMap.Height * ratioY) + yOffset),
        new Point(0, inMap.Height + yOffset ) };

        using (Graphics g = Graphics.FromImage(outMap))
        g.DrawImage(inMap, destinationPoints);

    return outMap;
}

Note a few simplifications:

• If you want to drop the shadow to the left you will need to not just move the first two points to the left but also to adapt the calculation of the width and also the way you overlay the object over the shadow.

• If you study the MSDN example you will see that the DrawImage overlay also allows to do a rotation. I didn't add this to our function, as it is a good deal more complicated to calculate and even to just to write a signature.

• If you wonder where the info of the six numbers go, here is the full layout:

  • 3 go into our parameters
  • 1 would be the angle of the rotation we don't do
  • 2 could be either the rotation center point or a point (deltaX&Y) the by which the result is translated

• If you look closely you can see the shadow of the left foot is a little below the foot. This is because the feet are not at the same level and with the vertical compression the base lines drift apart. To correct that we would either modify the image or add a tiny rotation after all.

• Looking at your example imag it is clear that you will nee to take it apart and treat 'house' and 'tree' separately!

• The signature is kept simple; this always a balance between ease of use and effort in coding. On could wish for a paramter the takes angle to control the skewing. Feel free to work out the necessary calculations..

Note that adding the functions behind the other buttons would go beyond the scope of the question. Suffice it to say that most are just one line to do the drawing and a dozen or so to set up the colormatrix..

Here is the code in the 'Skew' button:

Bitmap bmp = SkewBitmap((Bitmap)pictureBox4.Image, 0.5f, 1f, 0.5f);

pictureBox5.Image = pictureBox1.Image;
pictureBox5.BackgroundImage = bmp;
pictureBox5.ClientSize = new Size(bmp.Width, bmp.Height);

Instead of drawing the object over the shadow I make use of the extra layer of the PictureBox. You would of course combine the two Bitmaps..