如何在 UWP 中将 InkCanvas 笔划保留在 InkCanvas 内

Question

考虑 UWP 应用程序上的以下 InkCanvas，它是网格内的唯一元素（为了简洁而省略）

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

从 InkCanvas 内部某处开始绘制笔划，并将笔划延长到 InkCanvas 边界之外。在视觉上，您会有这样的印象：笔划在边界处结束（例如，在 InkCanvas 的右边缘）。但事实并非如此。通过 Button 调整 InkCanvas 的大小，例如

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

您将看到在 InkCanvas 外部绘制的笔划部分。 如果您将笔划保存为 gif 或 isf，无论是否调整大小，这部分也将可见，这是非常不幸的。 Windows 应用商店中的几个具有墨迹功能的应用程序都存在此问题。

问题：为什么会这样以及我们如何避免它？

Answer 1

在

InkCanvas

来到现场之前，我与一个团队一起开发墨迹软件，我们也遇到了同样的问题。 “当用户将笔拖到允许书写的矩形区域之外时，我们应该做什么？”我们最终得出了与

InkCanvas

相同的结论，那就是继续走下去。

做出这个决定的原因是经过一番尝试和错误之后。

我们尝试剪切路径，即在与边缘相交的地方将其剪掉。但我们遇到了一个问题，即用户在框外使用笔，但随后又以相同的笔画返回。把它想象成一个签名框。我们为用户提供了一个可以进行数字签名的虚线区域，但几乎每个人都有一个超出虚线区域边界的夸张签名。我们无法剪辑，因为我们实际上会丢失签名的重要部分。

我们还尝试将路径捕捉到边缘。当用户将鼠标拖动到框外时，墨水会沿着该区域的边缘垂直或水平对齐。至少使用这种方法，用户可以立即获得拖动到区域之外时发生的情况的反馈。这太可怕了。到处都是糟糕的用户体验和大量的仇恨邮件。

所以...我们就不管它了。该框不会以任何方式影响墨迹笔划。

现在，帮助您解决您的情况。如果要剪切路径，可以使用 Win2D 将累积的墨迹笔划转换为几何图形，并将其与与

InkCanvas

(500x500) 大小相同的矩形几何图形相交。如果您对这个方向感兴趣，Mike Taulty 有一篇关于此的文章。我唯一不确定的是你是否可以将最终的裁剪几何体转换回

InkStroke

。这可能是一种单向操作。你必须把它挖出来。

Answer 2

每当 StrokeCollected 事件发生时，我都会擦除该区域之外的内容。

//right
rect = new System.Windows.Rect(
    inkCanvas.Width, 0,
    mainWindow.ActualWidth, mainWindow.ActualHeight
);
inkCanvas.Strokes.Erase(rect);

//left
rect = new System.Windows.Rect(
    mainWindow.ActualWidth * -1, 0,
    mainWindow.ActualWidth, mainWindow.ActualHeight
);
inkCanvas.Strokes.Erase(rect);

//top
//...
//bottom
//...