Develop Reference

How do I determine the rotation point of a polygon (triangle)?

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.

How do you translate chart coordinates to device pixels in SkiaSharp?

I'm attempting to write a matrix transform to convert chart points to device pixels in SkiaSharp. I have it functional as long as I use 0,0 as my minimum chart coordinates but if I need to to step up from a negative number, it causes the drawing to shift left and down. That is to say that the X Axis is shifted to the left off the window and the Y Axis is shift down off the window.
This is intended to be a typical line chart (minimum chart point at the lower left while minimum device point at the upper left). I have accounted for that already in the transform.
While stepping through code I can see that the coordinates returned from the Matrix are not what I expect them to be, so I believe the issue to be with my transform but I haven't been able to pinpoint it.
UPDATE: After further examination, I believe I was mistaken, it is not shifted, it's just not scaling properly to the max end of the screen. There is a bigger margin at the top and right side of the chart than there should be, but the bottom and left side are fine. I've been undable to determine why the scaling doesn't fill the canvas.
Below are my matrix methods:
private SKMatrix ChartToDeviceMatrix, DeviceToChartMatrix;
private void ConfigureTransforms(SKPoint ChartMin,
SKPoint ChartMax, SKPoint DeviceMin, SKPoint DeviceMax)
{
this.ChartToDeviceMatrix = SKMatrix.MakeIdentity();
float xScale = (DeviceMax.X - DeviceMin.X) / (ChartMax.X - ChartMin.X);
float yScale = (DeviceMin.Y - DeviceMax.Y) / (ChartMax.Y - ChartMin.Y);
this.ChartToDeviceMatrix.SetScaleTranslate(xScale, yScale, DeviceMin.X, DeviceMax.Y);
this.ChartToDeviceMatrix.TryInvert(out this.DeviceToChartMatrix);
}
// Transform a point from chart to device coordinates.
private SKPoint ChartToDevice(SKPoint point)
{
return this.ChartToDeviceMatrix.MapPoint(point);
}
The code invoking this is:
void OnCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs args)
{
SKImageInfo info = args.Info;
SKSurface surface = args.Surface;
SKCanvas canvas = surface.Canvas;
float strokeWidth = 1;
float margin = 10;
// SKPaint definitions omitted for brevity.
var ChartMin = new SKPoint(-10, -1); // Works fine if I change this to 0,0
var ChartMax = new SKPoint(110, 11);
var DeviceMin = new SKPoint(margin, margin);
var DeviceMax = new SKPoint(info.Width - margin, info.Height - margin);
const float stepX = 10;
const float stepY = 1;
const float tickX = 0.5;
const float tickY = 0.075F;
// Prepare the transformation matrices.
this.ConfigureTransforms(ChartMin, ChartMax, DeviceMin, DeviceMax);
// Draw the X axis.
var lineStart = new SKPoint(ChartMin.X, 0);
var lineEnd = new SKPoint(ChartMax.X, 0);
canvas.DrawLine(this.ChartToDevice(lineStart), this.ChartToDevice(lineEnd), axisPaint);
// X Axis Tick Marks
for (float x = stepX; x <= ChartMax.X - stepX; x += stepX)
{
var tickMin = new SKPoint(x, -tickY);
var tickMax = new SKPoint(x, tickY);
canvas.DrawLine(this.ChartToDevice(tickMin), this.ChartToDevice(tickMax), axisPaint);
}
// Draw the Y axis.
// The inversion of above, basically the same.

I was able to discover my own problem with enough time. I wasn't calculating the offset correct.
this.ChartToDeviceMatrix.SetScaleTranslate(xScale, yScale, DeviceMin.X, DeviceMax.X);
Should have been:
this.ChartToDeviceMatrix.SetScaleTranslate(xScale, yScale, -ChartMin.X * xScale + DeviceMin.Y, -ChartMin.Y * yScale + DeviceMax.Y);
Final Matrix method was:
private SKMatrix ChartToDeviceMatrix, DeviceToChartMatrix;
private void ConfigureTransforms(SKPoint ChartMin, SKPoint ChartMax, SKPoint DeviceMin, SKPoint DeviceMax)
{
this.ChartToDeviceMatrix = SKMatrix.MakeIdentity();
float xScale = (DeviceMax.X - DeviceMin.X) / (ChartMax.X - ChartMin.X);
float yScale = (DeviceMin.Y - DeviceMax.Y) / (ChartMax.Y - ChartMin.Y);
float xOffset = -ChartMin.X * xScale + DeviceMin.X;
float yOffset = -ChartMin.Y * yScale + DeviceMax.Y;
this.ChartToDeviceMatrix.SetScaleTranslate(xScale, yScale, xOffset, yOffset);
this.ChartToDeviceMatrix.TryInvert(out this.DeviceToChartMatrix);
}

Use graphics.ScaleTransform on Drawing

At the moment I develope a ChartControl and it works just pretty well in my opinion,
but now I'm at a point where it would be nice to have the ability to zoom the drawed signal for better analyzing.
At the moment I calculate the needed points like this:
for (int i = 0; i < PointsCount; i++){
xAxisPoint = xAxisOP.X + i * (xAxisWidth / PointsCount);
yAxisPoint = yAxisHeight * data[i].Point / Divisor;
if(yAxisPoint > yAxisHeight){
yAxisPoint = yAxisHeight;
}
if(yAxisPoint < -yAxisHeight){
yAxisPoint = -yAxisHeight;
}
Points[i] = new PointF(xAxisPoint, yAxisOP.Y + yAxisPoint);
}
if(zoom){
graphics.ScaleTransform(0.2f*ZoomFactor, 0.2f*ZoomFactor);
}
using (Pen plotPen = new Pen(plotColor, 1)){
graphics.DrawLines(plotPen, Points);
}
But the problem is: When it zooms in, the zoom is way too big and is drawn outside the bounds of my control.
Is there a way to specify an area in which it should be Scaled (zoomed)?

For the final question: Is there a way to specify an area in which it should be scaled/zoomed? you need a combination of SetClip, TranslateTransform and ScaleTransform.
Here is an example.
It uses a
target rectangle zoomTgtArea where the zoomed graphics are displayed,
a mouse location zoomOrigin where the zoom origin is,
a float zoomFactor, a positive float.
Initial values:
Rectangle zoomTgtArea = new Rectangle(300, 500, 200, 200);
Point zoomOrigin = Point.Empty; // updated in MouseMove when button is pressed
float zoomFactor = 2f;
The trick to zoom in on only a part of the graphics is to display the graphics twice, once normally and once with the transformations of the Graphics object.
Let's try:
private void pictureBox_Paint(object sender, PaintEventArgs e)
{
// normal drawing
DrawStuff(e.Graphics);
// for the movable zoom we want a small correction
Rectangle cr = pictureBox.ClientRectangle;
float pcw = cr.Width / (cr.Width - ZoomTgtArea.Width / 2f) ;
float pch = cr.Height / (cr.Height - ZoomTgtArea.Height / 2f) ;
// now we prepare the graphics object; note: order matters!
e.Graphics.SetClip(zoomTgtArea );
// we can either follow the mouse or keep the output area fixed:
if (cbx_fixed.Checked)
e.Graphics.TranslateTransform( ZoomTgtArea.X - zoomCenter.X * zoomFactor,
ZoomTgtArea.Y - zoomCenter.Y * zoomFactor);
else
e.Graphics.TranslateTransform( - zoomCenter.X * zoomFactor * pcw,
- zoomCenter.Y * zoomFactor * pch);
// finally zoom
e.Graphics.ScaleTransform(zoomFactor, zoomFactor);
// and display zoomed
DrawStuff(e.Graphics);
}
The DrawStuff I used is simple:
void DrawStuff(Graphics g)
{
bool isZoomed = g.Transform.Elements[0]!= 1
|| g.Transform.OffsetX != 0 | g.Transform.OffsetY != 0;
if (isZoomed) g.Clear(Color.Gainsboro); // pick your back color
// all your drawing here!
Rectangle r = new Rectangle(10, 10, 500, 800); // some size
using (Font f = new Font("Tahoma", 11f))
g.DrawString(text, f, Brushes.DarkSlateBlue, r);
}
Its only extra is clearing the background so the normal drawing won't shine through the zoomed version..
Let's see:

Windows Phone: How to draw a line on a Rectangle?

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

Draw on MSChart control

I've got a simple line graph and I'd like to highlight some parts of this graph by drawing a rectangle around the line (ideally a filled rectangle with transparency...). I haven't any idea if this is possible with the MS chart control ?

I recommend you download the code samples from MS and checkout the section on annotations. In there you will find all the documentation you require to achieve what you described:
private void AddRectangleAnnotation()
{
RectangleAnnotation annotation = new RectangleAnnotation();
annotation.AnchorDataPoint = Chart1.Series[0].Points[2];
annotation.Text = "I am a\nRectangleAnnotation";
annotation.ForeColor = Color.Black;
annotation.Font = new Font("Arial", 12);;
annotation.LineWidth = 2;
annotation.BackColor = Color.PaleYellow;
annotation.LineDashStyle = ChartDashStyle.Dash;
Chart1.Annotations.Add(annotation);
}

Do you mean:
using (Graphics g = Graphics.FromImage(pictureBox1.Image))
{
using(Brush brush = new SolidBrush(your_color))
{
g.FillRectangle(brush , x, y, width, height);
}
}
or you can use
Brush brush = new SolidBrush(Color.FromArgb(alpha, red, green, blue))
where alpha goes from 0 to 255, so a value of 128 for your alpha will give you 50% opactity.

When you'd like to draw on a chart you can take add a LineAnnotation or RectangleAnnotation. if however you'd like more control you can use the chart's PrePaint and PostPaint events. And if you can paint, well then you can paint anything. Also using this will make the chart "printing" and "exporting" look the same as you painted it. Paining over it will look funny when the chart's location is changed on the screen, so always paint in it.
Say you have a trading chart and you need to draw a line as to where you become profitable or as square as to state where you're "To Something" tzhen just add the coordinates from where to where you'd like to be and of you go...
MS Chart sample project shows how to do this with the following code (vb.net also available):
using System.Windows.Forms.DataVisualization.Charting;
...
private void chart1_PostPaint(object sender, System.Windows.Forms.DataVisualization.Charting.ChartPaintEventArgs e)
{
if(sender is ChartArea)
{
ChartArea area = (ChartArea)sender;
if(area.Name == "Default")
{
// If Connection line is not checked return
if( !ConnectionLine.Checked )
return;
double max;
double min;
double xMax;
double xMin;
// Find Minimum and Maximum values
FindMaxMin( out max, out min, out xMax, out xMin );
// Get Graphics object from chart
Graphics graph = e.ChartGraphics.Graphics;
// Convert X and Y values to screen position
float pixelYMax = (float)e.ChartGraphics.GetPositionFromAxis("Default",AxisName.Y,max);
float pixelXMax = (float)e.ChartGraphics.GetPositionFromAxis("Default",AxisName.X,xMax);
float pixelYMin = (float)e.ChartGraphics.GetPositionFromAxis("Default",AxisName.Y,min);
float pixelXMin = (float)e.ChartGraphics.GetPositionFromAxis("Default",AxisName.X,xMin);
PointF point1 = PointF.Empty;
PointF point2 = PointF.Empty;
// Set Maximum and minimum points
point1.X = pixelXMax;
point1.Y = pixelYMax;
point2.X = pixelXMin;
point2.Y = pixelYMin;
// Convert relative coordinates to absolute coordinates.
point1 = e.ChartGraphics.GetAbsolutePoint(point1);
point2 = e.ChartGraphics.GetAbsolutePoint(point2);
// Draw connection line
graph.DrawLine(new Pen(Color.Yellow,3), point1,point2);
}
}
}
private void chart1_PrePaint(object sender, System.Windows.Forms.DataVisualization.Charting.ChartPaintEventArgs e)
{
if(sender is ChartArea){
ChartArea area = (ChartArea)sender;
if(area.Name == "Default")
{
double max;
double min;
double xMax;
double xMin;
// Find Minimum and Maximum values
FindMaxMin( out max, out min, out xMax, out xMin );
// Get Graphics object from chart
Graphics graph = e.ChartGraphics.Graphics;
// Convert X and Y values to screen position
float pixelYMax = (float)e.ChartGraphics.GetPositionFromAxis("Default",AxisName.Y,max);
float pixelXMax = (float)e.ChartGraphics.GetPositionFromAxis("Default",AxisName.X,xMax);
float pixelYMin = (float)e.ChartGraphics.GetPositionFromAxis("Default",AxisName.Y,min);
float pixelXMin = (float)e.ChartGraphics.GetPositionFromAxis("Default",AxisName.X,xMin);
// Specify width of triangle
float width = 3;
// Set Maximum points
PointF [] points = new PointF[3];
points[0].X = pixelXMax - width;
points[0].Y = pixelYMax - width - 2;
points[1].X = pixelXMax + width;
points[1].Y = pixelYMax - width - 2;
points[2].X = pixelXMax;
points[2].Y = pixelYMax - 1;
// Convert relative coordinates to absolute coordinates.
points[0] = e.ChartGraphics.GetAbsolutePoint(points[0]);
points[1] = e.ChartGraphics.GetAbsolutePoint(points[1]);
points[2] = e.ChartGraphics.GetAbsolutePoint(points[2]);
// Draw Maximum trangle
graph.FillPolygon(new SolidBrush(Color.Red), points);
// Set Minimum points
points = new PointF[3];
points[0].X = pixelXMin - width;
points[0].Y = pixelYMin + width + 2;
points[1].X = pixelXMin + width;
points[1].Y = pixelYMin + width + 2;
points[2].X = pixelXMin;
points[2].Y = pixelYMin + 1;
// Convert relative coordinates to absolute coordinates.
points[0] = e.ChartGraphics.GetAbsolutePoint(points[0]);
points[1] = e.ChartGraphics.GetAbsolutePoint(points[1]);
points[2] = e.ChartGraphics.GetAbsolutePoint(points[2]);
// Draw Minimum triangle
graph.FillPolygon(new SolidBrush(Color.Blue), points);
}
}
}