We Keep Coding

Lines drawn on a large Bitmap are not visible when the image is saved

I have created a program to draw square grids on a selected image. It works fine for images that has small resolution, but it doesn't work properly on large images.
The all grid lines are not visible seem when the image is saved as file.
The image I am testing has resolution 3600x4320 and can be shown in the link.
How can I fix this problem?
My code:
Image drawGrid(int n, string imgPath)
{
Image img = Image.FromFile(imgPath);
Graphics grp = Graphics.FromImage(img);
grp.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;
float m = img.Width * 1f / n;
for (int i = 1; i < n; i++)
{
var x = new PointF(i * m, 0);
var y = new PointF(i * m, img.Height);
grp.DrawLine(Pens.Red, x, y);
}
for (int i = 1; i <= (int)(this.Height / m); i++)
{
var x = new PointF(0, i * m);
var y = new PointF(img.Width, i * m);
grp.DrawLine(new Pen(Color.Red, 5f), x, y);
}
return img;
}
void BtnExportClick(object sender, EventArgs e)
{
if(saveFileDialog1.ShowDialog() == DialogResult.OK)
{
int n = (int)numericUpDown1.Value;
drawGrid(n, txtImagePath.Text).Save(saveFileDialog1.FileName, System.Drawing.Imaging.ImageFormat.Jpeg);
MessageBox.Show("Done");
}
}
The result image is below (resolution reduced to upload)
The grid lines not shown correctly.

The major problem is in this line:
for (int i = 1; i <= (int)(this.Height / m); i++)
▶ this.Height is clearly not what you wanted to write, let's replace it with the Image.Height
▶ grp.DrawLine(Pens.Red, x, y); and grp.DrawLine(new Pen(Color.Red, 5f), x, y); will draw lines of different size (1 and 5 pixels). In the sample code, the two methods accept Color and float arguments that define the Pen color and size.
▶ grp.SmoothingMode: we don't want any smoothing mode here, not needed to draw straight lines and it will add anti-alias which will be clearly visible, especially when saving the Image in JPEG format (it will anti-alias - sort of, it actually mangles the colors - these lines by itself).
▶ You're not disposing of any of the Graphics object you create. This is quite important with both frequent graphics operations and when working with large Bitmaps.
The Pen and Graphics objects needs to be disposed.
Since it's not exactly clear if you want to generate a grid that has the same number of lines in both dimensions - hence, a grid with Cells in which the Width is not equal to the Height, most probably - or a grid with squared Cells (this is what the sample Image seems to show, not the code), I posted two method that draw both grid types:
First method, same number of lines in both width and height:
var gridSizeX = (float)image.Width / lines;
var gridSizeY = (float)image.Height / lines;
private Image DrawGridLines(int lines, string imgPath, Color penColor, float penSize)
{
var image = Image.FromStream(new MemoryStream(File.ReadAllBytes(imgPath)), true);
using (var g = Graphics.FromImage(image)) {
g.PixelOffsetMode = PixelOffsetMode.Half;
var gridSizeX = (float)image.Width / lines;
var gridSizeY = (float)image.Height / lines;
for (int i = 1; i < lines; i++) {
var pointX1 = new PointF(0, i * gridSizeY);
var pointX2 = new PointF(image.Width, i * gridSizeY);
var pointY1 = new PointF(i * gridSizeX, 0);
var pointY2 = new PointF(i * gridSizeX, image.Height);
using (var pen = new Pen(penColor, penSize)) {
g.DrawLine(pen, pointX1, pointX2);
g.DrawLine(pen, pointY1, pointY2);
}
}
return image;
}
}
Second method, drawing a squared grid. The integer value, gridSection, is used to define a grid Cell based on the minimum dimension of the Bitmap.
This dimension is then used to determine how many lines to draw in the other dimension.
The grid size is calculated on the minimum dimension:
var gridSize = (float)Math.Min(image.Width, image.Height) / gridSection;
And the Cell are determined as a consequence:
var gridStepMin = Math.Min(image.Width, image.Height) / gridSize;
var gridStepMax = Math.Max(image.Width, image.Height) / gridSize;
private Image DrawSquaredGrid(int gridSection, string imgPath, Color penColor, float penSize)
{
var image = Image.FromStream(new MemoryStream(File.ReadAllBytes(imgPath)), true);
using (var g = Graphics.FromImage(image)) {
g.PixelOffsetMode = PixelOffsetMode.Half;
var gridSize = (float)Math.Min(image.Width, image.Height) / gridSection;
var gridStepMin = Math.Min(image.Width, image.Height) / gridSize;
var gridStepMax = Math.Max(image.Width, image.Height) / gridSize;
for (int i = 1; i < gridStepMin; i++) {
var pointY1 = new PointF(i * gridSize, 0);
var pointY2 = new PointF(i * gridSize, image.Height);
using (var pen = new Pen(penColor, penSize)) {
g.DrawLine(pen, pointY1, pointY2);
}
}
for (int i = 1; i < gridStepMax; i++) {
var pointX1 = new PointF(0, i * gridSize);
var pointX2 = new PointF(image.Width, i * gridSize);
using (var pen = new Pen(penColor, penSize)) {
g.DrawLine(pen, pointX1, pointX2);
}
}
return image;
}
}
The SaveFileDialog is refactored to allow multiple Image formats. and to call one of the drawing methods based on a selection (in the sample code, a CheckBox (chkSquared) is used select one of the Grid types).
You can add more formats, the ImageFormatFromFileName() methods selects the ImageFormat type based on the SaveFileDialog.FielName extension.
private void BtnExportClick(object sender, EventArgs e)
{
string imagePath = [Some Path];
using (var sfd = new SaveFileDialog()) {
sfd.Filter = "PNG Image (*.png)|*.png|TIFF Image (*.tif)|*.tif|JPEG Image (*.jpg)|*.jpg";
sfd.RestoreDirectory = true;
sfd.AddExtension = true;
if (sfd.ShowDialog() == DialogResult.OK) {
Image image = null;
if (chkSquared.Checked) {
image = DrawSquaredGrid((int)numericUpDown1.Value, imagePath, Color.Red, 5.0f);
}
else {
image = DrawGridLines((int)numericUpDown1.Value, imagePath, Color.Red, 5.0f);
}
image.Save(sfd.FileName, ImageFormatFromFileName(sfd.FileName));
MessageBox.Show("Done");
image.Dispose();
}
}
}
private ImageFormat ImageFormatFromFileName(string fileName)
{
string fileType = Path.GetExtension(fileName).Remove(0, 1);
if (fileType.Equals("tif")) fileType = "tiff";
if (fileType.Equals("jpg")) fileType = "jpeg";
return (ImageFormat)new ImageFormatConverter().ConvertFromString(fileType);
}

