silverlight3 学习 3.1,绘图--举一反三(圆形,矩形) 简单实现
Home.xaml
<Grid x:Name="LayoutRoot" Background="AliceBlue" >
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ScrollViewer x:Name="PageScrollViewer" Style="{StaticResource PageScrollViewerStyle}" Grid.Row="0">
<StackPanel x:Name="ContentStackPanel" Orientation="Horizontal" Height="20">
<TextBox x:Name="txtPoint" Width="120"></TextBox>
<Button Height="20" Width="50" Content="圆形" x:Name="btnEllipse" Click="btnEllipse_Click"></Button>
<Button Height="20" Width="50" Content="矩形" x:Name="btnRect" Click="btnRect_Click"></Button>
</StackPanel>
</ScrollViewer>
<InkPresenter x:Name="inkP" MouseLeave="inkP_MouseLeave" MouseLeftButtonUp="inkP_MouseLeftButtonUp" Grid.Row="1" Background="Black" MouseLeftButtonDown="inkP_MouseLeftButtonDown" MouseMove="inkP_MouseMove" >
</InkPresenter>
</Grid>
Home.xaml.cs
public partial class Home : Page { private Stroke MyStroke; private Point p; private bool _isStart = false; private bool _isDrawEllipse = false; private bool _isDrawRect = false; public Home() { InitializeComponent(); } // Executes when the user navigates to this page. protected override void OnNavigatedTo(NavigationEventArgs e) { } private void inkP_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) { p.X = e.StylusDevice.GetStylusPoints(inkP)[0].X ; p.Y = e.StylusDevice.GetStylusPoints(inkP)[0].Y ; _isStart = !_isStart; } private void inkP_MouseMove(object sender, MouseEventArgs e) { if ( _isStart && _isDrawEllipse) { inkP.Children.Clear(); Ellipse ell = new Ellipse(); double width = e.StylusDevice.GetStylusPoints(inkP)[0].X - p.X; if (width <= 0) width = p.X - e.StylusDevice.GetStylusPoints(inkP)[0].X; double height = e.StylusDevice.GetStylusPoints(inkP)[0].Y - p.Y; if (height <= 0) height = p.Y - e.StylusDevice.GetStylusPoints(inkP)[0].Y; ell.Width = width; ell.Height = height; ell.Stroke = new SolidColorBrush(Colors.White); InkPresenter.SetLeft(ell, p.X); InkPresenter.SetTop(ell, p.Y); inkP.Children.Add(ell); txtPoint.Text = "" + e.StylusDevice.GetStylusPoints(inkP)[0].X + "," + e.StylusDevice.GetStylusPoints(inkP)[0].Y; txtPoint.Text += "和" + ell.Width + "," + ell.Height; } if (_isStart && _isDrawRect) { inkP.Children.Clear(); Rectangle rect = new Rectangle(); rect.Stroke = new SolidColorBrush(Colors.White); rect.Width = e.StylusDevice.GetStylusPoints(inkP)[0].X - p.X; rect.Height = e.StylusDevice.GetStylusPoints(inkP)[0].Y - p.Y; InkPresenter.SetLeft(rect, p.X); InkPresenter.SetTop(rect, p.Y); inkP.Children.Add(rect); } } private void inkP_MouseLeftButtonUp(object sender, MouseButtonEventArgs e) { _isStart = !_isStart; } private void btnEllipse_Click(object sender, RoutedEventArgs e) { _isDrawEllipse = true; _isDrawRect = false; } private void inkP_MouseLeave(object sender, MouseEventArgs e) { _isStart = false; } private void btnRect_Click(object sender, RoutedEventArgs e) { _isDrawRect = true; _isDrawEllipse = false; } }
以下内容摘自MSDN:
Silverlight可用于绘制基本形状类:
Ellipse 绘制一个椭圆。
Line 在两个点之间绘制一条直线。
Path 绘制一系列相互连接的直线和曲线。直线和曲线维度通过 Data 属性声明,并且可以使用 Path 特定的 mini-language 或使用对象模型来指定。
Polygon 绘制一个多边形,它是形成闭合形状的一系列相互连接的直接。
Polyline 绘制一系列相互连接的直线。
Rectangle 绘制一个矩形形状,该形状可以具有笔画和填充。
Shape 为 Ellipse、Polygon 和 Rectangle 之类的形状元素提供基类。
Silverlight提供的绘图类,相对简单,容易掌握。