Background: I am currently busy with showing position of a Vehicle on a Zoomable Canvas based on the Position (X,Y) and Orientation (for Rotation). I use Rectangle for visualizing the vehicle. Everything works well but I got a bit greedy and now I want to replace the Rectangle with Top View Picture of the Vehicle, so it looks that the vehicle itself is moving instead a Rectangle.
Code Below:
private void PaintLocationVehicle(VehicleClass vc)
{
IEnumerable<Rectangle> collection = vc.ZoomableCanvas.Children.OfType<Rectangle>().Where(x => x.Name == _vehicleobjectname);
List<Rectangle> listE = collection.ToList<Rectangle>();
for (int e = 0; e < listE.Count; e++)
vc.ZoomableCanvas.Children.Remove(listE[e]);
// Assign X and Y Position from Vehicle
double drawingX = vc.gCurrentX * GlobalVar.DrawingQ;
double drawingY = vc.gCurrentY * GlobalVar.DrawingQ;
// Scale Length and Width of Vehicle
double tractorWidthScaled = vc.tractorWidth * GlobalVar.DrawingQ;
double tractorLengthScaled = vc.tractorLength * GlobalVar.DrawingQ;
// Get Drawing Location
double _locationX = drawingX - (tractorLengthScaled / 2);
double _locationY = drawingY - ((tractorWidthScaled / 2));
RotateTransform rotation = new RotateTransform();
// Angle in 10th of a Degree
rotation.Angle = vc.gCurrentTheeta/10 ;
double i = 0;
//paint the node
Rectangle _rectangle = new Rectangle();
_rectangle.Stroke = new SolidColorBrush((Color)ColorConverter.ConvertFromString(vc.VehicleColor == "" ? "Black" : vc.VehicleColor));
_rectangle.Fill = new SolidColorBrush((Color)ColorConverter.ConvertFromString(vc.VehicleColor == "" ? "Black" : vc.VehicleColor));
i += 0;
_rectangle.Width = tractorLengthScaled ;
_rectangle.Height = tractorWidthScaled;
rotation.CenterX = _rectangle.Width / 2;
rotation.CenterY = _rectangle.Height / 2;
_rectangle.RenderTransform = rotation;
Canvas.SetTop(_rectangle, _locationY + i);
Canvas.SetLeft(_rectangle, _locationX + i);
_rectangle.SetValue(ZoomableCanvas.ZIndexProperty, 2);
string _tooltipmsg = "Canvas: " + vc.ZoomableCanvas.Name;
// Assign ToolTip Values for User
_tooltipmsg += "\nX: " + vc.gCurrentX;
_tooltipmsg += "\nY: " + vc.gCurrentY;
_rectangle.ToolTip = _tooltipmsg;
_rectangle.Name = _vehicleobjectname;
//add to the canvas
vc.ZoomableCanvas.Children.Add(_rectangle);
}
Note: VehicleClass holds all the Values for a certain Vehicle. DrawingQ holds the transformation scale from Reality to Zoomable Canvas.
So the issues I forsee:
How to append the Size of a Jpeg file to get the size same as
Rectangle?
What kind of Shape object shall I use? Please
suggest.
If i undrestand you correctly. you wanted to show an image of the vechicle inside the rectangle. in order to do that you can use
ImageBrush and assign to the Rectangle Fill property
something like this
Rectangle rect = new Rectangle();
rect.Width = 100;
rect.Height = 100;
ImageBrush img = new ImageBrush();
BitmapImage bmp = new BitmapImage();
bmp.BeginInit();
bmp.UriSource = new Uri("vehicle image path");
bmp.EndInit();
img.ImageSource = bmp;
rect.Fill = img;
I hope that helps
Related
I have a DataTable of points and I'm attempting to place two diagonal lines to display the point and then have the point's name as a textblock displayed beside it. The two lines place perfectly in the correct positions, whereas the text is not in the correct position, although I'm using the exact same coordinates.
Here's my code:
public void DrawPoints(List<double> extents, double canvasWidth, double canvasHeight)
{
DataRow[] points = Globals.DT.Select();
foreach (DataRow row in points)
{
string name = row["Name"].ToString();
List<double> coords = new List<double> {(double)row["Easting"], (double)row["Northing"]};
double elevation = (double)row["Elevation"];
DXFToCanvas dxfToCanvas = new DXFToCanvas();
List<double> canvasCoords = dxfToCanvas.DXFCoordToCanvas(coords, extents, canvasWidth, canvasHeight);
// Create two diagonal lines for point
double sizeFactor = 2;
Line line1 = new Line();
line1.X1 = canvasCoords[0] - sizeFactor;
line1.Y1 = canvasCoords[1] - sizeFactor;
line1.X2 = canvasCoords[0] + sizeFactor;
line1.Y2 = canvasCoords[1] + sizeFactor;
Line line2 = new Line();
line2.X1 = canvasCoords[0] - sizeFactor;
line2.Y1 = canvasCoords[1] + sizeFactor;
line2.X2 = canvasCoords[0] + sizeFactor;
line2.Y2 = canvasCoords[1] - sizeFactor;
SolidColorBrush redBrush = new SolidColorBrush();
redBrush.Color = Colors.Red;
line1.StrokeThickness = 0.5;
line1.Stroke = redBrush;
line2.StrokeThickness = 0.5;
line2.Stroke = redBrush;
map_page_canvas.Children.Add(line1);
map_page_canvas.Children.Add(line2);
// Create point labels
TextBlock textBlock = new TextBlock();
textBlock.Text = name;
textBlock.FontSize = 4;
textBlock.Foreground = redBrush;
ScaleTransform scaleTransform = new ScaleTransform();
scaleTransform.ScaleY = -1;
textBlock.RenderTransform = scaleTransform;
Canvas.SetLeft(textBlock, canvasCoords[0]);
Canvas.SetBottom(textBlock, canvasCoords[1]);
map_page_canvas.Children.Add(textBlock);
}
}
How is it possible that using the exact same coordinates to set both the lines and the textblock can result in the textblock being at different positions than the lines? I'm using the scaletransform because my canvas needed to be on a y increasing upwards coordinate system.
I am making a program where you bassicly move from tile to tile in windows forms. So in order to do that, I wanted to use panels each panel has a tag. To detect collision. The goal is to be able to find creatures that randomly spawn somehow i don't how to do that.
So I have an image of my map. and I divided into multiple tiles. So using this code I create the pictureboxes needed for the tile map but I want to add a character that is one tile big how can I do that???
I also want to be able to move around that character tag how would i fix that.
And also give the tiles a tag so the character can't go there.
private void Form1_Load(object sender, EventArgs e)
{
int tileWidth = 30;
int tileHeight = 30;
int tileRows = 30;
int tileCols = 30;
using (Bitmap sourceBmp = new Bitmap("D:\\900x900.jpg"))
{
Size s = new Size(tileWidth, tileHeight);
Rectangle destRect = new Rectangle(Point.Empty, s);
for (int row = 0; row < tileRows; row++)
for (int col = 0; col < tileCols; col++)
{
PictureBox p = new PictureBox();
p.Size = s;
Point loc = new Point(tileWidth * col, tileHeight * row);
Rectangle srcRect = new Rectangle(loc, s);
Bitmap tile = new Bitmap(tileWidth, tileHeight);
Graphics G = Graphics.FromImage(tile);
G.DrawImage(sourceBmp, destRect, srcRect, GraphicsUnit.Pixel);
p.Image = tile;
p.Location = loc;
p.Tag = loc;
p.Name = String.Format("Col={0:00}-Row={1:00}", col, row);
// p.MouseDown += p_MouseDown;
// p.MouseUp += p_MouseUp;
// p.MouseMove += p_MouseMove;
this.Controls.Add(p);
}
}
}
I'm using DrawingContext.DrawText and DrawingContext.PushTransfrom to create rotated text on Visual Layer in WPF but as you see in the image below, the rotated text is rather blurry in some areas of the image..
Is there any option I can use to improve this? The Arial font is used for the text.
public class BeamTextDrawing : FrameworkElement
{
private readonly VisualCollection _visuals;
public BeamTextDrawing(double scale)
{
if (scale <= 0)
{
scale = 1;
}
var typeface = Settings.BeamTextTypeface;
var cultureinfo = Settings.CultureInfo;
var flowdirection = Settings.FlowDirection;
var textsize = Settings.BeamTextSize / scale;
var beamtextcolor = Settings.InPlanBeamTextColor;
_visuals = new VisualCollection(this);
foreach (var beam in Building.BeamsInTheElevation)
{
var drawingVisual = new DrawingVisual();
using (var dc = drawingVisual.RenderOpen())
{
var text = Convert.ToString(beam.Section.Id);
//text = scale.ToString();
var ft = new FormattedText(text, cultureinfo, flowdirection,
typeface, textsize, beamtextcolor)
{
TextAlignment = TextAlignment.Center
};
var x1 = beam.ConnectivityLine.I.X;
var y1 = beam.ConnectivityLine.I.Y;
var x2 = beam.ConnectivityLine.J.X;
var y2 = beam.ConnectivityLine.J.Y;
var v1 = new Point(x2, y2) - new Point(x1, y1);
var v2 = new Vector(1, 0);
var hwidth = textsize;
var l = Geometrics.GetOffset(x1, y1, x2, y2, hwidth + 5/scale);
var angle = Vector.AngleBetween(v1, v2);
var x = 0.5 * (l.X1 + l.X2);
var y = 0.5 * (l.Y1 + l.Y2);
var r = new RotateTransform(angle, x, SelectableModel.FlipYAxis(y));
dc.PushTransform(r);
dc.DrawText(ft, SelectableModel.FlipYAxis(x, y));
}
_visuals.Add(drawingVisual);
}
}
protected override Visual GetVisualChild(int index)
{
return _visuals[index];
}
protected override int VisualChildrenCount
{
get
{
return _visuals.Count;
}
}
}
Update:
Here is the image after using this code:
TextOptions.SetTextFormattingMode(this, TextFormattingMode.Display);
I'm still getting blurry results. Look at the middle beam text at the lower part of the image.
Check out this article - Pixel Snapping in WPF Applications
Since WPF uses device independent pixels it can create irregular edge rendering due to anti-aliasing when it undergoes transformation. Pixel snapping is a means to suppress these visual artifacts by applying small offsets to the geometry of the visual to align the geometry to device pixels.
Setting the SnapsToDevicePixels Property to "True" for your UI elements should be able to fix your issue.
Hi I have a path from GetFlattenedPathGeometry where i can iterate through the figures and segments to get the points to add to a PointCollection.
I then multiply each point.x/y by a scale factor to get a full scaled version of the original path data. (not using scaletransform as it doesn't suit my requirements).
If i use something like:
public static PathGeometry GetPathGeometry(PointCollection polygonCorners)
{
List<PathSegment> pathSegments = new List<PathSegment> { new PolyLineSegment(polygonCorners, true) };
PathGeometry pathGeometry = new PathGeometry();
pathGeometry.Figures.Add(new PathFigure(polygonCorners[0], pathSegments, true));
return pathGeometry;
}
It returns a new path geometry but doesn't handle ellipses with excluded path geometry in that the path is just one continuous line.
Is there a way to convert the PointCollection to Path.Data (eg: with the "M" "L" and such) for me to re-use Geometry.Parse(the new string)?
Here is the code i'm using to get the flattenedgeometry pointcollection:
PathGeometry g = path.Data.GetFlattenedPathGeometry();
foreach (var f in g.Figures)
{
foreach (var s in f.Segments)
{
if (s is PolyLineSegment)
{
foreach (var pt in ((PolyLineSegment) s).Points)
{
strGeom += pt.ToString();
Point ptn = new Point(pt.X * ScaleX, pt.Y * ScaleY);
pcol.Add(ptn);
}
}
}
}
< Edit Images >
Here is the original path with rectangles and ellipses subtracted from the geometry.
And here is what is looks like re-creating from the code.
If i use the original GetFlattenedPathGeometry, it looks like the original but i need to scale the points to a new resolution.
Hope this makes it clearer.
You could simply call ToString on the PathGeometry to get the whole path data string at once:
var sourceGeometry = path.Data.GetFlattenedPathGeometry();
var geometryString = sourceGeometry.ToString(CultureInfo.InvariantCulture);
var targetGeometry = Geometry.Parse(geometryString);
And why can't you just apply a ScaleTransform to the whole geometry before calling GetFlattenedPathGeometry? The following works perfectly for me (with two EllipseGeometries in an excluding CombinedGeometry):
var pathGeometry = path.Data.Clone();
pathGeometry.Transform = new ScaleTransform(0.5, 0.5);
var scaledGeometry = pathGeometry.GetFlattenedPathGeometry();
EDIT: From what you write in your question and comments, I'm guessing that all you actually want to do is to add or combine geometries with different scaling factors. If that is true, your flattened geometry approach is by far to complicated, as you could easily do that with the following two methods:
private PathGeometry AddGeometries(
Geometry geometry1, Geometry geometry2, double scale)
{
geometry2 = geometry2.Clone();
geometry2.Transform = new ScaleTransform(scale, scale);
var pathGeometry = PathGeometry.CreateFromGeometry(geometry1);
pathGeometry.AddGeometry(geometry2);
return pathGeometry;
}
private PathGeometry CombineGeometries(
Geometry geometry1, Geometry geometry2, GeometryCombineMode mode, double scale)
{
geometry2 = geometry2.Clone();
geometry2.Transform = new ScaleTransform(scale, scale);
return Geometry.Combine(geometry1, geometry2, mode, null);
}
Given a Path with some geometry in its Data property, you may now add (or combine) an arbitray other geometry with a scaling factor with a call like this:
Geometry newGeometry1 = ...
double scale1 = ...
path.Data = AddGeometries(path.Data, newGeometry1, scale1);
Geometry newGeometry2 = ...
double scale2 = ...
path.Data = CombineGeometries(path.Data, newGeometry2,
GeometryCombineMode.Exclude, scale2);
Found the answer by perseverance.
The code to get each point of flattenedpathgeometry and add a scale to each point and recreate the same flattenedpathgeometry with the new points. hope it helps someone. And thanks Clemens. Appreciate your efforts.
path.Data = Geometry.Parse(CurrentObject.Geometry1);
PathGeometry g = path.Data.GetFlattenedPathGeometry();
PathGeometry g = path.Data.GetFlattenedPathGeometry();
foreach (var f in g.Figures)
{
Point pt1 = f.StartPoint;
pt1.X = pt1.X * ScaleX;
pt1.Y = pt1.Y * ScaleY;
strGeom += "M" + pt1.ToString();
foreach (var s in f.Segments)
if (s is PolyLineSegment)
{
count = 0;
foreach (var pt in ((PolyLineSegment)s).Points)
{
int scount = ((PolyLineSegment)s).Points.Count;
if (count == 0)
{
Point pts = new Point(pt.X * ScaleX, pt.Y * ScaleY);
strGeom += "L" + pts.ToString();
}
else if (count < scount)
{
Point pts = new Point(pt.X * ScaleX, pt.Y * ScaleY);
strGeom += " " + pts.ToString();
}
else if (count == scount)
{
Point pts = new Point(pt.X * ScaleX, pt.Y * ScaleY);
strGeom += " " + pts.ToString() + "Z";
}
count++;
}
}
}
path.Data = Geometry.Parse(strGeom);
Here's an image of the paths sent from a remote session: 1366x768 scales to 1920x1080
I'm trying to draw a row of rectangles across my Canvas. When I run the following code, I only get one rectangle, even though my canvas element says it has 12 children.
Dimensions is a class with 2 integer properties, Height and Width. The canvas I am drawing this is on 400px by 600px.
Dimensions windowDimensions = new Dimensions()
{
Width = (int)cvsGameWindow.Width,
Height = (int)cvsGameWindow.Height
};
//init rectangles
for (int i = 0; i < windowDimensions.Width; i+=50)
{
Rectangle rect = new Rectangle(); //create the rectangle
rect.StrokeThickness = 1; //border to 1 stroke thick
rect.Stroke = _blackBrush; //border color to black
rect.Width = 50;
rect.Height = 50;
rect.Name = "box" + i.ToString();
Canvas.SetLeft(rect,i * 50);
_rectangles.Add(rect);
}
foreach (var rect in _rectangles)
{
cvsGameWindow.Children.Add(rect);
}
and the private members declared at the top of my code:
private SolidColorBrush _blackBrush = new SolidColorBrush(Colors.Black);
private SolidColorBrush _redBrush = new SolidColorBrush(Colors.Red);
private SolidColorBrush _greenBrush = new SolidColorBrush(Colors.Green);
private SolidColorBrush _blueBrush = new SolidColorBrush(Colors.Blue);
private List<Rectangle> _rectangles = new List<Rectangle>();
This is the culprit:
Canvas.SetLeft(rect,i * 50);
On the first loop, with i=0, you're setting Canvas.Left = 0; Since your for loop is doing i+=50, on the second loop i will be 50, so you'll be setting Canvas.Left = 2500. You said your Canvas is 400x600, so your rectangles are off-screen.
The simplest fix: use Canvas.SetLeft(rect, i) - since i is increasing in increments of 50.