Rotating image and canvas strokes 90 degrees in any direction

Question

I am developing an application where I am using InkCanvas to allow the users to edit pictures. Everything works as expected except that I couldn't find how to rotate the inkCanvas storeks and the background image below. Below is the code which I currently have any help or guidance will be greatly appreciated.

<Grid >
     <Grid.RowDefinitions>
        <RowDefinition Height="40"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <Grid
        ManipulationMode="TranslateX,TranslateInertia,System" 
        Row="0" Background="White">

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="50"/>

            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="50"/>
            <ColumnDefinition Width="50"/>
            <ColumnDefinition Width="50"/>
            <ColumnDefinition Width="50"/>
            <ColumnDefinition Width="240"/>
        </Grid.ColumnDefinitions>
        <FontIcon 
            Tapped="OnBackButtonClick"
            Grid.Column="0"
            Width="50"
            Height="40"
            FontFamily="Segoe MDL2 Assets" 
            Glyph="&#xE72B;"/>

        <FontIcon 
            Tapped="SaveButton_OnClick"
            Grid.Column="2"
            Width="50"
            Height="40"
            FontFamily="Segoe MDL2 Assets" 
            Glyph="&#xE74E;"/>

        <FontIcon 
            Tapped="RedoButton_OnClick"
            Grid.Column="3"
            Width="50"
            Height="40"
            FontFamily="Segoe MDL2 Assets" 
            Glyph="&#xE7A6;"/>

        <FontIcon 
            Tapped="UndoButton_OnClick"
            Grid.Column="4"
            Width="50"
            Height="40"
            FontFamily="Segoe MDL2 Assets" 
            Glyph="&#xE7A7;"/>

        <FontIcon 
            Grid.Column="5"
            Width="50"
            Tapped="OnButtonRotateClick"
            Height="40"
            FontFamily="Segoe MDL2 Assets" 
            Glyph="&#xE7AD;"/>

        <InkToolbar 
            Grid.Column="7"
            x:Name="inkToolbar"
            HorizontalAlignment="Right"
            TargetInkCanvas="{x:Bind ink}" />

    </Grid>

    <StackPanel Grid.Row="1" >
        <Grid x:Name="Container">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="43*"/>
                <ColumnDefinition Width="437*"/>
            </Grid.ColumnDefinitions>
            <Image x:Name="ImageControl"
                   Source="/Assets/sample.jpg" 
                   Visibility="Visible"
                   Grid.ColumnSpan="2"
                   RenderTransformOrigin="0,0" 
                   Margin="0" 
                   Stretch="Fill"
                 />
            <InkCanvas x:Name="ink" 
                       Visibility="Visible"
                       Grid.ColumnSpan="2"
                       HorizontalAlignment="Stretch" 
                       VerticalAlignment="Stretch"/>
        </Grid>
    </StackPanel>
</Grid>

Hello @NicoZhu-MSFT below answer covers WPF or Xamarin and not UWP, it didn't work for me UWP , try it out and let us know if you are using WPF or Xamarin — Todor Kosev, May 17 '19 at 09:49

score 0 · Answer 1 · answered May 13 '19 at 05:32

Rotating image and canvas strokes 90 degrees in any direction

For your requirement, you could modify PointTransform property for InkStroke. Please refer the following code.

private void BtnSave_Click(object sender, RoutedEventArgs e)
{    
    IReadOnlyList<InkStroke> InkStrokeList = ink.InkPresenter.StrokeContainer.GetStrokes();
    foreach (InkStroke temp in InkStrokeList)
    {
        temp.PointTransform = Matrix3x2.CreateRotation((float)(90 * Math.PI / 180), new Vector2(500, 500));
    }
}

Rotating image and canvas strokes 90 degrees in any direction

1 Answers1