Image 如何在图像上绘制并移动它？超宽带

你好，我读这个是为了我的发展

这样我就可以在图像上绘制并保存它

我也想移动图像

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

首先，当我移动弹出界面的图像时，我无法在图像上绘制

第二，当我只使用网格控件时，我不能移动图像

--这是我的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>

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

这是我的弹出代码

<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>

我不能使用弹出式UI在图像上绘制吗

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

这不可能吗？？我真的很好奇

请告诉我你知道的一切

谢谢

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

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

Xaml：

注意：默认情况下，InkCanvas不支持从笔以外的设备输入墨水。必须通过InkPresenter对象的InputDeviceTypes指定对其他设备的支持

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

Xaml：

---

对不起，我误解了。你的建议很有效！是的，这是你问题的关键。最高的Canvas.ZIndex值最后绘制，因此绘制在共享相同空间或以任何方式重叠的任何其他元素上。

<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>

 <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;
}

<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;