Как рисовать на изображении и перемещать его? в UWP

Когда вы используете панель Холст и используете присоединенное свойство Canvas.ZIndex для помещения элементов управления в xaml, элемент с наивысшим значением Canvas.ZIndex отрисовывается последним и, следовательно, отрисовывается поверх любых других элементов, которые имеют то же пространство или перекрываются каким-либо образом. Таким образом, самый высокий zindex перекрывает более низкие элементы управления. Если верхний из них имеет не максимальное значение альфа, вы можете увидеть нижние элементы управления zindex, вы также должны указать размер элементов управления, поскольку Canvas не изменяет размер своих дочерних элементов.

Если вы создадите правильный макет, вы можете рисовать на изображении с помощью всплывающего пользовательского интерфейса. Вот образец для рисования во всплывающем окне:

Xaml:

 <Button Click = "ShowPopup" Content = "click me"/>
 <Popup x:Name = "IMG_G"  Width = "600" Height = "300" ManipulationMode = "All" HorizontalAlignment = "Left" >
     <Grid x:Name = "img_grid" Width = "600" Height = "500">
         <Image  VerticalAlignment = "Top" Source = "Assets/image1.jpg" HorizontalAlignment = "Left"
                 x:Name = "img" Stretch = "Fill" Height = "400" Width = "600" />
         <InkCanvas   x:Name = "img_inkcanvas"/>
         <InkToolbar   x:Name = "img_inktoolbar" TargetInkCanvas = "{x:Bind img_inkcanvas}" 
                       VerticalAlignment = "Top"></InkToolbar>
         <Button  x:Name = "IMG_C"  Content = "Close" VerticalAlignment = "Top" HorizontalAlignment = "Left" />
         <Button  x:Name = "Img_draw" VerticalAlignment = "Top" HorizontalAlignment = "Right" Content = "Draw"/>
     </Grid>
 </Popup>

Код позади:

public InkCanvasPage()
{
    this.InitializeComponent();
    img_inkcanvas.InkPresenter.InputDeviceTypes = 
Windows.UI.Core.CoreInputDeviceTypes.Mouse |
Windows.UI.Core.CoreInputDeviceTypes.Pen;
}
private void ShowPopup(object sender, RoutedEventArgs e)
{
    IMG_G.IsOpen = true;
}

Обратите внимание, что: по умолчанию InkCanvas не поддерживает ввод рукописного ввода с других устройств, кроме пера. Вы должны указать поддержку других устройств через InputDeviceTypes объекта InkPresenter.

Что касается вашего второго вопроса о перемещении изображения, поскольку вы наложили InkCanvas поверх всего изображения, изображение не может получить событие ManipulationDelta. Вы можете попытаться избежать перекрытия какой-либо области изображения, чтобы управлять изображением из этой области. В следующем примере вы можете переместить изображение с верхних 20 пикселей изображения.

Xaml:

<Grid x:Name = "img_grid" Width = "600" Height = "500">
    <Image  VerticalAlignment = "Top" Source = "Assets/image1.jpg" HorizontalAlignment = "Left"
                x:Name = "img" Stretch = "Fill" Height = "400" Width = "600" ManipulationMode = "All" />
    <InkCanvas Margin = "0,20,0,0"  x:Name = "img_inkcanvas"/>
    <InkToolbar Margin = "0,20,0,0"  x:Name = "img_inktoolbar" TargetInkCanvas = "{x:Bind img_inkcanvas}"
                      VerticalAlignment = "Top"></InkToolbar>
    <Button  x:Name = "IMG_C"  Content = "Close" VerticalAlignment = "Top" HorizontalAlignment = "Left" />
    <Button  x:Name = "Img_draw" VerticalAlignment = "Top" HorizontalAlignment = "Right" Content = "Draw"/>
</Grid>

Код позади:

public InkCanvasPage()
{
    this.InitializeComponent();
    img_inkcanvas.InkPresenter.InputDeviceTypes =
Windows.UI.Core.CoreInputDeviceTypes.Mouse |
Windows.UI.Core.CoreInputDeviceTypes.Pen;
    img.ManipulationDelta += Img_ManipulationDelta;
    dragTranslation = new TranslateTransform();
    // Apply the translation to the Rectangle.
    img.RenderTransform = this.dragTranslation;
}

private void Img_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
    dragTranslation.X += e.Delta.Translation.X;
    dragTranslation.Y += e.Delta.Translation.Y;
}

private TranslateTransform dragTranslation;