C# - asynchronous drawing on a panel

In my Winforms application I'm attempting to recreate the Monte Carlo Method to approximate PI. The form itself consists of a box in which the user provides the amount of points and a panel, on which I want to draw. For this example though, let's assume the amount is going to be constant.
private int Amount = 10000;
private int InCircle = 0, Points = 0;
private Pen myPen = new Pen(Color.White);
private void DrawingPanel_Paint(object sender, PaintEventArgs e)
{
int w = DrawingPanel.Width, h = DrawingPanel.Height;
e.Graphics.TranslateTransform(w / 2, h / 2);
//drawing the square and circle in which I will display the points
var rect = new Rectangle(-w / 2, -h / 2, w - 1, h - 5);
e.Graphics.DrawRectangle(myPen, rect);
e.Graphics.DrawEllipse(myPen, rect);
double PIE;
int X, Y;
var random = new Random();
for (int i = 0; i < Amount; i++)
{
X = random.Next(-(w / 2), (w / 2) + 1);
Y = random.Next(-(h / 2), (h / 2) + 1);
Points++;
if ((X * X) + (Y * Y) < (w / 2 * h / 2))
{
InCircle++;
e.Graphics.FillRectangle(Brushes.LimeGreen, X, Y, 1, 1);
}
else
{
e.Graphics.FillRectangle(Brushes.Cyan, X, Y, 1, 1);
}
//just so that the points appear with a tiny delay
Thread.Sleep(1);
}
PIE = 4 * ((double)InCircle/(double)Points);
}
And this works. The visualization is great.
However, now I would like to recreate this asynchronously, so that while this is being drawn in the background, the app is still responsible and the user can do something else, or even just move the window around.
Initially I made a second method that does the drawing, which I call from the Event Handler:
private double Calculate(PaintEventArgs e)
{
int w = DrawingPanel.Width, h = DrawingPanel.Height;
double PIE;
int X, Y;
var random = new Random();
for (int i = 0; i < Amount; i++)
{
X = random.Next(-(w / 2), (w / 2) + 1);
Y = random.Next(-(h / 2), (h / 2) + 1);
Points++;
if ((X * X) + (Y * Y) < (w / 2 * h / 2))
{
InCircle++;
e.Graphics.FillRectangle(Brushes.LimeGreen, X, Y, 1, 1);
}
else
{
e.Graphics.FillRectangle(Brushes.Cyan, X, Y, 1, 1);
}
Thread.Sleep(1);
}
PIE = 4 * ((double)InCircle/(double)Points);
return PIE;
}
private void DrawingPanel_Paint(object sender, PaintEventArgs e)
{
int w = DrawingPanel.Width, h = DrawingPanel.Height;
e.Graphics.TranslateTransform(w / 2, h / 2);
var rect = new Rectangle(-w / 2, -h / 2, w - 1, h - 5);
e.Graphics.DrawRectangle(myPen, rect);
e.Graphics.DrawEllipse(myPen, rect);
var result = Calculate(e);
}
And this worked fine as well. Until I made the event handler async.
private async void DrawingPanel_Paint(object sender, PaintEventArgs e) {...}
Now, when I try running the Calculate method, either through Task.Run, or when I change its return type to Task and start that, I get the error: "Parameter is not valid" in the following line:
e.Graphics.FillRectangle(Brushes.LimeGreen, X, Y, 1, 1);
Now the question, is it possible to draw on a panel asynchronously, so that other parts of the app are not locked? And if not, is there a way to recreate this algorithm using any other way (not necessarily a panel)? Cheers.

