C＃：如何在单个图像（例如* .png）中保存图表和文本框？

Question

Solution: Used DrawtoBitmap to draw the chart and textbox separately on the same bitmap, and saved it using bitmap.save.

Problem Description: I have code which analyses data and draws graphs saving them as a .png file. I want to add text in the .png file along with the graph chart. Is it possible to collage the chart and textbox to a single image, and save it as a single file? Please the the graph image.png i have till now, and how i want my text to be in the same image.

Answer 1

You have quite a number of options:

• You can take a screenshot

• You can Save the Chart 's Image and DrawToBitmap the TextBox and then draw the 2nd image over the former.

• You can Save the Chart 's Image and DrawString the TextBox.Text over the image

• You can add the TextBox to the Chart.Controls (in code!) and then use DrawToBitmap to make the chart draw both into one image.

• You can DrawString the text in a Chart.xxxPaint event and use DrawToBitmap

The next two options make the text a genuine part of the Chart:

• (Recommended:) you can use a TextAnnotation or a RectangleAnnotation : Place it at a suitable spot on the Chart and use maybe the TextBox.TextChanged event to copy the text into the TextAnnotation . This is the most 'chart-like' option and most likely what I would do.

• You could even replace the TextBox by a editable TextAnnotation ..!

Not seeing the chart and not knowing the purpose in any detail, it is hard to recommend which way to go..

All Annotations are a bit tricky to place, but will move when the chart is resized and will even be saved to xml when you serialize it. Well worth learning!

Update:

Here is an example that places the text right below the Legend , assuming it is on the default top right position.

Note that an ElementPosition contains both location and size and that all numbers are in percentages of the container, in out case of the Chart ..:

First we declare it globally; we also could access it via the chart.Annotions collection but I'm lazy; also note that I use a RectangleAnnotation , which is the same as TextAnnotation but with the option of back color and border..:

 RectangleAnnotation RA = null;

To create it I use this code:

RA = new RectangleAnnotation();
RA.BackColor = Color.LightPink;
RA.Alignment = ContentAlignment.TopLeft;
chart.Annotations.Add(RA);
RaPos();

To place it I use a function:

void RaPos()
{
    if (RA == null) return;
    ElementPosition LP = chart.Legends[0].Position;
    RA.X = LP.X;
    RA.Y = LP.Bottom + 5;  // 5% below the legend
    RA.Width = LP.Width;
    RA.Height = 100 - LP.Bottom  - 10;  // leave 10% of the remaining space
}

We need to adapt the position at some points like here:

private void chart_SizeChanged(object sender, EventArgs e)
{
    RaPos();
}

And to synch it with the textbox:

private void textBox1_TextChanged(object sender, EventArgs e)
{
    RA.Text = textBox1.Text;
}

When saving all Annotations do get saved, unless they were placed outside the visible area..:

chart.SaveImage(someFileName.png, ChartImageFormat.Png);

This annotation will always keep docked below the legend and will resize its height to fill the remaining space nicely..

Also note that by adding this: RA.AllowTextEditing = true; the user could doubleclick the rectangle and put the Annotation into editing mode with the need for a separate TextBox ..

Update 2:

Now, as you have posted the chart, I can see that you are docking the Legend to the bottom. Of course the code would need some changes, maybe like this:

When setting it up I create some space at the right side:

ChartArea ca = chart.ChartAreas[0];
ca.Position = new ElementPosition(5, 5, 75, 85); 

And in the positioning I create the new ElementPosition directly so to fit in:

// numbers are in percent!!
RA.X = 83;
RA.Y = 8;
RA.Width = 15;
RA.Height = 80;

Result: