WPF 实现自定义的笔迹橡皮擦_wpf canvas 背景图 画笔 橡皮

本文来告诉大家使用比较底层的方法来实现 WPF 的笔迹橡皮擦

在 WPF 里面，对于笔迹来说，应该放在 Stroke 类里面，而不是作为点的集合存储。在 Stroke 类里面将作为管理笔迹的类提供笔迹的渲染和橡皮擦等功能。咱下面将从 Stroke 类开始，自己定义笔迹橡皮擦。阅读本文，你将了解如何自定义橡皮擦，如自定义橡皮擦的外观样式，了解如何不依赖 InkCanvas 来实现笔迹的擦除

原本我是想采用 WPF 最简逻辑实现多指顺滑的笔迹书写 的方式来做笔迹的绘制部分的，但是考虑使用上面博客的方法将会让大家需要多了解很多触摸相关的知识，因此我就简单使用 InkCanvas 来做笔迹的绘制。以下只是将 InkCanvas 作为笔迹的绘制，而橡皮擦部分是咱定制的

在 XAML 中添加一个 InkCanvas 的代码很简单，请看代码

        <InkCanvas x:Name="InkCanvas"></InkCanvas>

咱可以从这个 InkCanvas 里面获取当前的笔迹，如下面代码

StrokeCollection strokes = InkCanvas.Strokes;

这里拿到的 StrokeCollection 是一个集合，这个集合里面包含了多个 Stroke 类，在 WPF 中，一条笔迹就是一个 Stroke 对象。而多个 Stroke 就放在 StrokeCollection 类里面。可以认为是一个笔画就是一个 Stroke 而一个汉子包含了多个笔画，因此一个汉子的笔迹集合就使用 StrokeCollection 表示

通过上面代码就可以拿到 InkCanvas 里面的所有笔迹，接下来就是自定义橡皮擦部分的逻辑

这里的自定义橡皮擦的核心逻辑就是在 InkCanvas 上再放一个 Canvas 容器，在这个 Canvas 容器里面放自定义的橡皮擦的界面。因为这个 Canvas 容器在 InkCanvas 的上方，因此自定义的橡皮擦界面也将会在 InkCanvas 上

在界面里面放一个 Canvas 和一个用 Rectangle 表示的自定义外观的橡皮擦，大家可以使用自己喜欢的控件来代替 Rectangle 控件

        <InkCanvas x:Name="InkCanvas"></InkCanvas>
        <Canvas x:Name="EraserCanvas" Grid.Row="0" Background="Transparent" Visibility="Collapsed">
            <Rectangle x:Name="EraserShape" HorizontalAlignment="Left" 
                       Width="50" Height="100" Fill="Red" VerticalAlignment="Top">
                <Rectangle.RenderTransform>
                    <TranslateTransform x:Name="TranslateTransform"></TranslateTransform>
                </Rectangle.RenderTransform>
            </Rectangle>
        </Canvas>

可以看到在上面代码中，使用了 RenderTransform 来控制自定义的橡皮擦所在的坐标。上面代码有一个细节是需要设置这个自定义橡皮擦就在容器的左上角上，通过 HorizontalAlignment 和 VerticalAlignment 设置。当然了咱因为是放在 Canvas 容器里面，默认就是在左上角上，但是有个好习惯还是不错的。我就怕你抄代码的时候，用的容器和用的控件默认不是在左上角的

在上面代码中，咱默认的 EraserCanvas 是不可见的，而且背景色是透明的。这是为了默认可以在 InkCanvas 上写，而在点击按钮的时候，才设置 Eraser