Ho to keep InkCanvas strokes inside InkCanvas in UWP

Question

Consider the following InkCanvas on a UWP app, which is the only element inside a Grid (omitted for conciseness)

<InkCanvas x:Name="inkCanvas" Width="500" Height="500"/>

Draw a stroke which starts somewhere inside the InkCanvas and prolong your stroke outside of the InkCanvas boundaries. Visually, you will have the impression that the stroke ends at the boundary (e.g. at the right edge of the InkCanvas). But this is not true. Resize you InkCanvas via a Button , e.g.

  private void SizeButton_Click(object sender, RoutedEventArgs e)
  {
     inkCanvas.Width = 2000;
     inkCanvas.Height = 2000;
  } 

and you will see the part of the stroke that was drawn outside of the InkCanvas. This part will also be visible if you save your stroke to a gif or isf, with or without resizing, which is very unfortunate. Several apps with inking capabilities in the windows store have this issue.

Question : Why is that and how can we avoid it??

Answer 1

I worked on inking software with a team before InkCanvas came to the scene and we had the same issue. "What should we do when the user drags the pen outside the rectangular region where they're allowed to ink?" We eventually came to the same conclusion as InkCanvas, which is keep the path going.

The reason for this decision came after a bit of trial & error.

We tried clipping the path, that is, cutting it off where it intersects the edge. But we experienced an issue where the user ran the pen outside the box but then came back in the same stroke. Think of it like a signature box. We gave the user a dotted region where they could sign digitally, but almost everyone had an exaggerated signature that exited the boundaries of the dotted region. We couldn't clip because we would actually lose an important part of the signature.

We also tried snapping the path to the edges. When the user dragged outside the box, the ink would snap either vertically or horizontally along the edge of the region. At least with this method, the user would get instant feedback of what happens when dragging outside the region. This was horrible. Bad user experience all around and lots of hate-mail.

So... we left it alone. The box does not affect the ink strokes in any way.

Now, to help you with your situation. If you want to clip the path, you can use Win2D to convert the accumulated ink strokes to a geometry and intersect that with a rectangular geometry with the same size as your InkCanvas (500x500). If you're interested in that direction, Mike Taulty has a post about this. The only thing I'm not sure of is if you can take the final clipped geometry and convert it back into InkStroke. It might be a one-way operation. You'll have to dig that up.