Question

我有一个画布（不是InkCanvas！），我可以在上面绘制Polylines。这工作得很好，但是如下面的GIF中所示，绘制出界限存在一个巨大的问题。

我的画布位于ScrollViewer中，ScrollViewer位于GridView内。

我试图通过以下事件处理程序捕获指针离开画布：

canvas.PointerExited += Canvas_PointerExited;
canvas.PointerCaptureLost += Canvas_PointerCaptureLost;

但似乎这些事件被解雇得太慢了。

我尝试使用画布的Clip属性，但行为没有变化。并且UWP画布没有“ClipToBound”属性。

我的整个视图是在Code-Behind中生成的，因为我必须在一个视图上生成多个画布。

有没有办法阻止这种行为？

EDIT1：

根据要求：更深入了解我的代码。

XAML页面如下所示：

<Grid x:Name="BoundingGrid">
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="15*"/>
    </Grid.RowDefinitions>
    <Grid x:Name="InkGrid" VerticalAlignment="Top" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" />
    <Grid x:Name="CanvasGrid" Grid.Row="1" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" VerticalAlignment="Top"/>
</Grid>

这一切都在一个页面内。

我的代码背后是这样的：

我的构造函数：

public ImprovedCanvasManager(Grid boundingGrid, Grid overviewGrid, string filepath, double height)
    {
        drawCanvas = new Canvas();

        overviewGrid.Loaded += OverviewGrid_Loaded;
        overviewGrid.SizeChanged += OverviewGrid_SizeChanged;

        RowDefinition rd = new RowDefinition();
        rd.Height = new GridLength(height);

        overviewGrid.RowDefinitions.Add(rd);

        InitializeScrollViewer();

        Grid.SetRow(scroll, overviewGrid.RowDefinitions.Count);
        Grid.SetColumn(scroll, 0);

        scroll.Content = drawCanvas;
        overviewGrid.Children.Add(scroll);
        LoadImage(filepath);
    }

        public ImprovedCanvasManager(Grid boundingGrid, Grid overviewGrid, Grid inkToolGrid, string filepath, double height = 1000) : this(boundingGrid, overviewGrid, filepath, height)
    {
        AddDrawingToolsToCanvas(inkToolGrid, overviewGrid);
        EnableDrawingOnCanvas(drawCanvas);
    }

我只有两个构造器，让我可以简单地实例化具有绘制能力并且没有绘制能力的画布。

这是我初始化ScrollViewer的方式：

private void InitializeScrollViewer()
    {
        scroll = new ScrollViewer();

        scroll.VerticalAlignment = VerticalAlignment.Top;
        scroll.VerticalScrollMode = ScrollMode.Auto;
        scroll.HorizontalScrollMode = ScrollMode.Auto;
        scroll.VerticalScrollBarVisibility = ScrollBarVisibility.Visible;
        scroll.HorizontalScrollBarVisibility = ScrollBarVisibility.Visible;
        scroll.ZoomMode = ZoomMode.Enabled;
        scroll.ManipulationMode = ManipulationModes.All;

        scroll.MinZoomFactor = 1;
        scroll.MaxZoomFactor = 3;
    }

这些是影响任何视图构建的唯一代码行。

编辑2：

我的画布不会填充左侧的周围网格，而是填充在底部。

Answer 1

PointerMoved处理程序中的代码应该相对于画布。

private void OnPointerMoved(object sender, PointerRoutedEventArgs e)
{
    var point = e.GetCurrentPoint(canvas); // <-- relative to canvas.
    var x = point.Position.X;
    var y = point.Position.Y;

    x = Math.Max(x, 0);
    y = Math.Max(y, 0);
    x = Math.Min(canvas.ActualWidth, x);
    y = Math.Min(canvas.ActualHeight, y);


    // add point to polyline...
}

如果x / y为负或大于画布的大小，则它们超出范围。您可以像上面的代码一样将点限制到画布边框，也可以完全丢弃该点。

UWP Canvas绘图越界

1 个答案: