[英]Draw lines and circles in WPF
我需要繪制類似於公交車站模式的圖形: o-School----o-Church-------o-Police
。
因此,簡單的直線和圓。 我還需要縮放它。
當我使用VS 2010時,我認為WPF(據我所知它使用矢量化圖形)應該是開始繪制的好畫布。
是否有可能,很復雜,以及您對WPF初學者有何建議?
謝謝。
編輯:我可以為行(點划線,dotDot ...)設置DashStyle嗎?
這可以幫助您入門。 它具有包含一些形狀的“畫布”,以及允許您控制縮放的“滑塊”控件。 您可以根據需要在Canvas中添加其他元素。
<DockPanel>
<Slider x:Name="slider" Minimum=".1" Maximum="10" Value="1" DockPanel.Dock="Top"/>
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<Border BorderBrush="Black" BorderThickness="1" HorizontalAlignment="Center" VerticalAlignment="Center">
<Canvas Width="300" Height="300">
<Canvas.LayoutTransform>
<ScaleTransform ScaleX="{Binding ElementName=slider, Path=Value}"
ScaleY="{Binding ElementName=slider, Path=Value}"/>
</Canvas.LayoutTransform>
<Ellipse Canvas.Left="10" Canvas.Top="10" Width="20" Height="20"
Stroke="Black" StrokeThickness="1" Fill="Red"/>
<Line Canvas.Left="20" Canvas.Top="30" X1="0" X2="0" Y1="0" Y2="50"
Stroke="Black" StrokeThickness="1"/>
<Ellipse Canvas.Left="10" Canvas.Top="80" Width="20" Height="20"
Stroke="Black" StrokeThickness="1" Fill="Yellow"/>
</Canvas>
</Border>
</ScrollViewer>
</DockPanel>
編輯 :
要更改線條的破折號樣式,只需設置StrokeDashArray屬性。 它允許您指定線條的樣式。 它遵循“段長度,間隙長度,段長度,間隙長度...”的格式,因此請設置以下行:
<Line Canvas.Left="100" Canvas.Top="100" Stroke="Black"
X1="0" X2="100" Y1="0" Y2="0"
StrokeThickness="3" StrokeDashArray="2,2"/>
給你這個(即由一系列長度為2的線段和長度為2的間隙組成的線):
將StrokeDashArray設置為
StrokeDashArray="5,1,1,1"
給你點划線的模式。
您有一些使用Canvas並顯示Zoom的示例,但是如果只需要一行元素,則可以使用StackPanel並設置VerticalAlignment =“ Center”,那么就不必僅計算行的大小即可。
<StackPanel Orientation="Horizontal" VerticalAlignment="Center">
<StackPanel.Resources>
<Style TargetType="Ellipse">
<Setter Property="Width" Value="20" />
<Setter Property="Height" Value="20" />
<Setter Property="Stroke" Value="Orange" />
<Setter Property="StrokeThickness" Value="3" />
</Style>
<Style TargetType="Line">
<Setter Property="Stroke" Value="DodgerBlue" />
<Setter Property="StrokeDashArray" Value="5,1,1,1,1,1" />
<Setter Property="StrokeThickness" Value="2" />
</Style>
<Style TargetType="TextBlock">
<Setter Property="Foreground" Value="White" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="Padding" Value="4" />
</Style>
<Style TargetType="Border" x:Key="Label">
<Setter Property="Background" Value="LimeGreen" />
<Setter Property="CornerRadius" Value="10" />
</Style>
</StackPanel.Resources>
<Ellipse />
<Border VerticalAlignment="Center">
<Line X2="50" />
</Border>
<Border Style="{StaticResource Label}">
<TextBlock Text="Home" />
</Border>
<Border VerticalAlignment="Center">
<Line X2="50" />
</Border>
<Ellipse />
<Border VerticalAlignment="Center">
<Line X2="50" />
</Border>
<Border Style="{StaticResource Label}">
<TextBlock Text="Church" />
</Border>
<Border VerticalAlignment="Center">
<Line X2="50" />
</Border>
<Ellipse />
<Border VerticalAlignment="Center">
<Line X2="20" />
</Border>
<Border Style="{StaticResource Label}">
<TextBlock Text="Police" />
</Border>
</StackPanel>
如果您需要繪制多個圖表,則可以為每種類型的節點(例如,圓,道路,標簽)創建不同的DataTemplate,並使用具有ItemsPanelTemplate設置的ItemsControl來執行相同的操作。
在WPF中很容易繪制簡單的形狀。 您可以通過一些示例在Shapes命名空間中找到它們。
一個適合您的示例:
<Canvas>
<Ellipse Canvas.Top="0" Canvas.Left="0" Width="256" Height="256" />
<Line Canvas.Top="0" Canvas.Left="256" X1="0" Y1="0" X2="128" Y2=128" >
</Canvas>
這不應該太復雜,我可以通過將Canvas放在Viewbox中來使其簡單。 增加“畫布”的“寬度”和“高度”以縮小,減小“畫布”的高度以放大。
<DockPanel>
<Viewbox DockPanel.Dock="Top" Width="100" Height="100" >
<Canvas Width="{Binding Path=Value, ElementName=TheZoomSlider}" Height="{Binding Path=Value, ElementName=TheZoomSlider}">
<Ellipse Stroke="Black" Canvas.Top="40" Canvas.Left="20" Width="20" Height="20" />
<Ellipse Stroke="Black" Canvas.Top="40" Canvas.Left="50" Width="20" Height="20" />
<Ellipse Stroke="Black" Canvas.Top="40" Canvas.Left="80" Width="20" Height="20" />
</Canvas>
</Viewbox>
<Slider Margin="0,400,0,0" HorizontalAlignment="Center" Orientation="Vertical" DockPanel.Dock="Bottom" Name="TheZoomSlider" Minimum="20" Maximum="800" Value="40" />
</DockPanel>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.