# draw shapes

### Question

•  I want to draw simple shapes like circle ,triangle,rectangle and be able to rotate them and resize them by clicking buttons.

I can resize a shape using line draw  and erase the previous lines but what is the most flexible way in code behind?

Friday, March 06, 2009 6:28 AM

• straight from my latest project

```            Line line = new Line();
line.X1 = 30.0;
line.Y1 = 30.0;
line.X2 = 30.0;
line.Y2 = 60.0;
line.StrokeThickness = 1;
Color StartColor = new Color();
StartColor.A = 255;
StartColor.R = EyeColour.R;
StartColor.G = EyeColour.G;
StartColor.B = EyeColour.B;
GS.Color = StartColor;
GS.Offset = 0.0;
Color EndColor = new Color();
EndColor.A = 0;
EndColor.R = 100;
EndColor.G = 100;
EndColor.B = 100;
GS2.Color = EndColor;
GS2.Offset = 0.5 + length; // length = 0.0 - 0.4;
LGB.StartPoint = new Point(0, 0);
LGB.EndPoint = new Point(0, 1);
line.Stroke = LGB;
RotateTransform RT = new RotateTransform();
RT.Angle = angle;
RT.CenterX = 30;
RT.CenterY = 30;
line.RenderTransform = RT;
return line;
```

Tuesday, March 10, 2009 10:18 AM
•  the RotateTransform.CenterX/Y is relative to the object not the container.

so an image of 200x200 has a center of 100,100 regardless of where it is placed in a container.

Wednesday, March 11, 2009 11:37 AM

### All replies

• sounds a lot like the project I have just finished, See-Muse

Each player takes turns describing a word using the shapes provided within a time limit, becuase it is a messenger game and not everyone wants to install that there is video to watch.

The control players have is, add new shape, rotate, shrink, grow, change colour and delete.

Shapes are constructed from basics i.e. Ellipses, Rectangles and Path data.

Full source code available.

http://www.pay4foss.org/seemuse/seemuse.zip

Friday, March 06, 2009 7:15 AM

•

2) How do i draw a shape using paths from code behind?

Friday, March 06, 2009 5:26 PM
•  OK to be more specific how do i draw path from code behind  with this shape.

a semi-circle and line across the bottom of it. so it is a curve and a line

Saturday, March 07, 2009 4:21 AM
• Heres the msdn link. http://msdn.microsoft.com/en-us/library/cc189073(VS.95).aspx Each Markup element has a CLR Counterpart, so its basically the same, the Data property ca be filled with the same string used in markup.
Saturday, March 07, 2009 8:48 PM
• Hi,

From the code behind is always what I want. I mentioned this at the start.

I am seen the XAML way befrore.

1) how do i use Path adata from code behind?

2) how do i scale a triangle made up of lines from code behind?

Sunday, March 08, 2009 1:34 AM
• or the Silverlight way:

```var path = new Path();
path.Data = "M 100,200 C 100,25 400,350 400,175 H 280";
```

Sunday, March 08, 2009 10:22 AM
•  i have draw a triangle with lines because it resizes.

how can i make this shape rotate which comrises of 3 lines?

Sunday, March 08, 2009 7:13 PM
• You dont need lines to form a triangle, that can be resized. U can use the trianles Transform property to apply a rotation transformation. This will rotate the triangle around a specific point for a specific angle.
Sunday, March 08, 2009 7:56 PM
•  i am not sure what you mean.  there is a rotate transform but I have  lines joined. The reason is the lines can vary in size at runtime.

Sunday, March 08, 2009 9:52 PM
• Hey mexican, can you increase or decrease the stroke size of the lines?
Monday, March 09, 2009 9:30 AM
•  yes i can but this has nothing to do with rotating a shape made up of lines.

I am making myself clear as I just draw 3 lines to make a shape , then I want to rotate the shape  but how do i do this?

Tuesday, March 10, 2009 2:17 AM
• you place them in a layout container then you rotate your grid, canvas, or whatever, using rotatetransform.
Tuesday, March 10, 2009 2:38 AM
•  from the code behind how do i do this?

Tuesday, March 10, 2009 4:20 AM
•  Canvas MyContainer = new Canvas();

RotateTransform MyRotate = new RotateTransform();
MyRotate .Angle = 1;
MyRotate .CenterX = -15;
MyRotate .CenterY = 5;
MyCanvas.RenderTransform = MyRotate;

Tuesday, March 10, 2009 6:08 AM
• a line has a render Transform so can i simply rotate the lines somehow?

Tuesday, March 10, 2009 6:26 AM
• straight from my latest project

```            Line line = new Line();
line.X1 = 30.0;
line.Y1 = 30.0;
line.X2 = 30.0;
line.Y2 = 60.0;
line.StrokeThickness = 1;
Color StartColor = new Color();
StartColor.A = 255;
StartColor.R = EyeColour.R;
StartColor.G = EyeColour.G;
StartColor.B = EyeColour.B;
GS.Color = StartColor;
GS.Offset = 0.0;
Color EndColor = new Color();
EndColor.A = 0;
EndColor.R = 100;
EndColor.G = 100;
EndColor.B = 100;
GS2.Color = EndColor;
GS2.Offset = 0.5 + length; // length = 0.0 - 0.4;
LGB.StartPoint = new Point(0, 0);
LGB.EndPoint = new Point(0, 1);
line.Stroke = LGB;
RotateTransform RT = new RotateTransform();
RT.Angle = angle;
RT.CenterX = 30;
RT.CenterY = 30;
line.RenderTransform = RT;
return line;
```

Tuesday, March 10, 2009 10:18 AM
• I can rotate a line but i cant rotate an image.

I thought this rotates and image  around point 200,200 angle 20 deg.

The imagse seems to move off screen ?

Dim myR As New RotateTransform
myR.Angle = 20
myR.CenterX = 15
myR.CenterY = 20

For i = 0 To dotList.Count - 1

dotList.Item(i).Image.RenderTransform = myR

dotList.Item(i).X = Canvas.GetLeft(dotList.Item(i).Image) + dotList.Item(i).Image.Width / 2
dotList.Item(i).Y = Canvas.GetTop(dotList.Item(i).Image) + dotList.Item(i).Image.Width / 2

Next

Wednesday, March 11, 2009 8:32 AM
•  the RotateTransform.CenterX/Y is relative to the object not the container.

so an image of 200x200 has a center of 100,100 regardless of where it is placed in a container.

Wednesday, March 11, 2009 11:37 AM