You must not draw in a form or control from another thread. In debugging mode, WinForms will raise an exception if you do.
The best approach would be to use a Timer component. On each tick of the timer do one step from your loop. You will have to, of course, move the look counter as a global variable.

The issues other posters raise are completely valid, but this is actually completely achievable if you alter strategy a little.
While you can't draw to a UI Graphics context on another thread, there is nothing stopping you drawing to a non-UI one. So what you could do is to have a buffer to which you draw:
private Image _buffer;
You then decide what your trigger event for beginning drawing is; let's assume here it's a button click:
private async void button1_Click(object sender, EventArgs e)
{
if (_buffer is null)
{
_buffer = new Bitmap(DrawingPanel.Width, DrawingPanel.Height);
}
timer1.Enabled = true;
await Task.Run(() => DrawToBuffer(_buffer));
timer1.Enabled = false;
DrawingPanel.Invalidate();
}
You'll see the timer there; you add a Timer to the form and set it to match the drawing refresh rate you want; so 25 frames/second would be 40ms. In the timer event, you simply invalidate the panel:
private void timer1_Tick(object sender, EventArgs e)
{
DrawingPanel.Invalidate();
}
Most of your code just moves as-is into the DrawToBuffer() method, and you grab the Graphics from the buffer instead of from the UI element:
private void DrawToBuffer(Image image)
{
using (Graphics graphics = Graphics.FromImage(image))
{
int w = image.Width;
int h = image.Height;
// Your code here
}
}
Now all you need is to change the panel paint event to copy from the buffer:
private void DrawingPanel_Paint(object sender, PaintEventArgs e)
{
if (!(_buffer is null))
{
e.Graphics.DrawImageUnscaled(_buffer, 0, 0);
}
}
Copying the buffer is super-fast; probably uses BitBlt() underneath.
A caveat is you now need to be a little more careful about UI changes. E.g. if it is possible to change the size of your DrawingPanel half-way through a buffer render, you need to cater for that. Also, you need to prevent 2 buffer updates happening simultaneously.
There might be other things you need to cater for; e.g. you might need to DrawImage() instead of DrawImageUnscaled(), etc. I'm not claiming the above code is perfect, just something to give you an idea to work with.

