WPF - 繪製圖像以帆布和擦除，並多次重繪

我現在有一個WPF應用程序中的圖像背景的畫布。在這個畫布上方，我有一個滑塊控件。我需要，當用戶來回滑動滑塊的值時，在畫布上向下畫一條紅線。每當滑塊值發生變化時，我都需要這樣做，以便紅線始終與滑塊的拇指對齊。我在這裏遇到的最大問題是試圖找出如何有效地繪製線條，然後在用戶更改滑塊的值時，「擦除」先前繪製的線條，並以新的拇指值繪製新線條。如果我簡單地重畫畫布的背景圖像，則應用程序滯後很多，並且效果不佳（此外，由於您仍然可以看到之前繪製的線條，因此這種直接輸出並不能完全解決問題）。WPF - 繪製圖像以帆布和擦除，並多次重繪

任何幫助，將絕對讚賞，特別是例子，因爲我這是在C＃我的第一個WPF應用程序，我消力得到一個感受它的獨特性（而不是Windows窗體）。非常感謝！

來源

2010-07-21 JToland

而不是試圖拿捏自己，更WPF方式來處理這將是使用Line對象。見Shapes and Basic Drawing in WPF Overview。既然你要線條與滑塊對齊，您可以使用數據綁定到該行的X位置綁定到滑塊的位置：

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

（請注意，我被騙了一點通過設置保證金在畫布上5.5。滑塊上的拇指有一定的厚度，並且不會移動滑塊控件的整個寬度，所以爲了讓線條與中心對齊，我試圖使畫布具有相同的寬度作爲軌道。）

來源

2010-07-21 13:50:59 Quartermeister

真棒！我從來沒有在WPF中使用這種綁定;它看起來非常有用，似乎奇妙地工作！不過，我還有一個問題要問你。有沒有辦法將X1綁定到「Value * 3」而不是「Value」的位置？我的背景圖像非常大，所以我將它縮小到適合畫布，但是，我需要繪製線條，而不是滑塊。值的值，而是在3倍的值（因爲我滑塊的最大值設置爲3000，但圖像只有1000像素長）？再次感謝！ – JToland 2010-07-21 17:11:24

@JToland：爲了做這樣的事情，你需要在綁定中加入一個轉換器。閱讀IValueConverter的文檔以獲取更多信息。在這種情況下，您可能只想將滑塊的最大值綁定到圖像的寬度，而不是畫布的寬度，以便最大值僅爲1000。 – Quartermeister 2010-07-21 17:51:46

WPF - 繪製圖像以帆布和擦除，並多次重繪

回答

相關問題