WPF - 将图像绘制到画布并反复擦除和重绘答案

【问题标题】：WPF - Drawing image to canvas and erasing and redrawing repeatedlyWPF - 将图像绘制到画布并反复擦除和重绘
【发布时间】：2010-07-21 13:07:13
【问题描述】：

我目前在 WPF 应用程序中有一个带有图像背景的画布。在这个画布上方，我有一个滑块控件。当用户来回滑动滑块的值时，我需要在画布上笔直向下绘制一条红线。每次更改滑块值时我都需要这样做，以使红线始终与滑块的拇指对齐。我在这里遇到的一个大问题是试图弄清楚如何有效地绘制线条，然后在用户更改滑块的值时“擦除”先前绘制的线条并在新的拇指值处绘制一条新线条。如果我只是简单地重绘画布的背景图像，应用程序会滞后很多并且不能正常工作（另外，这并不能完全解决问题，因为您仍然可以看到之前绘制的线条）。

任何帮助都将不胜感激，尤其是示例，因为这是我在 C# 中的第一个 WPF 应用程序，我仍然对它的独特性（相对于 Windows 窗体）有所了解。非常感谢！

【问题讨论】：

标签： c# wpf canvas drawing slider

【解决方案1】：

与其尝试自己画线，更 WPF 的方法是使用 Line 对象。见Shapes and Basic Drawing in WPF Overview。既然想要线条与 Slider 对齐，可以使用数据绑定将线条的 X 位置绑定到 Slider 的位置：

<DockPanel>
    <Slider
        Name="HorizontalSlider"
        DockPanel.Dock="Top"
        Maximum="{Binding ActualWidth, ElementName=Canvas}"/>
    <Canvas Name="Canvas" Margin="5.5 0">
        <Line
            X1="{Binding Value, ElementName=HorizontalSlider}"
            Y1="0"
            X2="{Binding Value, ElementName=HorizontalSlider}"
            Y2="{Binding ActualHeight, RelativeSource={RelativeSource AncestorType=Canvas}}"
            Stroke="Red"/>
    </Canvas>
</DockPanel>

（请注意，我将 Canvas 上的边距设置为 5.5 有点作弊。滑块上的拇指有一定的厚度，不会移动滑块控件的整个宽度，所以为了让线条对线条我试图使画布与轨道具有相同的宽度。）

【讨论】：

太棒了！我从未在 WPF 中使用过这样的绑定；它看起来非常有用，而且效果很好！不过，我还有一个问题要问你。有没有办法将 X1 绑定到“Value * 3”而不是“Value”？我的背景图像非常大，所以我将它缩小以适合画布，但是，我需要绘制线条，而不是在 slider.Value 值处，而是在那个值乘以 3（因为我滑块的最大值设置为 3000，但图像只有 1000 像素长）？再次感谢！
@JToland：一般来说，要做这样的事情，您需要在绑定上放置一个转换器。阅读 IValueConverter 的文档以获取更多信息。在这种情况下，您可能只想将滑块的最大值绑定到图像的宽度而不是画布的宽度，以便最大值仅为 1000。