Question

你好，我读过Displaying a background image on a UWP ink canvas是为了我的发展

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

我也想移动图像。

我在图像控制方面有2个问题

首先，然后移动弹出界面的图像时，无法在图像上绘图。

第二，当我仅使用网格控件时，我将无法移动图像

---这是我的xaml代码（仅适用于Grid）---

<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像素的高度移出。

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;

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

1 个答案: