如何在图像上绘制并移动它？在 UWP 中

Question

您好，我为我的发展阅读了此Displaying a background image on a UWP ink canvas

所以我可以在图像上绘制并保存它。

我也想移动图像。

我有两个关于图像控制的问题

首先，当我移动 Popup UI 的图像时，我无法在图像上绘图。

其次，当我只使用网格控件时，我无法移动图像

---这是我的 xaml 代码（仅网格）---

<Grid x:Name="img_grid3" Width="600" Height="500" HorizontalAlignment="Center" VerticalAlignment="Bottom" ManipulationDelta="img_grid3_ManipulationDelta">
        <Image VerticalAlignment="Top" HorizontalAlignment="Left" x:Name="img3" Stretch="Fill" Height="400" Width="600" >
        </Image>
        <InkCanvas x:Name="img_inkcanvas3"/>
        <InkToolbar x:Name="img_inktoolbar3" Canvas.ZIndex="8" TargetInkCanvas="{x:Bind img_inkcanvas3}" VerticalAlignment="Top"></InkToolbar>
        <Button x:Name="IMG_C3" Canvas.ZIndex="8" Content="Close" Background="White"  VerticalAlignment="Top" HorizontalAlignment="Left" Click="IMG_C3_Click"/>
        <Button x:Name="Img_draw3" Canvas.ZIndex="8" VerticalAlignment="Top" HorizontalAlignment="Right" Content="Draw" Click="Img_draw3_Click"/>
    </Grid>

---

 private TranslateTransform dragTranslation_I;


    public MainPage()
    {
        this.InitializeComponent();

        dragTranslation_I = new TranslateTransform();

    }

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

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

这是我的弹出代码

<Popup x:Name="IMG_G"    Width="600" Height="300" ManipulationMode="All" HorizontalAlignment="Left" >            
        <Grid x:Name="img_grid" Width="600" Height="500">                
            <Image Canvas.ZIndex="6" VerticalAlignment="Top" HorizontalAlignment="Left" x:Name="img" Stretch="Fill" Height="400" Width="600" />
            <InkCanvas x:Name="img_inkcanvas"/>
            <InkToolbar x:Name="img_inktoolbar" Canvas.ZIndex="8" TargetInkCanvas="{x:Bind img_inkcanvas}" VerticalAlignment="Top"></InkToolbar>
            <Button x:Name="IMG_C" Canvas.ZIndex="8" Content="Close" Background="White"  VerticalAlignment="Top" HorizontalAlignment="Left" Click="IMG_C_Click" />
            <Button x:Name="Img_draw" Canvas.ZIndex="8" VerticalAlignment="Top" HorizontalAlignment="Right" Click="Img_draw_Click" Content="Draw"/>
        </Grid>
    </Popup>

我不能使用 Popup UI 在图像上绘图吗？

或者我不能移动网格的图像吗？

这不可能吗？？我真的很想知道

请告诉我你知道的任何事情！

谢谢

Answer 1

当您使用Canvas 面板并使用Canvas.ZIndex 附加属性将控件放入xaml 时，具有最高Canvas.ZIndex 值的元素最后绘制，因此绘制在共享相同空间的任何其他元素上或以任何方式重叠。所以最高的 zindex 覆盖了较低的控件。如果顶部的 alpha 值不是最大值，您可以看到较低的 zindex 控件，您还应该指定控件的大小，因为 Canvas 不会对其子项进行任何大小调整。

如果您创建了正确的布局，则可以使用弹出式 UI 在图像上进行绘制。这是一个在弹出窗口上绘制的示例：

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 不支持笔以外的其他设备的墨水输入。您必须通过 InkPresenter 对象的 InputDeviceTypes 指定对其他设备的支持。

对于第二个移动图像的问题，由于您在所有图像的顶部覆盖了 InkCanvas，因此图像无法获得ManipulationDelta 事件。您可以尝试保持某些图像区域避免重叠以操作该区域的图像。如以下示例，您可以将图像从图像顶部的 20 px 高度移动。

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;