4

I have been trying to draw an annulus (ring with thickness) with a transparent hole and a gradient rim in C# with very little success. Does anyone have any suggestions on how to do this?

here's a nice Blend Utility

Here's the Final result - thanks to BlueMonkMN

 Rectangle GetSquareRec(double radius, int x, int y)
    {
        double r = radius;
        double side = Math.Sqrt(Math.Pow(r, 2) / 2);
        Rectangle rec = new Rectangle(x - ((int)side), y - ((int)side), (int)(side * 2) + x, (int)(side * 2) + y);

        return rec;
    }
    void Form1_Paint(object sender, PaintEventArgs e)
    {


        Graphics gTarget = e.Graphics;
        gTarget.SmoothingMode = SmoothingMode.AntiAlias;


        GraphicsPath pTemp = new GraphicsPath();

        Rectangle r = GetSquareRec(200, 225, 225);
        pTemp.AddEllipse(r);
        pTemp.AddEllipse(GetSquareRec(50, 225, 225));

        Color[] colors = new Color[5];
        colors[0] = Color.FromArgb(192, 192, 192);
        colors[1] = Color.FromArgb(105, 0, 0);
        colors[2] = Color.FromArgb(169, 169, 169);
        colors[3] = Color.FromArgb(0, 0, 0);
        colors[4] = Color.FromArgb(0, 0, 0);

        float[] positions = new float[5];
        positions[0] = 0f;
        positions[1] = 0.1f;
        positions[2] = 0.35f;
        positions[3] = 0.5f;
        positions[4] = 1f;

        ColorBlend Cb = new ColorBlend();
        Cb.Colors = colors;
        Cb.Positions = positions;

        PathGradientBrush pgb = new PathGradientBrush(pTemp);
        pgb.InterpolationColors = Cb;
        pgb.CenterPoint = new PointF(r.X + (r.Width / 2), r.Y + (r.Height / 2));
        gTarget.FillPath(pgb, pTemp);

    }

http://www.freeimagehosting.net/uploads/th.515733e62e.jpg

Brad
  • 20,302
  • 36
  • 84
  • 102
  • What drawing framework are you using? GDI, WPF, XNA...? – Noldorin Apr 04 '09 at 12:25
  • GDI probably (drawing2d tag says it) – Mehrdad Afshari Apr 04 '09 at 12:30
  • Yeah I thought so, though I just wanted to check. Surely drawing 3D shapes using GDI is going to be rather painful...? (Unless of course you actually mean an annulus [http://en.wikipedia.org/wiki/Annulus_(mathematics)] rather than a toroid, which is basically the 2D equivalent.) – Noldorin Apr 04 '09 at 12:39
  • I've gone ahead and edited the question to refer to an annulus, which is what I think you mean. If it isn't, apologies - just rollback. – Noldorin Apr 04 '09 at 12:46
  • I'm surprised by the line that reads "pgb.InterpolationColors = Cb;". Don't you have to set the Blend property rather than the InterpolationColors property? – BlueMonkMN Apr 05 '09 at 13:23
  • What I meant to say is that I am using the ColorBlend rather than the Blend class. I can't assign the ColorBlend to the PathGradiantBrus.Blend - wrong type. – Brad Apr 05 '09 at 18:11

2 Answers2

7

This is how I did it in the Scrolling Game Development Kit:

pTemp = new GraphicsPath();
pTemp.AddEllipse(Start.X, Start.Y, End.X - Start.X, End.Y - Start.Y);
pTemp.AddEllipse((Start.X * 3 + End.X) / 4f,
                 (Start.Y * 3 + End.Y) / 4f,
                 (End.X - Start.X) / 2f,
                 (End.Y - Start.Y) / 2f);
PathGradientBrush pgb = new PathGradientBrush(pTemp);
Blend b = new Blend();
b.Factors = new float[] { 0, 1, 1 };
b.Positions = new float[] { 0, .5F, 1 };
pgb.Blend = b;
pgb.CenterColor = ((SolidBrush)CurrentBrush).Color;
pgb.SurroundColors = new Color[] {CurrentPen.Color};
gTarget.FillPath(pgb, pTemp);
pgb.Dispose();
pTemp.Dispose();

annulus screenshot
(source: enigmadream.com)

I edited the original SGDK code for this sample because originally I wasn't smart enough to scale the gradient to exclude the hole, but now I guess I am :).

If you would rather see the gradient like this:

alt text
(source: enigmadream.com)

Then change the blend code to look like this:

Blend blend = new Blend();
blend.Factors = new float[] { 0, 1, 0, 0 };
blend.Positions = new float[] { 0, 0.25F, .5F, 1 };
pgb.Blend = blend;
Glorfindel
  • 21,988
  • 13
  • 81
  • 109
BlueMonkMN
  • 25,079
  • 9
  • 80
  • 146
0

You may use two calls to Graphics.DrawArc combined, drawing the top and bottom or left and right portions of the annulus, one portion at a time.

em70
  • 6,088
  • 6
  • 48
  • 80