You cannot make it asynchronously, because all drawings have to be made on UI thread.
What you can do is to utilize Application.DoEvents() to signal UI that it can process pending messages:
for (int i = 0; i < Amount; i++)
{
// consider extracting it to a function and separate calculation\logic from drawing
X = random.Next(-(w / 2), (w / 2) + 1);
Y = random.Next(-(h / 2), (h / 2) + 1);
Points++;
if ((X * X) + (Y * Y) < (w / 2 * h / 2)) // and this too
{
InCircle++;
e.Graphics.FillRectangle(Brushes.LimeGreen, X, Y, 1, 1);
}
else
{
// just another one suggestion - you repeat your code, only color changes
e.Graphics.FillRectangle(Brushes.Cyan, X, Y, 1, 1);
}
Thread.Sleep(1); // do you need it? :)
Application.DoEvents(); //
}
It will make your application responsive during drawing.
Read more about Application.DoEvents() here:
Use of Application.DoEvents()

C# Forms Print Image As Big As Possible [duplicate]

This question already has answers here:
c# Image resizing to different size while preserving aspect ratio
(14 answers)
Closed 4 years ago.
I want to print an image on Windows Forms, but I want to print the image as big as possible on the page without breaking its aspect ratio. Like when I want to print a simple square to A4 paper it becomes rectangle with this script:
private void Page(object sender, PrintPageEventArgs e)
{
Bitmap i = image;
if(e.PageBounds.Height > e.PageBounds.Width)
{
if (i.Width > i.Height)
i.RotateFlip(RotateFlipType.Rotate90FlipNone);
}
else if(e.PageBounds.Width > e.PageBounds.Height)
{
if (i.Height > i.Width)
i.RotateFlip(RotateFlipType.Rotate90FlipNone);
}
e.Graphics.DrawImage(i, new Rectangle(0, 0, e.PageBounds.Width, e.PageBounds.Height));
i.Dispose();
}
Original:
500x500 square
What I got (as pdf):
A rectangle on the A4 paper
Another example:
Original:Original image(313x234)
Print:Print image
I don't want to break the aspect ratio of the image

Try this:
private void Page(object sender, PrintPageEventArgs e)
{
using (Bitmap i = image) //are you *really sure* you want to dispose this after printing?
{
var pageRatio = e.PageBounds.Width / (double)e.PageBounds.Height;
var imageRatio = i.Width / (double)i.Height;
//do we need to rotate?
if ( (pageRatio < 1 && imageRatio > 1) || (pageRatio < 1 && imageRatio > 1))
{
i.RotateFlip(RotateFlipType.Rotate90FlipNone);
imageRatio = i.Width / (double)i.Height; //ratio will have changed after rotation
}
var scale = 1.0D;
//do we need to scale?
if (pageRatio > imageRatio)
{ //the page is wider than the image, so scale to the height
scale = e.PageBounds.Height / (double)i.Height;
}
else if (pageRatio < imageRatio)
{ //the page is narrower than the image, so scale to width
scale = e.PageBounds.Width / (double)i.Width;
}
var W = (int)(scale * i.Width);
var H = (int)(scale * i.Height);
e.Graphics.DrawImage(i, new Rectangle(0, 0, W, H));
}
}
This will always draw from the top left corner. If you want it centered, you need to make additional adjustments:
private void Page(object sender, PrintPageEventArgs e)
{
using (Bitmap i = image) //are you *really sure* you want to dispose this after printing?
{
var pageRatio = e.PageBounds.Width / (double)e.PageBounds.Height;
var imageRatio = i.Width / (double)i.Height;
//do we need to rotate?
if ( (pageRatio < 1 && imageRatio > 1) || (pageRatio < 1 && imageRatio > 1))
{
i.RotateFlip(RotateFlipType.Rotate90FlipNone);
imageRatio = i.Width / (double)i.Height; //ratio will have changed after rotation
}
int T = 0, L = 0; //top, left
var scale = 1.0D;
int W = i.Width, H = i.Height;
//do we need to scale?
if (pageRatio > imageRatio)
{ //the page is wider than the image, so scale to the height
scale = e.PageBounds.Height / (double)i.Height;
W = (int)(scale * i.Width);
H = (int)(scale * i.Height);
L = (e.PageBounds.Width - W)/2;
}
else if (pageRatio < imageRatio)
{ //the page is narrower than the image, so scale to width
scale = e.PageBounds.Width / (double)i.Width;
W = (int)(scale * i.Width);
H = (int)(scale * i.Height);
T = (e.PageBounds.Height - H)/2;
}
e.Graphics.DrawImage(i, new Rectangle(L, T, W+L, H+T));
}
}
The important thing is both the width and height are adjusted to the same scale... that is, multiplied by the same number.

c# nothing printed though there are many data

I have a grid view and I want to print it.
This is my code:
private void printDocument1_PrintPage(object sender, System.Drawing.Printing.PrintPageEventArgs e) {
int rowCounter = 0;
int z = 0;
StringFormat str = new StringFormat();
str.Alignment = StringAlignment.Near;
str.LineAlignment = StringAlignment.Center;
str.Trimming = StringTrimming.EllipsisCharacter;
int width = 500 / (GridView.Columns.Count - 2);
int realwidth = 100;
int height = 40;
int realheight = 100;
for (z = 0; z < GridView.Columns.Count - 1; z++)
{
e.Graphics.FillRectangle(Brushes.AliceBlue, realwidth, realheight, width, height);
e.Graphics.DrawRectangle(Pens.Black, realwidth, realheight, width, height);
e.Graphics.DrawString(GridView.Columns[z].HeaderText, GridView.Font, Brushes.Black, realwidth, realheight);
realwidth = realwidth + width;
}
z = 0;
realheight = realheight + height;
while (rowCounter < GridView.Rows.Count)
{
realwidth = 100;
e.Graphics.FillRectangle(Brushes.AliceBlue, realwidth, realheight, width, height);
e.Graphics.DrawRectangle(Pens.Black, realwidth, realheight, width, height);
e.Graphics.DrawString(GridView.Rows[rowCounter].Cells[0].Value.ToString(), GridView.Font, Brushes.Black, realwidth, realheight);
realwidth = realwidth + width;
}
printDialog1.Document = printDocument1;
printDialog1.ShowDialog();
}
and when the use click on the printing button, I do this:
DialogResult result = printDialog1.ShowDialog();
if (result == DialogResult.OK)
{
this.printDocument1.Print();
}
plus in the construction of the form, I initialze the printing variables like this:
this.printDocument1 = new System.Drawing.Printing.PrintDocument();
this.printDialog1 = new System.Windows.Forms.PrintDialog();
my problem that when I click print, I got empty page though the grid view has more than 320 rows
Update 1
I am following this tutorial http://code.msdn.microsoft.com/windowsdesktop/CSWinFormPrintDataGridView-75864c45
Update 2
The grid view variable is GridView
The code is straightforward I guess
Update 3
I added
++rowCounter;
realheight = realheight + height;
ad the end of the while loop and still the same result

Your code as posted has at least three problems:
In your rows loop you don't advance the rowcounter, which will result in an endless loop.
You also don't advance your realheight variable, which will in result in overprinting all lines
since none of this happens your printDocument1_PrintPage event isn't called; you have probably only copied the code from the example and not actually hooked it up with the printDocument1.
Add to the loop's end:
rowCounter++;
realheight += height;
and in the constructor:
this.printDocument1.PrintPage += this.printDocument1_PrintPage;
Fixing these problems should at least print out something...

Printing PDF with Multiple Pages

I've looked all over for something to help me with this, but so far nothing. I am trying to create a program that allows a user to print a collection of pdfs. I am using ABCPDF9 to get my pdfs (most of which are stored as html) and append them all to a single ABCPDF.Doc object. The problem I'm getting is when I have these multiple pages I end up with only one page of the pdf printing. Here are some code snippets below.
private void ProcessAndPrintSelected()
{
var selectedForm = SubSonicRepository.Instance.CommunicationRepository.GetMessageTemplateByID((int)cmboChooseForm.SelectedValue);
_currentItemIndex = 0;
int itemsCount = dataGridViewLoans.RowCount;
_currentPrintPageIndex = 1;
foreach (DataGridViewRow row in this.dataGridViewLoans.Rows)
{
lblPrinterProgress.Text = "Printing document " + _currentItemIndex + " of " + itemsCount + ".";
lblPrinterProgress.Refresh();
Application.DoEvents();
BulkPrinterLoanModel loan = row.DataBoundItem as BulkPrinterLoanModel;
try
{
if (selectedForm.MailMessageContent != null)
{
byte[] formBytes = GetFormBytes(selectedForm.ID, loan.ApplicantID, loan.LoanID);
doc.Read(formBytes);
appendedDocs.Append(doc);
}
else
{
throw new InvalidOperationException("No PDF data to print.");
}
}
catch (Exception x)
{
//for now, don't do anything, not even logging, but don't halt queue either.
MessageBox.Show(x.ToString());
}
}
printDoc.PrintPage += new PrintPageEventHandler(pd_PrintPage);
printDoc.PrinterSettings.FromPage = 1;
printDoc.PrinterSettings.ToPage = appendedDocs.PageCount;
printDoc.PrinterSettings.MinimumPage = 1;
printDoc.PrinterSettings.MaximumPage = appendedDocs.PageCount;
PrintDialog pDialog = new PrintDialog();
pDialog.Document = printDoc;
pDialog.AllowSomePages = true;
if (pDialog.ShowDialog() == DialogResult.OK)
{
pDialog.Document.Print();
}
}
and my printpage event.
void pd_PrintPage(object sender, PrintPageEventArgs e)
{
XRect cropBox = appendedDocs.CropBox;
double srcWidth = (cropBox.Width / 72) * 100;
double srcHeight = (cropBox.Height / 72) * 100;
double pageWidth = e.PageBounds.Width;
double pageHeight = e.PageBounds.Height;
double marginX = e.PageSettings.HardMarginX;
double marginY = e.PageSettings.HardMarginY;
//center it
double x = (pageWidth - srcWidth) / 2;
double y = (pageHeight - srcHeight) / 2;
x -= marginX;
y -= marginY;
RectangleF rect = new RectangleF((float)x, (float)y, (float)srcWidth, (float)srcHeight);
appendedDocs.Rect.SetRect(cropBox);
int rez = e.PageSettings.PrinterResolution.X;
appendedDocs.Rendering.DotsPerInch = rez;
Graphics g = e.Graphics;
using (Bitmap bitmap = appendedDocs.Rendering.GetBitmap())
{
g.DrawImage(bitmap, rect);
}
}
I've looked in the ABCPDF manual, but all the help on printing is presented in their sample project which I'm having a hard time understanding. Any help on this matter would be appreciated. Thanks :)

I got it, mostly from looking at the following question. I needed to use the Doc.PageNumber to access each page of the pdf. Here's the print page event where I changed the code.
void pd_PrintPage(object sender, PrintPageEventArgs e)
{
_currentItemIndex++;//added index to keep track of page. default to 1
appendedDocs.PageNumber = _currentItemIndex;//set to current page for printing
XRect cropBox = appendedDocs.CropBox;
double srcWidth = (cropBox.Width / 72) * 100;
double srcHeight = (cropBox.Height / 72) * 100;
double pageWidth = e.PageBounds.Width;
double pageHeight = e.PageBounds.Height;
double marginX = e.PageSettings.HardMarginX;
double marginY = e.PageSettings.HardMarginY;
//center it
double x = (pageWidth - srcWidth) / 2;
double y = (pageHeight - srcHeight) / 2;
x -= marginX;
y -= marginY;
RectangleF rect = new RectangleF((float)x, (float)y, (float)srcWidth, (float)srcHeight);
appendedDocs.Rect.SetRect(cropBox);
int rez = e.PageSettings.PrinterResolution.X;
appendedDocs.Rendering.DotsPerInch = rez;
Graphics g = e.Graphics;
using (Bitmap bitmap = appendedDocs.Rendering.GetBitmap())
{
g.DrawImage(bitmap, rect);
}
e.HasMorePages = _currentItemIndex < appendedDocs.PageCount;//check for more pages.
}
Feel silly having asked this question and then answering myself. But it feels good knowing that this question is now out there for anyone else that gets stuck on the issue.