none
How to draw a line 90 degrees to another line? RRS feed

  • Question

  • In my application I'm drawing a line using the code behind in runtime.
    I want to draw two lines at the border of the initial line with 90 degrees rotation. The initial line could be at any direction.


    I want to know how to have two lines perpendicular to the long one at the beginning and ending points.

    here's how I want the shape of the 3 lines to be.

    |-------------|

    Tuesday, February 19, 2019 11:00 PM

Answers

  • Hi Cherry,

    Thank you for your reply.

    Do you know a way to have two short lines? these lines above are at the same width as the initial line.

    I need two lines like 10 px width.

    Thanks,

    Mahdieh,

    Hi Mahdieh,

    If you want to have two short lines, you can modify l2.x2 and l3.x2 point, like this:

     Line l2 = new Line()
                {
                    X1 = l1.X1,
                    X2 = 200,
                    Y1 = l1.Y1,
                    Y2 = l1.Y2,
                    Stroke = Brushes.Blue
                };
    
                Line l3 = new Line()
                {
                    X1 = l1.X1,
                    X2 = 200,
                    Y1 = l1.Y1,
                    Y2 = l1.Y2,
                    Stroke = Brushes.Yellow
                };
     TransformGroup mytransformgroup = new TransformGroup();
                RotateTransform myrotate = new RotateTransform(90, l1.X1, l1.Y1);
                TranslateTransform mytranslate = new TranslateTransform(0, -(l2.X2/4));
                mytransformgroup.Children.Add(myrotate);
                mytransformgroup.Children.Add(mytranslate);
                l2.RenderTransform = mytransformgroup;
                //l2.RenderTransform = new RotateTransform(90, l3.X1, l3.Y1);
    
                TransformGroup mytransformgroup1 = new TransformGroup();
                RotateTransform myrotate1 = new RotateTransform(90, l1.X2, l1.Y2);
                TranslateTransform mytranslate1 = new TranslateTransform(0, l3.X2/1.4);
                mytransformgroup1.Children.Add(myrotate1);
                mytransformgroup1.Children.Add(mytranslate1);
                l3.RenderTransform = mytransformgroup1;
                //l3.RenderTransform = new RotateTransform(90, l3.X2, l3.Y2);
    
    
                grid.Children.Add(l3);
                grid.Children.Add(l2);

    About 10px width, there are 72 points per inch; if it is sufficient to assume 96 pixels per inch, the formula is rather simple:

    points = pixels * 72 / 96

    There is a way to get the configured pixels per inch of your display in Windows using GetDeviceCaps. Microsoft has a guide called "Developing DPI-Aware Applications", look for the section "Creating DPI-Aware Fonts".

    The W3C has defined the pixel measurement px as exactly 1/96th of 1in regardless of the actual resolution of your display, so the above formula should be good for all web work.

    If you want to get 10 px width, you can convert currrent to point.

    Best Regards,

    Cherry



    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    Tuesday, February 26, 2019 7:44 AM
    Moderator

