I need a perspective transformation for a crooked rectangle - c#

Is there some way to rotate an image in a certain way? I will explain it to you: I do not want the rotation in the sense of PictureBox1.Image.RotateFlip(RotateFlipType.Rotate90FlipNone), or as shown here, but rather orient a crooked rectangle to the camera (being flush with the camera).
I made a drawing for this. This is a view from above. Imagine, you are the person who is standing at point (0, 0) and currently taking a picture of the body („Rechteck“). I want to rotate that image by a certain angle, for example 35°, because you stood 35° to the body (perspectively).
I've already prepared some source code and did the math for that.
The code works like follows: The user has to enter the distance from himself to the center of the rectangle, as well as the angle. In the attached picture this is the red line. You also need to know how wide the rectangle is. The program calculates the x and y coordinates (x_v and y_v). The program calculates all distances and angles from the left edge of the rectangle to the right edge.
using System;
using System.Collections.Generic;
using System.Drawing;
using System.Linq;
using System.Threading.Tasks;
using System.Windows.Forms;
namespace schiefes_Rechteck
{
public partial class Form_Main : Form
{
/// <summary>
/// entered angle in degrees
/// </summary>
private Int16 eingegebener_Winkel_in_Grad;
private UInt16 Radius_in_mm;
/// <summary>
/// Length of the rectangle in mm
/// </summary>
private UInt16 Laenge_des_Rechtecks_in_mm;
/// <summary>
/// all distances [mm]
/// </summary>
private List<double> alle_Entfernungen = new List<double>();
/// <summary>
/// all angles [°]
/// </summary>
private List<double> alle_Winkel = new List<double>();
public Form_Main()
{
InitializeComponent();
}
private void Form_Main_Load(object sender, EventArgs e)
{
this.BackColor = Color.FromArgb(148, 148, 109);
this.Location = new Point(0, 0);
Button_Start.BackColor = Color.FromArgb(194, 194, 165);
TextBox_Entfernung.Text = "1300";
TextBox_Winkel.Text = "35";
TextBox_Rechtecklaenge.Text = "503";
if (System.IO.File.Exists(Application.StartupPath + "\\schiefes_Rechteck_Grafik.PNG"))
{
PictureBox1.Image = Image.FromFile(Application.StartupPath + "\\schiefes_Rechteck_Grafik.PNG");
}
}
private void Form_Main_FormClosing(object sender, FormClosingEventArgs e)
{
if (PictureBox1.Image != null)
{
PictureBox1.Image.Dispose();
}
if (PictureBox2.Image != null)
{
PictureBox2.Image.Dispose();
}
}
private void TextBox_Entfernung_TextChanged(object sender, EventArgs e)
{
if (!string.IsNullOrEmpty(TextBox_Entfernung.Text))
{
bool erfolgreich = UInt16.TryParse(TextBox_Entfernung.Text, out Radius_in_mm);
if (erfolgreich)
{
TextBox_Entfernung.ForeColor = Color.FromArgb(0, 163, 0);
}
else
{
TextBox_Entfernung.ForeColor = Color.FromArgb(163, 0, 0);
}
}
}
private void TextBox_Winkel_TextChanged(object sender, EventArgs e)
{
if (!string.IsNullOrEmpty(TextBox_Winkel.Text))
{
bool erfolgreich = Int16.TryParse(TextBox_Winkel.Text, out eingegebener_Winkel_in_Grad);
if (erfolgreich)
{
TextBox_Winkel.ForeColor = Color.FromArgb(0, 163, 0);
}
else
{
TextBox_Winkel.ForeColor = Color.FromArgb(163, 0, 0);
}
}
}
private void TextBox_Rechtecklaenge_TextChanged(object sender, EventArgs e)
{
if (!string.IsNullOrEmpty(TextBox_Rechtecklaenge.Text))
{
bool erfolgreich = UInt16.TryParse(TextBox_Rechtecklaenge.Text, out Laenge_des_Rechtecks_in_mm);
if (erfolgreich)
{
TextBox_Rechtecklaenge.ForeColor = Color.FromArgb(0, 163, 0);
}
else
{
TextBox_Rechtecklaenge.ForeColor = Color.FromArgb(163, 0, 0);
}
}
}
private async void Button_Start_Click(object sender, EventArgs e)
{
ListBox1.Items.Clear();
await Task.Run(() => Berechnung_aller_Werte());
}
private void Berechnung_aller_Werte()
{
alle_Entfernungen.Clear();
alle_Winkel.Clear();
double x_v, y_v; // Mitte des Rechtecks, davon die x-Koordinate und die y-Koordinate.
x_v = Radius_in_mm * Math.Cos((90.0 - (double)eingegebener_Winkel_in_Grad) * Math.PI / 180.0); //richtig
y_v = Radius_in_mm * Math.Sin((90.0 - (double)eingegebener_Winkel_in_Grad) * Math.PI / 180.0); //richtig
double alpha_in_Grad = 0.0;
double Entfernung = 0.0;
double halbe_Rechteckbreite = Laenge_des_Rechtecks_in_mm / 2.0;
double Position_linker_Rand = x_v - halbe_Rechteckbreite; //richtig
double Zaehler = 0.0;
while (Zaehler < Laenge_des_Rechtecks_in_mm)
{
alpha_in_Grad = Math.Atan((Position_linker_Rand + Zaehler) / y_v) * 180.0 / Math.PI;
alle_Winkel.Add(alpha_in_Grad);
Entfernung = Math.Sqrt(Math.Pow(Position_linker_Rand + Zaehler, 2) + Math.Pow(y_v, 2));
alle_Entfernungen.Add(Entfernung);
Zaehler += 1.0;
}
this.BeginInvoke((Action)(() => { ListBox1.Items.Add(Math.Round(alle_Entfernungen.Last(), 0).ToString() + " mm"); ListBox1.Items.Add(Math.Round(alle_Winkel.Last(), 0).ToString() + " °"); }));
}
}//Form
}

