I draw a rectangle and I need to divide this rectangle into 2 parts. I am trying to use line in order to divide it but I dont know why I can not see the line.
Rectangle rect = new Rectangle();
rect.Fill= Colors.Blue;
rect.Width=100;
rect.Margin = new Thikness (0,40,0,0);
grid.Children.Add(rect);
Line line = new Line();
line.Stroke = Colors.Black;
line.StrokeThickness=1;
line.X1=2;
line.X2=7;
line.Y1=41;
line.Y2=41;
grid.Children.Add(line);
Do you have any idea that how can I add a line on the rectangle?
Here is how you would divide it vertically:-
a) you were drawing a line 5 pixels in width but it was not visible because your line was of stroke Black and the page background was also Black so the line was hidden. The line was drawn from (2,41) to (7,41).
b) your rectangle was in the center of the page, 100 pixels wide and as tall as the page and thus the line which was on the top left did not intersect with the rectangle which was in the center
c) I would recommend the use of a Canvas since you can easily set Top and Left pixel positions of each item on the Canvas
I modified your code in the following way:-
Rectangle rect = new Rectangle();
rect.Fill = new SolidColorBrush(Colors.Blue);
rect.Width = 100;
rect.Height = 200;
Canvas.SetLeft(rect, 200);
Canvas.SetTop(rect, 20);
LayoutRoot.Children.Add(rect);
Line line = new Line();
line.Stroke = new SolidColorBrush(Colors.White);
line.StrokeThickness = 1;
line.X1 = Canvas.GetLeft(rect) + rect.Width / 2;
line.X2 = Canvas.GetLeft(rect) + rect.Width / 2;
line.Y1 = Canvas.GetTop(rect);
line.Y2 = Canvas.GetTop(rect) + rect.Height;
LayoutRoot.Children.Add(line);
1) LayoutRoot is my Canvas in the XAML...I have just changed it from Grid to Canvas in the default page template.
2) I have used these two lines to set the position of the rect on the Canvas. You can change this to any hardcoded/programmatically calculated value.
Canvas.SetLeft(rect, 200);
Canvas.SetTop(rect, 20);
3) I have calculated the X and Y positions of the line here
line.X1 = Canvas.GetLeft(rect) + rect.Width / 2;
line.X2 = Canvas.GetLeft(rect) + rect.Width / 2;
line.Y1 = Canvas.GetTop(rect);
line.Y2 = Canvas.GetTop(rect) + rect.Height;
The X1 and X2 positions are basically the Left position of the rect plus half of the rect width
The Y1 and Y2 positions are the rect top and rect top plus rect height.
Add these two elements to the Canvas and it will work
Related
I would like to draw a thick, transparent arrow with an arrowhead:
Here's the code that draws the arrow shaft. Notice that I have to offset the rectangle so the calculations are done from the midpoint of the rectangle.
private void DrawMovementArrow(bool color, double StartX, double StartY, double EndX, double EndY)
{
SolidColorBrush partiallyTransparentSolidColorBrush;
Rectangle myRectangle = new Rectangle();
// This will be replaced by piece size
int width = 35;
myRectangle.Width = width;
// Apparently necessary to offset the drawing of the path so that the point is in the center of the path; not the edge.
StartX -= width / 2;
EndX -= width / 2;
myRectangle.Height = Map.EuclideanDistance(StartX, StartY, EndX, EndY) ;
int angle = CalculateAngle(StartX , StartY , EndX , EndY );
// This selects the midpoint of edge of the rectangle to rotate around (weird system)
myRectangle.RenderTransformOrigin = new Point(0.5, 0);
angle = angle - 180;
RotateTransform rotateTransform1 = new RotateTransform(angle, 0 , 0 );
myRectangle.RenderTransform = rotateTransform1;
if (color)
partiallyTransparentSolidColorBrush = new SolidColorBrush(Colors.Blue);
else
partiallyTransparentSolidColorBrush = new SolidColorBrush(Colors.Red);
partiallyTransparentSolidColorBrush.Opacity = 0.4;
myRectangle.Fill = partiallyTransparentSolidColorBrush;
MovementCanvas1.Children.Clear();
MovementCanvas1.Children.Add(myRectangle);
Canvas.SetTop(myRectangle, StartY);
Canvas.SetLeft(myRectangle, StartX);
DrawArrowhead(color, EndX, EndY, angle + 90, width);
ShowUnitCenter(MovementArrowList[0]);
}
Note that this code selects a point in the middle of the edge to rotate the rectangle:
// This selects the midpoint of edge of the rectangle to rotate around (weird system)
myRectangle.RenderTransformOrigin = new Point(0.5, 0);
The problem is that I can't find that point with the arrowhead (triangle). Here's the code that draws the arrowhead:
public void DrawArrowhead(bool color, double x, double y, int angle, int width)
{
x += width /2 ;
width = width + (width / 2);
//Add the Polygon Element
Polygon myPolygon = new Polygon();
myPolygon.Opacity = 0.4;
if (color)
{
myPolygon.Fill = new SolidColorBrush(Colors.Blue);
myPolygon.Stroke = System.Windows.Media.Brushes.Blue;
}
else
{
myPolygon.Fill = new SolidColorBrush(Colors.Red);
myPolygon.Stroke = System.Windows.Media.Brushes.Red;
}
myPolygon.StrokeThickness = 0;
RotateTransform rotateTransform1 = new RotateTransform(angle, 0, 0);
myPolygon.RenderTransform = rotateTransform1;
// This selects the midpoint of edge of the triangle to rotate around (weird system)
myPolygon.RenderTransformOrigin = new Point(0.0, 0.5);
System.Windows.Point Point1 = new System.Windows.Point(0, 0);
System.Windows.Point Point2 = new System.Windows.Point(width / 2, width / 2);
System.Windows.Point Point3 = new System.Windows.Point(0,width);
PointCollection myPointCollection = new PointCollection();
myPointCollection.Add(Point1);
myPointCollection.Add(Point2);
myPointCollection.Add(Point3);
myPolygon.Points = myPointCollection;
MovementCanvas1.Children.Add(myPolygon);
Canvas.SetTop(myPolygon, y );
Canvas.SetLeft(myPolygon, x );
}
Note the myPointCollection that creates the triangle. The problem is that I've tried almost every conceivable combination of values in RenderTransformOrigin to find the point that (center bottom of triangle) to use for the rotation point. Nothing seems to be working out.
Can anybody suggest the correct value?
Edit Solved
I solved it by changing the points of the triangle. That was easier than trying to figure out the rotation point.
Changing the points that made up the triangle solved the problem. This was easier than trying to find the rotation point.
This is a follow-on to a question I asked here: WinForms: Measure Text With No Padding. The question is, given this code ...
protected override void OnPaint(PaintEventArgs e) {
e.Graphics.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.AntiAlias;
DrawIt(e.Graphics);
}
private void DrawIt(Graphics graphics) {
var text = "123";
var font = new Font("Arial", 72);
// Build a path containing the text in the desired font, and get its bounds.
GraphicsPath path = new GraphicsPath();
path.AddString(text, font.FontFamily, (int)font.Style, font.Size, new Point(0, 0), StringFormat.GenericDefault);
var bounds = path.GetBounds();
// Find center of the form.
var cx = this.ClientRectangle.Left + this.ClientRectangle.Width / 2;
var cy = this.ClientRectangle.Top + this.ClientRectangle.Height / 2;
// Move it where I want it.
var xlate = new Matrix();
xlate.Translate(cx - bounds.Width / 2, cy - bounds.Height / 2);
path.Transform(xlate);
// Draw the path (and a bounding rectangle).
graphics.DrawPath(Pens.Black, path);
bounds = path.GetBounds();
graphics.DrawRectangle(Pens.Blue, bounds.Left, bounds.Top, bounds.Width, bounds.Height);
// This rectangle doesn't use the positioning from Translate but does use the same size.
graphics.DrawRectangle(Pens.Red, cx - bounds.Width / 2, cy - bounds.Height / 2, bounds.Width, bounds.Height);
}
... why don't the rectangles overlap?
Clearly, when I'm translating the path, I'm not translating by the same units that I'm later drawing them in, but I'm at a loss how to fix it. Any ideas?
You have a wrong assumption about Bounds of the path. Since you added the string to the path, starting from point (0,0), you are assuming the location of the bounds of the path is (0,0). That's not correct.
The following illustration shows the relation between the origin that you added string, (0,0) and bounds of the path, blue rectangle:
To fix it, after adding the string and getting its bounds, store the location of the bounds:
var p = bounds.Location;
And then after applying the transformations, draw the rectangle this way:
graphics.DrawRectangle(Pens.Red,
p.X + cx - bounds.Width / 2, p.Y + cy - bounds.Height / 2,
bounds.Width, bounds.Height);
I want to be able to Map the Coordinates correctly so that a line is produced where my hand is on InkCanvas inas it moves.
I am currently using DepthSpacePoint like this:
DepthSpacePoint depthSpacePoint = this.coordinateMapper.MapCameraPointToDepthSpace(SkeletonPosition);
jointPoints[jointType] = new Point(depthSpacePoint.X, depthSpacePoint.Y);
and for my Mapping I am using this:
/*Use these floats * 1000 to let the user draw on the Canvas*/
float XSP = joints[JointType.HandRight].Position.X * 1000;
float YSP = joints[JointType.HandRight].Position.Y * 1000;
/*Current Point is = Right Hand Floats * 1000*/
currentPoint = new Point(XSP, YSP);
/*Always add 0.1 to the new point to let the user draw, this will technically give a continous line effect as it draws every time the hand moves at a difference of 0.1*/
nextPoint = new Point(XSP + 0.1, YSP + 0.1);
/*Feed the Points into the function, Call while Right hand is Tracked*/
this.Paint(currentPoint, nextPoint, PaintSurface);
Now current I can draw lines on the screen however it does not map correct to where my Right hand is and I have to multiply by 1000 to even see the lines on the canvas, what am I doing wrong? How do I correct this?
and this is my Paint Function:
/*Function to Paint/Draw on the Screen*/
public void Paint(Point startPoint, Point nextPoint, InkCanvas inkcanvas)
{
Line line = new Line(); //New Line
/*If Co-ords are equal to 0,0 reset them*/
if (currentPoint.X == 0 && currentPoint.Y == 0)
{
currentPoint = new Point();
currentPoint = startPoint;
}
/*Colour of the line*/
line.Stroke = Colour;
/*Thickness Level*/
line.StrokeThickness = 10;
/*Make it less Jagged and Smoother by changing the Stroke Points*/
line.StrokeDashCap = PenLineCap.Round;
line.StrokeStartLineCap = PenLineCap.Round;
line.StrokeEndLineCap = PenLineCap.Round;
line.StrokeLineJoin = PenLineJoin.Round;
/*Where to Draw the Line in terms of X and Y Positions*/
line.X1 = currentPoint.X;
line.Y1 = currentPoint.Y;
line.X2 = nextPoint.X;
line.Y2 = nextPoint.Y;
/*Current Point = nextPoint*/
currentPoint = nextPoint;
/*Add The Line*/
inkcanvas.Children.Add(line);
}
I figured it out, turns out I can simply just use colour space point to record the position of the the right hand then call it again in a new function to determine the drawing point of the line.
Recording the CSP:
ColorSpacePoint CSP = this.coordinateMapper.MapCameraPointToColorSpace(Joints[JointType.HandRight]);
And then the edited function:
/*Function to Paint/Draw on the Screen*/
public void Paint(ColorSpacePoint Position, InkCanvas inkcanvas)
{
Line line = new Line(); //New Line
/*If Co-ords are equal to 0,0 reset them*/
if (Position.X == 0 && Position.Y == 0)
{
NextPoint = Position
}
/*Colour of the line*/
line.Stroke = Colour;
/*Thickness Level*/
line.StrokeThickness = 10;
/*Make it less Jagged and Smoother by changing the Stroke Points*/
line.StrokeDashCap = PenLineCap.Round;
line.StrokeStartLineCap = PenLineCap.Round;
line.StrokeEndLineCap = PenLineCap.Round;
line.StrokeLineJoin = PenLineJoin.Round;
/*Where to Draw the Line in terms of X and Y Positions*/
line.X1 = Position.X;
line.Y1 = Position.Y;
line.X2 = Position.X + 0.01;
line.Y2 = Position.Y + 0.01;
/*Add The Line after Scaling*/
Inkcanvas.SetLeft(line , Position.X - line.Width / 2);
Ink canvas.SetTop(line, Position.Y - line.Height / 2);
inkcanvas.Children.Add(line);
}
This will draw small lines wherever the users right hand is but instead of drawing a lot of small lines to form a big line I decided to use ellipses like so:
public void DrawPoint(ColorSpacePoint point)
{
// Create an ellipse.
Ellipse ellipse = new Ellipse
{
Width = 20,
Height = 20,
Fill = Brushes.Red
};
// Position the ellipse according to the point's coordinates.
Canvas.SetLeft(ellipse, point.X - ellipse.Width / 2);
Canvas.SetTop(ellipse, point.Y - ellipse.Height / 2);
// Add the ellipse to the canvas.
canvas.Children.Add(ellipse);
}
I am trying to create a captcha image. I am generating a random string and rotating the text with a random angle and trying to create a byte array. Below is my code snippet:
Image img = Image.FromFile(#"C:\Images\BackGround.jpg");
RectangleF myRect = new RectangleF(0, 0, width, height);
objGraphics.DrawImage(img, myRect);
Matrix myMatrix = new Matrix();
int i = 0;
StringFormat formatter = new StringFormat();
formatter.Alignment = StringAlignment.Center;
for (i = 0; i <= myString.Length - 1; i++)
{
myMatrix.Reset();
int charLenght = myString.Length;
float x = width / (charLenght + 1) * i;
float y = height / 30F;
myMatrix.RotateAt(oRandom.Next(-40, 40), new PointF(x, y));
objGraphics.Transform = myMatrix;
objGraphics.DrawString(myString.Substring(i, 1), MyFont, MyFontEmSizes, MyFontStyles,
MySolidBrush, x, Math.Max(width, height) / 50, formatter );
objGraphics.ResetTransform();
}
Every thing is working fine, except that, the first character in my final image on the web page is crossing my left border of the rectangle. How can I align my text to the center of the rectangle?
Thanks.
What brush should i use to draw rectangles with white interior of the line and lines for the perimeter of the rectangle like the elevations below.
The form1 winform is what i am working on and the image behind the winform is how i need to the rectangles to look in my winform.
To make the question easier, how can i fill the interior portion of the rectangles with white?
How do i fill the LINES of the rectangle with white? I do not need to fill the inside of the rectangle, I need to fill a portion of the 4 lines that make up the rectangle with white.
void BuildShopDrawing(ElevationResponse elevation)
{
float penWidth = (float)((2f / 12f) * PIXELS_PER_FOOT);
Pen blackPen = new Pen(Color.FromArgb(40, 84, 149), penWidth);
Bitmap canvas = new Bitmap((((int)elevation.TotalWidthFeet) * PIXELS_PER_FOOT) + 55, (((int)elevation.TotalHeightFeet) * PIXELS_PER_FOOT) + 25);
Graphics dc = Graphics.FromImage(canvas);
RectangleF[] bays = new RectangleF[elevation.Bays.Count];
float x = 10F;
float width = 0F;
float height = 0F;
for (int i = 0; i < elevation.Bays.Count; i++)
{
if (i > 0)
{
x += (float)((elevation.Bays[i - 1].WidthInches / 12) * PIXELS_PER_FOOT);
}
width = (float)(elevation.Bays[i].WidthInches / 12) * PIXELS_PER_FOOT;
height = (float)(elevation.Bays[i].HeightInches / 12) * PIXELS_PER_FOOT;
bays[i] =
new RectangleF(new PointF(x, 10),
new SizeF(width, height));
}
dc.DrawRectangles(blackPen, bays);
this.picBx.Image = canvas;
this.Size = new System.Drawing.Size(canvas.Width + 10, canvas.Height + 50);
}
You need to look a bit more thoroughly at the Pen Class more specifically the CompoundArray Property, it will give you something like you are wanting, You will need to play around some other of the Pen Class properties to get your transitions right. And as a side note when you post example code that depends on external custom classes you make it harder for someone to help, it is always best to make sure that the code can run by itself.
Try adding this after you declare your pen.
float[] cmpArray = new float[4]{0.0F, 0.2F, 0.7F, 1.0F};
blackPen.CompoundArray = cmpArray;
It looks something like this: