PictureBox中的工具提示FillPie协调C＃

Question

I'm drawing a Circle made of 360 FillPie. Each FillPie color is taken from a List. I want to return a string that says at which degree is the mouse and how much is the value of the list to put it on a tooltip.

    List<int> datiDisco = new List<int>();

    public void Paint (Graphics grafica)
    {
        try
        {
            for (int i = 0; i < datiDisco.Count; i++)
            {
                Brush penna = new SolidBrush(Color.FromArgb(255, ScalaGrigi(valori[i]), ScalaGrigi(valori[i]), ScalaGrigi(valori[i])));
                grafica.FillPie(penna, 0, 0, 400, 400, i, 1.0f);
            }
        }
        catch
        {

        }
    }

until here the code is working and i managed to draw the circle with the correct color.Now i can't figure out how i can take the coordinate of each fillpie that i have drawn. Can someone help me?

Answer 1

Figuring out which pie segment the mouse cursor lies in is a simple application of trigonometry, specifically an application of the inverse tangent (aka arctangent or atan).

As a quick reminder for those who've encountered this before, or as a lesson for those who haven't, let's look quickly at the tangent function. Trigonometry deals with the geometry of right triangles, and by definition a right triangle has two sides and a hypotenuse. The hypotenuse is a special name for the side of the triangle opposite the right (90° or π/2) angle. The other two sides are helpfully just called sides.

The tangent function's value is the ratio of the side opposite an angle to the side adjacent to that angle. The arctangent is the angle whose tangent is equal to that ratio. Because of the symmetry of the function we need to calculate the angle, and then add or subtract an offset depending on the quadrant to extract the 'real' angle. In diagram form this looks like:

The tangent function has discontinuities at several points, namely when the adjacent side's length is 0 (90° and 270°), so we'll have to treat those points specially.

OK, enough math, now on to the practical application.

For this demo, create a new C# WinForms project, and on the default Form1 add a PictureBox .

First, since I don't have your color generation function, I use the following list of values and helper function:

List<int> values = Enumerable.Range(0, 360).ToList();
int Rescale(int x) => (int)(((double)x / 360.0) * 255.0);

In the constructor hook up a couple events, and set some properties:

public Form1()
{
    InitializeComponent();

    this.pictureBox1.BorderStyle = BorderStyle.Fixed3D;
    this.pictureBox1.Size = new Size(50, 50);
    this.Size = new Size(450, 450);

    this.DoubleBuffered = true;
    this.Paint += Form1_Paint;
    this.MouseMove += Form1_MouseMove;
}

To paint the circle I use a slightly modified version of your OnPaint handler:

private void Form1_Paint(object sender, PaintEventArgs e)
{
    e.Graphics.Clear(Color.Black);

    for (int i = 0; i < values.Count; i++)
    {
        Brush b = new SolidBrush(Color.FromArgb(255, Rescale(values[i]), 0, 0));
        e.Graphics.FillPie(b, 0, 0, 400, 400, (float)i, 1.0f);
    }
}

In the MouseMove event is where we do most of the heavy lifting:

private void Form1_MouseMove(object sender, MouseEventArgs e)
{
    this.pictureBox1.Location = new Point(e.X + 5, e.Y - 5);
    int segment = (int)GetAngle(new Rectangle(0, 0, 400, 400), e.Location);
    this.pictureBox1.BackColor = Color.FromArgb(255, Rescale(segment), 0, 0);
}

You may notice that since there are 360 wedges are in increments of a degree, I just truncated the angle. If you need more precision, or you decide to use segments greater than 1 degree, then you could use various rounding algorithms to round the angle to the nearest section of the pie.

At last, we're ready to implement the GetAngle function. First we calculate the center of the circle, because everything is relative to that.

int cx = (rect.Width + rect.X) / 2;
int cy = (rect.Height + rect.Y) / 2;

Next calculate the difference between the mouse's position and the center of the rectangle. (I've inverted the y coordinate to line up with 'standard' Cartesian coordinates, to make things easier, and match the coordinates you'd see in a math textbook.)

float x = pTo.X - cx;
float y = (cy - pTo.Y);

Next check for the arctangent's undefined points (and a couple of shortcuts we can take):

if ((int)x == 0)
{
    if (y > 0) return 270;
    else return 90;
}
else if ((int)y == 0)
{
    if (x > 0) return 0;
    else return 180;
}

Calculate the internal angle:

float ccwAngle = (float)Math.Atan(Math.Abs(y) / Math.Abs(x));

And map that angle to the appropriate quadrant:

if (x > 0 && y > 0)
{

}
else if (x < 0 && y > 0)
{
    ccwAngle = (float)Math.PI - ccwAngle;
}
else if (x < 0 && y < 0)
{
    ccwAngle = ccwAngle + (float)Math.PI;
}
else if (x > 0 && y < 0)
{
    ccwAngle *= -1f;
}

Convert the angle from degrees to radians and normalize (make sure it's between 0° and 360°)

ccwAngle *= (float)(180 / Math.PI);
while (ccwAngle > 360) ccwAngle -= 360;
while (ccwAngle < 0) ccwAngle += 360;

Finally convert the counter-clockwise angle we needed to do the math into the clockwise angle that GDI uses, and return the value:

return 360f - ccwAngle;

All that together produces the final result:

(The code above is also available as a complete example in this gist )