If you want a non-crooked image, i.e., all lines remain either vertical or horizontal, then all what happens to the image is that its width will appear smaller when viewed from the side, and its height will remain the same.
Get the scaling factor for the x-Axis by dividing the apparent angle under which you see the image, i.e., the angle between the yellow-green and the pink lines in your image, by the corresponding angle you would have when standing right in front of the image. A very good approximation for this factor is simply cos(36° * PI / 180), where the angle is the angle to your red line in the image.
xScale = Math.Cos(angleToMidLineInDegrees * Math.PI / 180);
yScale = 1;
or simply
xScale = Math.Cos(angleToMidLineInRadians);
yScale = 1;
where
angleToMidLineInRadians = Math.ATan(x_redLine / y_v);
or in one step
xScale = y_v / Math.Sqrt(x_redLine * x_redLine + y_v * y_v);
See: cos(arctan(x/y)) on WolframAlpha.
However, when transforming an image, you must do the inverse transformation (as explained towards the end of the video), because you want to determine the pixels of the transformed image. I.e., you will do in pseudo code (where t means transformed and without t are the coordinates in the original):
for (yt = 0 to height_t - 1; yt++) {
for (xt = 0 to width_t - 1; xt++) {
(x, y) = inverse_transformation(xt, yt);
color_t = get_color(picture, x, y);
draw(picture_t, xt, yt, color_t);
}
}

Related

DrawArc is Coming up Short

I am having a small issue with using Graphics.DrawArc method. When used it's coming up short than what the actual size is. I am basing this control off another post found here
I am trying to make this into a UserControl with some properties and expand on it. The issue is when I set the percentage per say 50% it comes up short...
This is what the UserControl looks like at 50%... It's should be centered (blue) at the bottom of circle. I have tried adjusting everything I could, but I am at lost right now.
Here is my current code...
Color _ProgressCompletedColor = SystemColors.MenuHighlight;
Color _ProgressNotCompleted = Color.LightGray;
Int32 _ProgressThickness = 2;
Single _ProgressCompleted = 25;
public AttuneProgressBar()
{
InitializeComponent();
}
public Single PercentageCompleted
{
get
{
return this._ProgressCompleted;
}
set
{
this._ProgressCompleted = value;
this.Invalidate();
}
}
public Int32 ProgressBarThickness
{
get
{
return this._ProgressThickness;
}
set
{
this._ProgressThickness = value;
this.Invalidate();
}
}
public Color ProgressNotCompletedColor
{
get
{
return this._ProgressNotCompleted;
}
set
{
this._ProgressNotCompleted = value;
this.Invalidate();
}
}
public Color ProgressCompletedColor
{
get
{
return this._ProgressCompletedColor;
}
set
{
this._ProgressCompletedColor = value;
this.Invalidate();
}
}
protected override void OnPaint(PaintEventArgs e)
{
// Call the OnPaint method of the base class.
base.OnPaint(e);
DrawProgress(e.Graphics, new Rectangle(new Point(1,1), new Size(this.ClientSize.Width - 3, this.ClientSize.Height - 3)), PercentageCompleted);
}
private void DrawProgress(Graphics g, Rectangle rec, Single percentage)
{
Single progressAngle = (360 / 100 * percentage);
Single remainderAngle = 360 - progressAngle;
try
{
using (Pen progressPen = new Pen(ProgressCompletedColor, ProgressBarThickness), remainderPen = new Pen(ProgressNotCompletedColor, ProgressBarThickness))
{
g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.AntiAlias;
g.DrawArc(progressPen, rec, -90, progressAngle);
g.DrawArc(remainderPen, rec, progressAngle - 90, remainderAngle);
}
}
catch (Exception exc) { }
}
}
You are calculating the angle with integers. When you do this:
angle = 360 / 100 * percentage;
it means
angle = 3 * percentage;
this of course leads to errors. There is a simple fix if you want to keep using ints:
angle = 360 * percentage / 100;
This way it doesn't get rounded down before multiplication. Or you can just use floats all the way:
angle = 360f / 100f * percentage;