All replies

  • Hi Mahdieh,

    According to your description, I suggest you can use RotateTransform to rotate one dedrees, and use TranslateTransform to translate, I do one sample about this:

     <Grid Name="grid">
            <Line           
                x:Name="l1"
                Stroke="Red"
                StrokeDashArray="2,4"
                X1="100"
                X2="300"
                Y1="200"
                Y2="200" />
    
            <Button
                Width="200"
                Height="30"
                HorizontalAlignment="Center"
                VerticalAlignment="Bottom"
                Click="Button_Click"
                Content="Draw" />
        </Grid>
     private void Button_Click(object sender, RoutedEventArgs e)
            {
                Line l2 = new Line()
                {
                    X1 = l1.X1,
                    X2 = l1.X2,
                    Y1 = l1.Y1,
                    Y2 = l1.Y2,
                    Stroke = Brushes.Blue
                };
    
                Line l3 = new Line()
                {
                    X1 = l1.X1,
                    X2 = l1.X2,
                    Y1 = l1.Y1,
                    Y2 = l1.Y2,
                    Stroke = Brushes.Yellow
                };
    
    
                TransformGroup mytransformgroup = new TransformGroup();
                RotateTransform myrotate = new RotateTransform(90, l2.X1, l2.Y1);
                TranslateTransform mytranslate = new TranslateTransform(0, -(l2.Y1/2));
                mytransformgroup.Children.Add(myrotate);
                mytransformgroup.Children.Add(mytranslate);
                l2.RenderTransform = mytransformgroup;
                //l2.RenderTransform = new RotateTransform(90, l3.X1, l3.Y1);
    
                TransformGroup mytransformgroup1 = new TransformGroup();
                RotateTransform myrotate1 = new RotateTransform(90, l3.X2, l3.Y2);
                TranslateTransform mytranslate1 = new TranslateTransform(0, l3.Y1/2);
                mytransformgroup1.Children.Add(myrotate1);
                mytransformgroup1.Children.Add(mytranslate1);
                l3.RenderTransform = mytransformgroup1;
                //l3.RenderTransform = new RotateTransform(90, l3.X2, l3.Y2);
    
    
                grid.Children.Add(l3);
                grid.Children.Add(l2);
            }

    Best Regards,

    Cherry


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    Wednesday, February 20, 2019 3:05 AM
    Moderator
  • Hi Mahdieh

    If my reply has resolved your issue, please rememner to close your thread by click Mark as answer for my reply, it is beneficial to other community members who face the same issue.

    Thanks for your understanding.

    Best Regards,

    Cherry


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    Thursday, February 21, 2019 2:04 AM
    Moderator
  • Hi Cherry,

    Thank you for your reply.

    Do you know a way to have two short lines? these lines above are at the same width as the initial line.

    I need two lines like 10 px width.

    Thanks,

    Mahdieh,

    Friday, February 22, 2019 3:39 PM
  • Hi Cherry,

    Thank you for your reply.

    Do you know a way to have two short lines? these lines above are at the same width as the initial line.

    I need two lines like 10 px width.

    Thanks,

    Mahdieh,

    Hi Mahdieh,

    If you want to have two short lines, you can modify l2.x2 and l3.x2 point, like this:

     Line l2 = new Line()
                {
                    X1 = l1.X1,
                    X2 = 200,
                    Y1 = l1.Y1,
                    Y2 = l1.Y2,
                    Stroke = Brushes.Blue
                };
    
                Line l3 = new Line()
                {
                    X1 = l1.X1,
                    X2 = 200,
                    Y1 = l1.Y1,
                    Y2 = l1.Y2,
                    Stroke = Brushes.Yellow
                };
     TransformGroup mytransformgroup = new TransformGroup();
                RotateTransform myrotate = new RotateTransform(90, l1.X1, l1.Y1);
                TranslateTransform mytranslate = new TranslateTransform(0, -(l2.X2/4));
                mytransformgroup.Children.Add(myrotate);
                mytransformgroup.Children.Add(mytranslate);
                l2.RenderTransform = mytransformgroup;
                //l2.RenderTransform = new RotateTransform(90, l3.X1, l3.Y1);
    
                TransformGroup mytransformgroup1 = new TransformGroup();
                RotateTransform myrotate1 = new RotateTransform(90, l1.X2, l1.Y2);
                TranslateTransform mytranslate1 = new TranslateTransform(0, l3.X2/1.4);
                mytransformgroup1.Children.Add(myrotate1);
                mytransformgroup1.Children.Add(mytranslate1);
                l3.RenderTransform = mytransformgroup1;
                //l3.RenderTransform = new RotateTransform(90, l3.X2, l3.Y2);
    
    
                grid.Children.Add(l3);
                grid.Children.Add(l2);

    About 10px width, there are 72 points per inch; if it is sufficient to assume 96 pixels per inch, the formula is rather simple:

    points = pixels * 72 / 96

    There is a way to get the configured pixels per inch of your display in Windows using GetDeviceCaps. Microsoft has a guide called "Developing DPI-Aware Applications", look for the section "Creating DPI-Aware Fonts".

    The W3C has defined the pixel measurement px as exactly 1/96th of 1in regardless of the actual resolution of your display, so the above formula should be good for all web work.

    If you want to get 10 px width, you can convert currrent to point.

    Best Regards,

    Cherry



    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    Tuesday, February 26, 2019 7:44 AM
    Moderator
  • Thanks a lot Cherry!
    Tuesday, February 26, 2019 3:47 PM