UWP Dessin de toile en dehors des limites

Question

J'ai une toile (pas InkCanvas!) Et je suis capable d'y dessiner des polylignes. Cela fonctionne très bien, mais il y a un énorme problème avec le dessin hors limites comme indiqué dans le fichier GIF ci-dessous.

Ma toile est dans un ScrollViewer et ScrollViewer se trouve dans un GridView.

J'ai essayé d'attraper le pointeur en laissant la toile avec les gestionnaires d'événements suivants:

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

Mais il semble que ces événements sont déclenchés trop lent.

J'ai essayé d'utiliser la propriété Clip de ma toile, mais il n'y a aucun changement de comportement. Et il n'y a pas de propriété "ClipToBound" pour le canevas UWP.

Toute ma vue est générée dans Code-Behind parce que je dois générer plusieurs canevas sur une seule vue.

Y at-il un moyen d'arrêter ce comportement?

EDIT1:

Comme demandé: plus de perspicacité de mon code.

Le XAML page ressemble à ceci:

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

Il est tout à l'intérieur d'une page.

Mon code ressemble derrière comme ceci:

Mes constructeurs:

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

Je ne me suis fait deux contructeurs pour le rendre simple pour moi de instancier toiles avec la possibilité de dessiner et sans la capacité de dessiner .

Voilà comment j'INITIALISER mon 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; 
    } 

Ce sont les seules lignes de code qui affectent toute viewbuilding.

Edit 2:

Ma toile ne remplit pas la grille entourant à gauche, mais sur le fond.

Answer 1

Le code dans votre gestionnaire PointerMoved doit être par rapport à la toile.

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

Si x/y sont négatifs ou supérieurs à la taille de la zone de dessin, ils sont hors limites. Vous pouvez limiter le point à la bordure du canevas comme le fait le code ci-dessus, ou vous pouvez le supprimer complètement.