GDI+ zoom in/out base on mouse pointer

I want to zoom in/out vector graphics base on mouse pointer as center.
My code like that:
Matrix m_globalMatrix = new Matrix();
PointF m_scalePos;
float m_perZoom = 1.2f;
float m_zoom = 1f;
void ReCoord(){
m_globalMatrix.Reset();
m_globalMatrix.Translate(m_scalePos.X, m_scalePos.Y);
m_globalMatrix.Scale(m_zoom, m_zoom);
m_globalMatrix.Translate(-m_scalePos.X, -m_scalePos.Y);
}
protected override void OnMouseWheel(MouseEventArgs e)
{
base.OnMouseWheel(e);
//PointF temp;
//temp = CoordTransform(e.Location);
m_scalePos = (PointF)ScreenToCoord(e.Location);
Console.WriteLine("m_scalePos:{0},Zoom:{1}", m_scalePos, m_zoom);
if (e.Delta < 0)
{
m_zoom /= m_perZoom;
}
else
{
m_zoom *= m_perZoom;
}
ReCoord();
Invalidate();
}
public CoordPoint ScreenToCoord(PointF screenPoint)
{
PointF[] points = new PointF[] { screenPoint };
Matrix mx = m_globalMatrix.Clone();
mx.TransformPoints(points);
/*
mx = m_coordMatrix.Clone();
mx.TransformPoints(points);
*/
return points[0];
/* I have struct like that:
struct CoordPoint{
float x,y;
public static implicit operator CoordPoint(System.Drawing.PointF p)
{
return new CoordPoint(p.X, p.Y);
}
}
*/
}
When the m_zoom arrived at 10 or more,it will be abnormal.
The mouseWheel scroll quickly,it will also be abnormal.
For example,when I slowly scroll mousewheel at point (50,50) before m_zoom < 10,it will print m_scalePos:(50,50).
The exception will not print m_scale:(50,50),even throw OverflowException.
There are my test paint Code:
protected override void OnPaint(PaintEventArgs e)
{
base.OnPaint(e);
if (m_bmpBuffer == null)
{
ReSize(ClientRectangle.Width, ClientRectangle.Height);
}
m_graphics.FillRectangle(Brushes.Black, this.ClientRectangle);
PointF[] pts = new PointF[]{
new PointF(20,20),
new PointF(80,80),
new PointF(20,80),
new PointF(80,20),
new PointF(0,0)
};
for (int i = 0; i < pts.Length; i++)
{
pts[i] = (PointF)ScreenToCoord(pts[i]);
}
m_graphics.DrawLine(Pens.White, pts[0], pts[1]);
m_graphics.DrawLine(Pens.White, pts[2], pts[3]);
e.Graphics.DrawImage(m_bmpBuffer, 0, 0);
}
I aim at implementing as this picture:
enter image description here

Placing buffered matrix rotated graphic on a fixed image

I am trying to put a movable needle (pointer) on a fixed graphic of a gauge (meter). The needle is moved by using a matrix rotate on a buffered graphics. I can get the fixed graphic and the needle to show. But when I render to the screen the last placed image deletes the prior graphic. I am using a timer to get the needle animation and a track bar input to produce the movement. The needle does the exact movement I am looking for.
I just cannot get the fixed background and needle to appear at the same time.
Any ideas?
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Globalization;
using System.Linq;
using System.Reflection;
using System.Resources;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;
namespace Dial01
{
public partial class dial01Form : Form
{
// Establishes timer for graphics animation
private Timer timer01 = new Timer();
/* Establishes a graphic buffer to write to
* prior display on screen */
private Graphics myGraphics;
private BufferedGraphics myBufferedGraphics1;
// Establishes manager for embedded resources (Images)
private System.Resources.ResourceManager myRM = new
System.Resources.ResourceManager("Resources.resx",
System.Reflection.Assembly.GetExecutingAssembly());
int y = 0; // Rotation value
Graphics g,g1; // Graphics objects
public dial01Form()
{
// Establishes size of Dial01Form
this.Width = 500;
this.Height = 500;
// Gets reference to the current BufferedGraphicsContext
BufferedGraphicsContext myContext1 = BufferedGraphicsManager.Current;
// Specifically sets maximum buffer size
myContext1.MaximumBuffer = new Size(this.Width + 1, this.Height + 1);
// Sets the buffer size
myBufferedGraphics1 = myContext1.Allocate(this.CreateGraphics(),
new Rectangle(0, 0, this.Width, this.Height));
// Actvates timer and sets interval
timer01.Enabled = true;
timer01.Tick += onTimer;
timer01.Interval = 20;
timer01.Start();
// Initializes form components
InitializeComponent();
}
private void onTimer(object sender, System.EventArgs e)
{
myGraphics = this.CreateGraphics();
// Initializes graphics buffer variable
g1 = myBufferedGraphics1.Graphics;
// Clears graphic buffer with a color
g1.Clear(SystemColors.Control);
// Initializes an image variable for Dial Outline
Image dial01Outline = Dial01.Properties.Resources.DialOutline250x250;
// Draw Dial Outline to graphics buffer
myGraphics.DrawImage(dial01Outline, (ClientSize.Width / 2) - 100,
(ClientSize.Height / 2) - 100);
// Goto drawPointer method passing trackBar1 value
drawPointer(trackBar1.Value);
// Render buffered graphics to screen
// myBufferedGraphics.Render(Graphics.FromHwnd(this.Handle));
myBufferedGraphics1.Render();
}
public int drawPointer(int trkBarValue)
{
int x = trkBarValue;
y = 0;
if (225 + x <= 360) { y = 222 + x; }
else if (225 + x > 360) { y = x - 135; }
// These two labels are for testing purposes
label1.Text = ("Trk Bar Val = " + x).ToString();
label2.Text = ("Ptr value = " + y).ToString();
y = y + 180;
// Matrix rotation to pointer
Matrix myMatrix = new Matrix();
myMatrix.Rotate(y, MatrixOrder.Append);
myMatrix.Translate(this.ClientSize.Width / 2,
this.ClientSize.Height / 2, MatrixOrder.Append);
g1.Transform = myMatrix;
// Pointer polygon
PointF point1 = new PointF(0.0F, 0.0F);
PointF point2 = new PointF(0.0F, 50.0F);
PointF point3 = new PointF(3.0F, 55.0F);
PointF point4 = new PointF(7.0F, 50.0F);
PointF point5 = new PointF(7.0F, 0.0F);
PointF[] polyPoints =
{
point1,
point2,
point3,
point4,
point5
};
g1.FillPolygon(Brushes.Black, polyPoints);
return y;
}
private void dial01Form_Load(object sender, EventArgs e)
{
}
private void trackBar1_Scroll(object sender, EventArgs e)
{
}
}
}
The general graphics approach you've taken is not appropriate for a winforms app.
The way graphics works in winforms, whenever the form is covered/uncovered/resized/etc, Windows tells it to repaint itself. Anything you've done with CreateGraphics will be overwritten at this point. This is why you shouldn't call CreateGraphics.
Instead, you should intercept the repainting process via the Paint event, and do all your custom painting there. You can still repaint on a timer, you just call Invalidate() inside the timer, which causes the form to repaint as soon as it can.
This is the general shape of the "right way" to do it:
public partial class dial01Form : Form
{
private Timer timer01 = new Timer();
int y = 0; // Rotation value
public dial01Form()
{
// Establishes size of Dial01Form
this.Width = 500;
this.Height = 500;
// Actvates timer and sets interval
timer01.Enabled = true;
timer01.Tick += onTimer;
timer01.Interval = 20;
timer01.Start();
// handle the paint event
this.Paint += OnPaint;
// Initializes form components
InitializeComponent();
}
private void OnPaint(object sender, PaintEventArgs e)
{
// all painting here, targeting e.Graphics
e.Graphics.Clear(SystemColors.Control);
Image dial01Outline = Dial01.Properties.Resources.DialOutline250x250;
e.Graphics.DrawImage(dial01Outline, (ClientSize.Width / 2) - 100,
(ClientSize.Height / 2) - 100);
drawPointer(e.Graphics, trackBar1.Value);
}
private void onTimer(object sender, System.EventArgs e)
{
this.Invalidate();
}
public int drawPointer(Graphics g1, int trkBarValue)
{
// elided: same code as before, but using the g1 parameter instead of a field
}
}
You shouldn't have problems with flickering, I think - double-buffering is enabled by default. Make sure your form's DoubleBuffered property is set to True though.

How can I draw a Hilbert Curve Fractal recursively using C# GDI+ Graphics and Windows Forms?

I am working on a project in which I need to use recursion to draw a Hilbert Curve fractal in a Windows Forms application in C#. I must use GDI+ graphics for this, but I am new to GDI+ graphics. Below is my entire code for the Form class that actually draws the curve. At the end of this post, I have included photos demonstrating my erroneous output and the expected output.
The DrawRelative() function is supposed to draw the next line segment from the current [x,y] coordinates to the new [x,y] coordinates, which are calculated by adding the xDistance and yDistance values passed into the DrawRelative() function to the xCurrent and yCurrent class properties.
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;
namespace HilbertCurveFractal
{
public partial class FractalDisplay : Form
{
public int MaxDepth { get; set; }
public int CurveType { get; set; }
public int xCurrent { get; set; }
public int yCurrent { get; set; }
public int xLength { get; set; }
public int yLength { get; set; }
public FractalDisplay(int DepthValue, int SelectedCurve)
{
InitializeComponent();
MaxDepth = DepthValue;
CurveType = SelectedCurve;
xCurrent = 250;
yCurrent = 250;
xLength = 0;
yLength = 2;
}
private void FractalDisplay_Load(object sender, EventArgs e)
{
this.DoubleBuffered = true;
if (CurveType == 1) // Run the Hilbert Curve Generator
{
GenerateHilbertCurve(MaxDepth, xLength, yLength);
}
else if (CurveType == 2) // Run the Koch Curve Generator
{
}
else if (CurveType == 3) // Run the Sierpinski Curve Generator
{
}
else
{
MessageBox.Show("Error! - No Curve Type Selected. Ending Program.");
Application.Exit();
}
}
private void GenerateHilbertCurve(int depth, int xDistance, int yDistance)
{
//if (depth == 0) // Base Case
//{
// return;
//}
//else { }
if (depth > 0)
{
GenerateHilbertCurve(depth - 1, yDistance, xDistance);
}
else { }
// Draw Part of Curve Here
DrawRelative(xDistance, yDistance);
if (depth > 0)
{
GenerateHilbertCurve(depth - 1, xDistance, yDistance);
}
else { }
// Draw Part of Curve Here
DrawRelative(yDistance, xDistance);
if (depth > 0)
{
GenerateHilbertCurve(depth - 1, xDistance, yDistance);
}
else { }
// Draw Part of Curve Here
DrawRelative((- 1 * xDistance), (-1 * yDistance));
if (depth > 0)
{
GenerateHilbertCurve(depth - 1, (-1 * yDistance), (-1 * xDistance));
}
else { }
}
// Create a New Paint Event Handler
private void DrawRelative(int xDistance, int yDistance)
{
xLength = xDistance;
yLength = yDistance;
this.Paint += new PaintEventHandler(HilbertCurve_Paint);
}
// Perform the Actual Drawing
private void HilbertCurve_Paint(object sender, System.Windows.Forms.PaintEventArgs e)
{
// Discover where the new X and Y points will be
int xNew, yNew;
xNew = xCurrent + xLength;
yNew = yCurrent + yLength;
// Paint from the current position of X and Y to the new positions of X and Y
e.Graphics.DrawLine(Pens.Red, xCurrent, yCurrent, xNew, yNew);
// Update the Current Location of X and Y
xCurrent = xNew;
yCurrent = yNew;
}
}
}
The first photo (below) is the incorrect output from the Hilbert Curve function given a MaxDepth of 1.
The second photo (below) represents what I should be getting from this set of functions (given a MaxDepth value of 1 passed in).
Because it seems like the algorithm for recursion is coded correctly, I suspect that I am not using the GDI+ graphics in the proper way, or my class properties are being updated/set incorrectly somewhere in the recursive calls. What can I do to fix my drawing algorithm? Thank you in advance.
To be honest, I didn't initially understand the implementation you have for generating the points for the Hilbert curve. I'm familiar with a couple of different approaches, neither of which look like that.
But, that's an entirely different question. Your main issue at hand is really just that you don't understand how the drawing mechanism in Winforms works. Briefly: there's a Paint event, which your code should handle by drawing what needs to be drawn. Subscribing to the Paint event doesn't cause anything to happen; it's just a way of registering to be notified when drawing is supposed to occur.
Typically, one would use the Designer to subscribe to the event, by navigating to the "Events" tab of the Properties pane for an object in the Designer (e.g. your Form) and selecting the appropriate event handler (or double-clicking in the empty box next to the event to have the Designer automatically insert an empty handler for you to fill in). You can also, when handling the Paint event in your own object, simply override the OnPaint() method.
In either case, the correct technique is to establish the prerequisites for drawing, then call Invalidate() which causes the framework to then raise the Paint event, at which time you can actually draw what you want to draw.
Note that between commenter TaW and me, we have suggested two different approaches to drawing: I suggested pre-computing all of the necessary data for drawing, and then just draw that when the Paint event is raised; TaW has suggested calling the recursive method from the Paint event handler, and drawing directly as you traverse the recursive algorithm.
Both techniques are fine, but of course there are pros and cons to either, having mostly to do with the classic trade-off of time and space. With the former technique, the cost to generate the curve is incurred only once, when the parameters for the curve change. Drawing occurs more quickly, because all the code has to do is draw the pre-existing data. With the latter technique, there is no need to store the data, as each new point generated is used immediately, but of course this means all of the points have to be regenerated every time the window is redrawn.
For this particular application, in practice I don't think it matters much. At typical screen resolutions, you won't be able to make out the features of the curve long before you start to hit the limits of data storage for the points to draw. Similarly, the execution of the algorithm is so fast that there's really no harm in recalculating the points each time the window needs to be redrawn. Just keep in mind that these are trade-offs you may have to judge more closely in other scenarios.
Okay, so what's all that mean? Well, when I converted it to something that used the Graphics class correctly, I couldn't get your implementation to draw a Hilbert curve, so I changed that part of the code to use an implementation I know works. You can find a detailed discussion on how this particular implementation works here: Hilbert Curve
Concepts & Implementation
Below, I have provided two different versions of that particular Hilbert curve implementation, the first using the "retained" approach (i.e. generate the data, then draw it), and the second using the "immediate" approach (i.e. generate the data every time you want to draw the window, as the drawing is occurring):
"Retained" method:
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
DoubleBuffered = true;
}
private PointF[] _points;
private void FractalDisplay_Load(object sender, EventArgs e)
{
Redraw();
}
private void Redraw()
{
List<PointF> points = new List<PointF>();
GenerateHilbert(0, 0, 1, 0, 0, 1, (int)numericUpDown1.Value, points);
_points = points.ToArray();
Invalidate();
}
private void GenerateHilbert(PointF origin, float xi, float xj, float yi, float yj, int depth, List<PointF> points)
{
if (depth <= 0)
{
PointF current = origin + new SizeF((xi + yi) / 2, (xj + yj) / 2);
points.Add(current);
}
else
{
GenerateHilbert(origin, yi / 2, yj / 2, xi / 2, xj / 2, depth - 1, points);
GenerateHilbert(origin + new SizeF(xi / 2, xj / 2), xi / 2, xj / 2, yi / 2, yj / 2, depth - 1, points);
GenerateHilbert(origin + new SizeF(xi / 2 + yi / 2, xj / 2 + yj / 2), xi / 2, xj / 2, yi / 2, yj / 2, depth - 1, points);
GenerateHilbert(origin + new SizeF(xi / 2 + yi, xj / 2 + yj), -yi / 2, -yj / 2, -xi / 2, -xj / 2, depth - 1, points);
}
}
// Perform the Actual Drawing
private void HilbertCurve_Paint(object sender, System.Windows.Forms.PaintEventArgs e)
{
if (_points != null)
{
float scale = Math.Min(ClientSize.Width, ClientSize.Height);
e.Graphics.ScaleTransform(scale, scale);
using (Pen pen = new Pen(Color.Red, 1 / scale))
{
e.Graphics.DrawLines(pen, _points);
}
}
}
private void numericUpDown1_ValueChanged(object sender, EventArgs e)
{
Redraw();
}
protected override void OnClientSizeChanged(EventArgs e)
{
base.OnClientSizeChanged(e);
Invalidate();
}
}
"Immediate" method:
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
DoubleBuffered = true;
}
private void Redraw()
{
Invalidate();
}
private PointF GenerateHilbert(PointF origin, float xi, float xj, float yi, float yj, int depth,
PointF? previous, Graphics graphics, Pen pen)
{
if (depth <= 0)
{
PointF current = origin + new SizeF((xi + yi) / 2, (xj + yj) / 2);
if (previous != null)
{
graphics.DrawLine(pen, previous.Value, current);
}
return current;
}
else
{
previous = GenerateHilbert(origin, yi / 2, yj / 2, xi / 2, xj / 2, depth - 1, previous, graphics, pen);
previous = GenerateHilbert(origin + new SizeF(xi / 2, xj / 2), xi / 2, xj / 2, yi / 2, yj / 2, depth - 1, previous, graphics, pen);
previous = GenerateHilbert(origin + new SizeF(xi / 2 + yi / 2, xj / 2 + yj / 2), xi / 2, xj / 2, yi / 2, yj / 2, depth - 1, previous, graphics, pen);
return GenerateHilbert(origin + new SizeF(xi / 2 + yi, xj / 2 + yj), -yi / 2, -yj / 2, -xi / 2, -xj / 2, depth - 1, previous, graphics, pen);
}
}
// Perform the Actual Drawing
private void HilbertCurve_Paint(object sender, System.Windows.Forms.PaintEventArgs e)
{
float scale = Math.Min(ClientSize.Width, ClientSize.Height);
e.Graphics.ScaleTransform(scale, scale);
using (Pen pen = new Pen(Color.Red, 1 / scale))
{
GenerateHilbert(new PointF(), 1, 0, 0, 1, (int)numericUpDown1.Value, null, e.Graphics, pen);
}
}
private void numericUpDown1_ValueChanged(object sender, EventArgs e)
{
Redraw();
}
protected override void OnClientSizeChanged(EventArgs e)
{
base.OnClientSizeChanged(e);
Invalidate();
}
}
In both examples I've made some other changes which are not strictly needed for the purpose of illustrating the techniques, but which are still useful:
The curve itself is computed in unit space (i.e. a square of side length of 1), and then drawn by scaling the drawing to fit the window.
Where it makes sense, individual coordinates are passed as whole PointF values instead. This simplifies reuse of the values and adding new offsets to the X and Y values.
Since the drawing is now scaled to the window, the window is redrawn if its size changes.
For simplicity, this Form is self-contained, with a NumericUpDownControl that determines the recursion depth. I didn't include instantiation of this control; I presume you can add the appropriate control yourself in the Designer, to make the above compile.
Addendum:
I've had a chance to look over the other examples on the Internet of the algorithm that you tried to implement. Now that I understand what the basic mechanism of the algorithm is, I was able to fix your version so that it works (the main problem was that you were using instance fields to store the deltas for the algorithm, but also using the same fields to initialize the algorithm, so once the algorithm ran once, subsequent executions wouldn't work). So for the sake of completeness, here is a second "retained" version of the code, using your preferred algorithm instead of the one I used above:
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
DoubleBuffered = true;
}
private PointF _previousPoint;
private PointF[] _points;
private void FractalDisplay_Load(object sender, EventArgs e)
{
Redraw();
}
private void Redraw()
{
List<PointF> points = new List<PointF>();
// Start here, to provide a bit of margin within the client area of the window
_previousPoint = new PointF(0.025f, 0.025f);
points.Add(_previousPoint);
int depth = (int)numericUpDown1.Value;
float gridCellCount = (float)(Math.Pow(2, depth) - 1);
// Use only 95% of the available space in the client area. Scale
// the delta for drawing to fill that 95% width/height exactly,
// according to the number of grid cells the given depth will
// produce in each direction.
GenerateHilbert3(depth, 0, 0.95f / gridCellCount, points);
_points = points.ToArray();
Invalidate();
}
private void GenerateHilbert(int depth, float xDistance, float yDistance, List<PointF> points)
{
if (depth < 1)
{
return;
}
GenerateHilbert(depth - 1, yDistance, xDistance, points);
DrawRelative(xDistance, yDistance, points);
GenerateHilbert(depth - 1, xDistance, yDistance, points);
DrawRelative(yDistance, xDistance, points);
GenerateHilbert(depth - 1, xDistance, yDistance, points);
DrawRelative(-xDistance, -yDistance, points);
GenerateHilbert(depth - 1, -yDistance, -xDistance, points);
}
private void DrawRelative(float xDistance, float yDistance, List<PointF> points)
{
// Discover where the new X and Y points will be
PointF currentPoint = _previousPoint + new SizeF(xDistance, yDistance);
// Paint from the current position of X and Y to the new positions of X and Y
points.Add(currentPoint);
// Update the Current Location of X and Y
_previousPoint = currentPoint;
}
// Perform the Actual Drawing
private void HilbertCurve_Paint(object sender, System.Windows.Forms.PaintEventArgs e)
{
if (_points != null)
{
float scale = Math.Min(ClientSize.Width, ClientSize.Height);
e.Graphics.ScaleTransform(scale, scale);
using (Pen pen = new Pen(Color.Red, 1 / scale))
{
e.Graphics.DrawLines(pen, _points);
}
}
}
private void numericUpDown1_ValueChanged(object sender, EventArgs e)
{
Redraw();
}
protected override void OnClientSizeChanged(EventArgs e)
{
base.OnClientSizeChanged(e);
Invalidate();
}
}
As before, I've modified your implementation slightly, so that the drawing is scaled to fit within the window at all depths. This involves drawing into the unit square and then setting the transform appropriately according to the window size.
In addition to fixing the basic usage of Graphics, and the issue with the xLength and yLength fields, I also fixed a minor bug in your code (where you were recursing one level too deep) and cleaned up the recursion a bit (there's no need to repeat the depth check…just do it once, at the beginning of the recursive method).
It is of course possible to implement this in the "immediate" style as well. I think between this new code example, and the "immediate" method example above, I can leave that exercise to the reader. :)
Here is the fractal generator I came up with after heeding the advice of #Peter Duniho - The code shown does not include the form that actually gets the depth level (maxDepth) of recursion requested by the user.
public partial class HilbertDisplay : Form
{
private int maxDepth;
private int xCurrent = 0;
private int yCurrent = 0;
private int xNew = 0;
private int yNew = 0;
public HilbertDisplay(int depthEntered)
{
InitializeComponent();
maxDepth = depthEntered;
}
private void HilbertDisplay_Load(object sender, EventArgs e)
{
this.DoubleBuffered = true;
this.Update();
}
// Perform the Drawing
private void HilbertDisplay_Paint(object sender, PaintEventArgs e)
{
// Run the Hilbert Curve Generator
// Use a line segment length of 10 for Y
GenerateHilbertCurve(maxDepth, 0, 10, e);
}
// The Recursive Hilbert Curve Generator
private void GenerateHilbertCurve(int depth, int xDistance, int yDistance, PaintEventArgs e)
{
if (depth < 1)
{
return;
}
else
{
GenerateHilbertCurve(depth - 1, yDistance, xDistance, e);
// Paint from the current position of X and Y to the new positions of X and Y
FindPointRelative(xDistance, yDistance);
e.Graphics.DrawLine(Pens.Red, xCurrent, yCurrent, xNew, yNew); // Draw Part of Curve Here
UpdateCurrentLocation();
GenerateHilbertCurve(depth - 1, xDistance, yDistance, e);
// Paint from the current position of X and Y to the new positions of X and Y
FindPointRelative(yDistance, xDistance);
e.Graphics.DrawLine(Pens.Blue, xCurrent, yCurrent, xNew, yNew); // Draw Part of Curve Here
UpdateCurrentLocation();
GenerateHilbertCurve(depth - 1, xDistance, yDistance, e);
// Paint from the current position of X and Y to the new positions of X and Y
FindPointRelative(-xDistance, -yDistance);
e.Graphics.DrawLine(Pens.Green, xCurrent, yCurrent, xNew, yNew); // Draw Part of Curve Here
UpdateCurrentLocation();
GenerateHilbertCurve(depth - 1, (-1 * yDistance), (-1 * xDistance), e);
}
}
private void FindPointRelative(int xDistance, int yDistance)
{
// Discover where the new X and Y points will be
xNew = xCurrent + xDistance;
yNew = yCurrent + yDistance;
return;
}
private void UpdateCurrentLocation()
{
// Update the Current Location of X and Y
xCurrent = xNew;
yCurrent = yNew;
return;
}
}
This code, unlike that of #Peter Duniho, does not account for the form's size. This depicts a Hilbert Curve fractal up to a recursion depth of 6 or 7 on my laptop (due to limitations on window size made by my laptop screen size/resolution).
I know that my solution is not as elegant as that of #Peter Duniho, but as this is for an assignment I did not want to simply copy his code. I made edits based on his suggestions, especially in regard to the Paint event.

Drawing Ellipse on Canvas with "negative" width/height using mouse events

On MouseDownEvent I set upper left corner of Ellipse I'm trying to draw.
public MyCircle(Point location)
{
ellipseObject = new Ellipse
{
Stroke = Brushes.Black,
StrokeThickness = 2,
Margin = new Thickness(location.X, location.Y, 0, 0)
};
}
Then on MouseMoveEvent I update Width and Height properties and it works fine as long as I don't move mouse above or/and to the left of my Ellipse upper left corner, in that case I'm getting exception that these properties can't be negative (which of course makes perfect sense).
public void Draw(Point location)
{
if (ellipseObject != null)
{
ellipseObject.Width = location.X - ellipseObject.Margin.Left;
ellipseObject.Height = location.Y - ellipseObject.Margin.Top;
}
}
The problem doesn't exist with drawing lines:
public void Draw(Point location)
{
lineObject.X2 = location.X;
lineObject.Y2 = location.Y;
}
I know it's trivial, but I'm completely stuck on this. How should I handle drawing Ellipses?
I had this EXACT problem when trying to create a crop tool. Problem is that you need to create if statements for when the cursor goes negative X or negative Y from your starting point. For starters, you'll need to have a global Point that you mark as your 'start' point. Also specify a global current point position that we'll talk about in a minute.
public Point startingPoint;
public Point currentPoint;
Then, make sure you have an onMouseDown event on whatever control you are trying to put the ellipse on.
private void control_MouseDown(object sender, MouseEventArgs e)
{
startingPoint.X = e.X;
startingPoint.Y = e.Y;
}
Then, you need to create if statements in your MouseMove event to check with point (current mouse position, or starting point) has a lower X/Y value
private void control_MouseMove(object sender, MouseEventArgs e)
{
//The below point is what we'll draw the ellipse with.
Point ellipsePoint;
Ellipse ellipseObject = new Ellipse();
currentPoint.X = e.X;
currentPoint.Y = e.Y;
//Then we need to get the proper width/height;
if (currentPoint.X >= startingPoint.X)
{
ellipsePoint.X = startingPoint.X;
ellipseObject.Width = currentPoint.X - startingPoint.X;
}
else
{
ellipsePoint.X = currentPoint.X;
ellipseObject.Width = startingPoint.X - currentPoint.X;
}
if (currentPoint.Y >= startingPoint.Y)
{
ellipsePoint.Y = startingPoint.Y;
ellipseObject.Height = currentPoint.Y - startingPoint.Y;
}
else
{
ellipsePoint.Y = currentPoint.Y;
ellipseObject.Height = startingPoint.Y - currentPoint.Y;
}
ellipseObject.Stroke = Brushes.Black;
ellipseObject.StrokeThickness = 2;
ellipseObject.Margin = new Thickness(ellipsePoint.X, ellipsePoint.Y, 0, 0);
}
Hope this helps!
Save the origin point separately and set the X and Y properties of the Ellipse's Margin to the mouse position and the Width and Height to the distances between the mouse and origin point.
Untested:
public MyCircle(Point location)
{
ellipseObject = new Ellipse
{
Stroke = Brushes.Black,
StrokeThickness = 2,
Margin = new Thickness(location.X, location.Y, 0, 0)
Tag = new Point(location.X, location.Y)
};
}
public void Draw(Point location)
{
if (ellipseObject != null)
{
Point o = (Point)ellipseObject.Tag;
double x = Math.Min(location.X, o.Left);
double y = Math.Min(location.Y, o.Top);
double width = Math.Abs(Math.Max(location.X, o.Left) - x);
double height = Math.Abs(Math.Max(location.Y, o.Top) - y);
ellipseObject.Margin.X = x;
ellipseObject.Margin.Y = y;
ellipseObject.Width = width;
ellipseObject.Height = height;
}
}

Categories

Resources