WPF-22：WPF绘制五角星改进版（增加半个五角星的绘制）

初步实现了一个绘制五角星的控件（http://blog.csdn.net/yysyangyangyangshan/article/details/9303005），但是在实际中有一种情况显示半颗五角星的。下面做一下改进，完善一下这个五角星控件。
功成名：TestFivePointStarLikeTaobao，
项目如图，

1、两种五角星的绘制方法
这两种计算坐标的方法比较重要。
五点画法，也是常用画法。

        /// <summary>///第一种画法 根据半径和圆心确定五个点/// </summary>/// <param name="center"></param>/// <returns></returns>private PointCollection GetFivePoint1(Point center,double r){double h1 = r * Math.Sin(18 * Math.PI / 180);double h2 = r * Math.Cos(18 * Math.PI / 180);double h3 = r * Math.Sin(36 * Math.PI / 180);double h4 = r * Math.Cos(36 * Math.PI / 180);Point p1 = new Point(r, center.X);Point p2 = new Point(r - h2, r - h1);Point p3 = new Point(r - h3, r + h4);Point p4 = new Point(r + h3, p3.Y);Point p5 = new Point(r + h2, p2.Y);List<Point> values = new List<Point>() { p1, p3, p5, p2, p4 };PointCollection pcollect = new PointCollection(values);return pcollect;}

十点画法，这种比较方便画半颗五角星。

        /// <summary>///第二种画法 根据半径和圆心确定十个点/// </summary>/// <param name="center"></param>/// <returns></returns>private PointCollection GetFivePoint2(Point center, double r){int i;//两个圆的半径 和第一个点初始角度//r1 = r / 2.5, r2 = r值的互换确定是正五角星还是倒五角星double r1 = r / 2.5, r2 = r, g = 18;double pi = Math.PI;List<Point> values = new List<Point>(10);//十个点List<Point> values1 = new List<Point>(5);//(内)外接五个点List<Point> values2 = new List<Point>(5);//(外)内接五个点for (i = 0; i < 5; i++){//计算10个点的坐标Point p1 = new Point(r1 * Math.Cos(g * pi / 180), r1 * Math.Sin(g * pi / 180));Point p2 = new Point(r2 * Math.Cos((g + 36) * pi / 180), r2 * Math.Sin((g + 36) * pi / 180));values1.Add(p1);values2.Add(p2);g += 72;}//左半边：3,4,5,6,7,8//右半边：1,2,3,8,9,10values.Add(values1[0]);//1values.Add(values2[0]);//2values.Add(values1[1]);//3values.Add(values2[1]);//4values.Add(values1[2]);//5values.Add(values2[2]);//6values.Add(values1[3]);//7values.Add(values2[3]);//8values.Add(values1[4]);//9values.Add(values2[4]);//10PointCollection pcollect = new PointCollection(values);return pcollect;}

五角星类代码：

    public class FivePointStar:UserControl{private double radius = 20;private double currentPart = 1;private Brush selectBackground = new SolidColorBrush(Colors.YellowGreen);private Brush unselectBackgroud = new SolidColorBrush(Colors.DarkGray);/// <summary>/// 半径/// </summary>public double Radius{get {object result = GetValue(RadiusProperty);if(result==null){return radius;}return (double)result;}set{SetValue(RadiusProperty, value);this.InvalidateVisual();}}public static  DependencyProperty RadiusProperty =DependencyProperty.Register("Radius", typeof(double), typeof(FivePointStar), new UIPropertyMetadata());/// <summary>/// 当前是否是一颗星/// </summary>public double CurrentPart{get{object result = GetValue(CurrentPartProperty);if (result == null){return currentPart;}return (double)result;}set{SetValue(CurrentPartProperty, value);this.InvalidateVisual();}}public static  DependencyProperty CurrentPartProperty =DependencyProperty.Register("CurrentPart", typeof(double), typeof(FivePointStar), new UIPropertyMetadata());/// <summary>/// 选中颜色/// </summary>public Brush SelectBackground{get{object result = GetValue(SelectBackgroundProperty);if (result == null){return selectBackground;}return (Brush)result;}set{SetValue(SelectBackgroundProperty, value);//this.InvalidateVisual();}}public static  DependencyProperty SelectBackgroundProperty =DependencyProperty.Register("SelectBackground", typeof(Brush), typeof(FivePointStar), new UIPropertyMetadata());/// <summary>/// 未选中颜色/// </summary>public Brush UnSelectBackground{get{object result = GetValue(UnSelectBackgroundProperty);if (result == null){return unselectBackgroud;}return (Brush)result;}set{SetValue(UnSelectBackgroundProperty, value);}}public static  DependencyProperty UnSelectBackgroundProperty =DependencyProperty.Register("UnSelectBackground", typeof(Brush), typeof(FivePointStar), new UIPropertyMetadata());public FivePointStar(): base(){this.Loaded += new RoutedEventHandler(FivePointStar_Loaded);}void FivePointStar_Loaded(object sender, RoutedEventArgs e){//如果使用第一种画法就要开启此注释//this.MinHeight = Radius * 2;//this.MaxHeight = Radius * 2;//this.MinWidth = Radius * 2;//this.MaxWidth = Radius * 2;//this.Background = Brushes.Transparent;this.MinHeight = 0;this.MaxHeight = 0;this.MinWidth = 0;this.MaxWidth = 0;this.Background = Brushes.Transparent;}protected override void OnRender(System.Windows.Media.DrawingContext dc){base.OnRender(dc);Point center = new Point();PointCollection Points = GetFivePoint2(center,Radius);Canvas ca = new Canvas();if (CurrentPart == 1){Polygon plg = new Polygon();plg.Points = Points;plg.Stroke = Brushes.Transparent;plg.StrokeThickness = 2;plg.Fill = this.SelectBackground;plg.FillRule = FillRule.Nonzero;ca.Children.Add(plg);}else if (CurrentPart ==0){Polygon plg = new Polygon();plg.Points = Points;plg.Stroke = Brushes.Transparent;plg.StrokeThickness = 2;plg.Fill = this.UnSelectBackground;plg.FillRule = FillRule.Nonzero;ca.Children.Add(plg);}else{//半边五角星的画法Polygon plg1 = new Polygon();Polygon plg2 = new Polygon();plg1.Points = Points;plg1.Stroke = Brushes.Transparent;plg1.StrokeThickness = 2;plg1.FillRule = FillRule.Nonzero;plg2.Points = Points;plg2.Stroke = Brushes.Transparent;plg2.StrokeThickness = 2;plg2.FillRule = FillRule.Nonzero;//左半边：3,4,5,6,7,8//右半边：1,2,3,8,9,10plg1.Points = new PointCollection() { Points[2],Points[3],Points[4],Points[5],Points[6],Points[7],};plg1.Fill = SelectBackground;plg2.Points = new PointCollection() { Points[0],Points[1],Points[2],Points[7],Points[8],Points[9],};plg2.Fill = UnSelectBackground;ca.Children.Add(plg1);ca.Children.Add(plg2);}ca.HorizontalAlignment = System.Windows.HorizontalAlignment.Stretch;ca.VerticalAlignment = System.Windows.VerticalAlignment.Stretch;this.Content = ca;//Brush b = new SolidColorBrush(Colors.Yellow);//Pen p = new Pen(b, 2);//var path = new Path();//var gc = new GeometryConverter();//path.Data = (Geometry)gc.ConvertFromString(string.Format("M {0} {1} {2} {3} {4} Z",//    Points[0], Points[1], Points[2], Points[3], Points[4]));//path.Fill = Brushes.Yellow;//dc.DrawGeometry(b, p, path.Data);}/// <summary>///第一种画法 根据半径和圆心确定五个点/// </summary>/// <param name="center"></param>/// <returns></returns>private PointCollection GetFivePoint1(Point center,double r){double h1 = r * Math.Sin(18 * Math.PI / 180);double h2 = r * Math.Cos(18 * Math.PI / 180);double h3 = r * Math.Sin(36 * Math.PI / 180);double h4 = r * Math.Cos(36 * Math.PI / 180);Point p1 = new Point(r, center.X);Point p2 = new Point(r - h2, r - h1);Point p3 = new Point(r - h3, r + h4);Point p4 = new Point(r + h3, p3.Y);Point p5 = new Point(r + h2, p2.Y);List<Point> values = new List<Point>() { p1, p3, p5, p2, p4 };PointCollection pcollect = new PointCollection(values);return pcollect;}/// <summary>///第二种画法 根据半径和圆心确定十个点/// </summary>/// <param name="center"></param>/// <returns></returns>private PointCollection GetFivePoint2(Point center, double r){int i;//两个圆的半径 和第一个点初始角度//r1 = r / 2.5, r2 = r值的互换确定是正五角星还是倒五角星double r1 = r / 2.5, r2 = r, g = 18;double pi = Math.PI;List<Point> values = new List<Point>(10);//十个点List<Point> values1 = new List<Point>(5);//(内)外接五个点List<Point> values2 = new List<Point>(5);//(外)内接五个点for (i = 0; i < 5; i++){//计算10个点的坐标Point p1 = new Point(r1 * Math.Cos(g * pi / 180), r1 * Math.Sin(g * pi / 180));Point p2 = new Point(r2 * Math.Cos((g + 36) * pi / 180), r2 * Math.Sin((g + 36) * pi / 180));values1.Add(p1);values2.Add(p2);g += 72;}//左半边：3,4,5,6,7,8//右半边：1,2,3,8,9,10values.Add(values1[0]);//1values.Add(values2[0]);//2values.Add(values1[1]);//3values.Add(values2[1]);//4values.Add(values1[2]);//5values.Add(values2[2]);//6values.Add(values1[3]);//7values.Add(values2[3]);//8values.Add(values1[4]);//9values.Add(values2[4]);//10PointCollection pcollect = new PointCollection(values);return pcollect;}}

这个可以直接使用，效果如下

2、多颗五角星控件
前台，

<UserControl x:Class="TestFivePointStarLikeTaobao.FivePointStarGroup"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:local="clr-namespace:TestFivePointStarLikeTaobao"mc:Ignorable="d"><Grid x:Name="groupGrid" Background="Transparent"><ListBox x:Name="lsbchildCategory" ItemsSource="{Binding ChildCategoryList,IsAsync=True}"Background="WhiteSmoke" BorderThickness="0"><ListBox.ItemTemplate><DataTemplate><local:FivePointStar Radius="{Binding Radius}" CurrentPart="{Binding CurrentValue}" Tag="{Binding ID}" Margin="{Binding Margins}"SelectBackground="{Binding SelectBackground}" UnSelectBackground="{Binding UnselectBackgroud}"MouseDown="FivePointStar_MouseDown"/></DataTemplate></ListBox.ItemTemplate><ListBox.ItemsPanel><ItemsPanelTemplate><StackPanel  VerticalAlignment="Center" Orientation="Horizontal" HorizontalAlignment="Center"/></ItemsPanelTemplate></ListBox.ItemsPanel></ListBox></Grid>
</UserControl>

后台，

    /// <summary>/// FivePointStarGroup.xaml 的交互逻辑/// </summary>public partial class FivePointStarGroup : UserControl{private double radius = 20;private double itemsCount = 5;private double selectCount = 5;private Brush selectBackground = new SolidColorBrush(Colors.YellowGreen);private Brush unselectBackgroud = new SolidColorBrush(Colors.DarkGray);/// <summary>/// 五角星半径/// </summary>public double Radius{get {object result = GetValue(RadiusProperty);if(result==null){return radius;}return (double)result;}set{SetValue(RadiusProperty, value);}}public static  DependencyProperty RadiusProperty =DependencyProperty.Register("Radius", typeof(double), typeof(FivePointStarGroup), new UIPropertyMetadata());/// <summary>/// 五角星个数/// </summary>public double ItemsCount{get{object result = GetValue(ItemsCountProperty);if (result == null){return  itemsCount;}return (double)result;}set{SetValue(ItemsCountProperty, value);InitialData();this.InvalidateVisual();}}public static  DependencyProperty ItemsCountProperty =DependencyProperty.Register("ItemsCount", typeof(double),typeof(FivePointStar), new UIPropertyMetadata());/// <summary>/// 选中的五角星个数/// </summary>public double SelectCount{get{object result = GetValue(SelectCountProperty);if (result == null){return selectCount;}return (double)result;}set{SetValue(SelectCountProperty, value);InitialData();this.InvalidateVisual();}}public static  DependencyProperty SelectCountProperty =DependencyProperty.Register("SelectCount", typeof(double),typeof(FivePointStar), new UIPropertyMetadata());public event RoutedEventHandler SelectCountChangeEvent{add { AddHandler(SelectCountChangePropertyEvent, value); }remove { RemoveHandler(SelectCountChangePropertyEvent, value); }}/// <summary>/// 选中颜色/// </summary>public Brush SelectBackground{get{object result = GetValue(SelectBackgroundProperty);if (result == null){return selectBackground;}return (Brush)result;}set{SetValue(SelectBackgroundProperty, value);}}public static  DependencyProperty SelectBackgroundProperty =DependencyProperty.Register("SelectBackground", typeof(Brush),typeof(FivePointStarGroup), new UIPropertyMetadata());/// <summary>/// 未选中颜色/// </summary>public Brush UnSelectBackground{get{object result = GetValue(UnSelectBackgroundProperty);if (result == null){return unselectBackgroud;}return (Brush)result;}set{SetValue(UnSelectBackgroundProperty, value);}}public static  DependencyProperty UnSelectBackgroundProperty =DependencyProperty.Register("UnSelectBackground", typeof(Brush), typeof(FivePointStarGroup), new UIPropertyMetadata());public static  RoutedEvent SelectCountChangePropertyEvent =EventManager.RegisterRoutedEvent("SelectCountChangeEvent", RoutingStrategy.Bubble, typeof(RoutedEventHandler), typeof(Control));public FivePointStarGroup(){InitializeComponent();this.Loaded += new RoutedEventHandler(FivePointStarGroup_Loaded);}void FivePointStarGroup_Loaded(object sender, RoutedEventArgs e){InitialData();}private void InitialData(){List<FivePointStarModel> list = new List<FivePointStarModel>();int count = Convert.ToInt32(this.ItemsCount);if (count <= 0){count = Convert.ToInt32(this.itemsCount);}for (int i = 0; i < count; i++){FivePointStarModel item = new FivePointStarModel();item.ID = i + 1;item.Radius = Radius;item.SelectBackground = SelectBackground;item.UnselectBackgroud = UnSelectBackground;item.Margins = new Thickness(Radius, 0, Radius, 0);//在此设置星形显示的颜色if ((i + 1) > SelectCount && ((i + 1 - SelectCount) > 0) && (i + 1 - SelectCount) < 1){item.CurrentValue = 0.5;}else if ((i + 1) > SelectCount){item.CurrentValue = 0;}else{item.CurrentValue = 1;}list.Add(item);}this.lsbchildCategory.ItemsSource = list;}private void FivePointStar_MouseDown(object sender, MouseButtonEventArgs e){FivePointStar m = sender as FivePointStar;if (m == null){return;}int index = Convert.ToInt32(m.Tag);this.SelectCount = index;RaiseEvent(new RoutedEventArgs(SelectCountChangePropertyEvent, sender)); }}

用于绑定的类，

   public class FivePointStarModel:NotifyObject{private int id;private double radius = 20;private double currentValue = 1;private Brush selectBackground = new SolidColorBrush(Colors.GreenYellow);private Brush unselectBackgroud = new SolidColorBrush(Colors.DarkGray);private Thickness margins = new Thickness(0);public int ID{get { return id; }set{id = value;this.OnPropertyChanged("Radius");}}public double Radius{get { return radius; }set { radius = value;this.OnPropertyChanged("Radius");}}public double CurrentValue{get { return currentValue; }set {currentValue = value;this.OnPropertyChanged("CurrentValue");}}public Brush SelectBackground{get { return selectBackground; }set{selectBackground = value;this.OnPropertyChanged("SelectBackground");}}public Brush UnselectBackgroud{get { return unselectBackgroud; }set{unselectBackgroud = value;this.OnPropertyChanged("UnselectBackgroud");}}public Thickness Margins{get { return margins; }set{margins = value;this.OnPropertyChanged("Radius");}}}public abstract class NotifyObject : INotifyPropertyChanged{public void OnPropertyChanged(string propname){if (this.PropertyChanged != null){PropertyChanged(this, new PropertyChangedEventArgs(propname));}}public event PropertyChangedEventHandler PropertyChanged;}

这个控件中，增加了设置一颗五角星的三种状态：全选中、全部选中，选中半颗。
对于绑定的类，增加了Margin的绑定。
3、测试调用
前台，

<Window x:Class="TestFivePointStarLikeTaobao.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"Title="MainWindow" Height="446" Width="849" xmlns:my="clr-namespace:TestFivePointStarLikeTaobao"><Grid><my:FivePointStarGroup HorizontalAlignment="Stretch" Margin="136,65,361,281" x:Name="fivePointStarGroup1" VerticalAlignment="Stretch" SelectBackground="GreenYellow" Radius="30" Visibility="Visible"UnSelectBackground="DarkGray" ItemsCount="5" SelectCount="5" /><TextBox Height="30" HorizontalAlignment="Left" Margin="202,232,0,0" Name="textBox1" VerticalAlignment="Top" Width="120"  FontSize="18" /><Button Content="设 置" Height="46" HorizontalAlignment="Left" Margin="365,192,0,0" Name="button1" VerticalAlignment="Top" Width="142" FontSize="18" Click="button1_Click" /><TextBox Height="30" HorizontalAlignment="Left" Margin="202,159,0,0" Name="textBox2" VerticalAlignment="Top" Width="120" FontSize="18"/><TextBlock Height="23" HorizontalAlignment="Left" Margin="136,232,0,0" Name="textBlock1" Text="选 中：" VerticalAlignment="Top" FontSize="18"/><TextBlock Height="23" HorizontalAlignment="Left" Margin="136,159,0,0" Name="textBlock2" Text="总 数：" VerticalAlignment="Top"  FontSize="18"/><my:FivePointStar HorizontalAlignment="Left" Margin="666,232,0,0" x:Name="fivePointStar1" VerticalAlignment="Top" Height="0" Width="0" Radius="30"CurrentPart="1"/></Grid>
</Window>

后台，

    /// <summary>/// MainWindow.xaml 的交互逻辑/// </summary>public partial class MainWindow : Window{public MainWindow(){InitializeComponent();InitialData();this.fivePointStarGroup1.SelectCountChangeEvent += new RoutedEventHandler(fivePointStarGroup1_SelectCountChangeEvent);}private void InitialData(){this.textBox1.Text = this.fivePointStarGroup1.SelectCount.ToString();this.textBox2.Text = this.fivePointStarGroup1.ItemsCount.ToString();}void fivePointStarGroup1_SelectCountChangeEvent(object sender, RoutedEventArgs e){InitialData();}private void button1_Click(object sender, RoutedEventArgs e){double selectCount = Convert.ToDouble(this.textBox1.Text);int allCount = Convert.ToInt32(this.textBox2.Text);if (allCount < selectCount){MessageBox.Show("参数设置错误!");return;}this.fivePointStarGroup1.ItemsCount = allCount;this.fivePointStarGroup1.SelectCount = selectCount;}}

最终效果图，

这样可以适用于大部分的评级功能。
代码下载： http://download.csdn.net/detail/yysyangyangyangshan/5743911

WPF-22：WPF绘制五角星改进版（增加半个五角星的绘制）相关推荐

【WPF】WPF 常用控件
目录一.WPF的概述 1.1 WPF 简介 1.2 WPF 特点二.XAML 2.1 对象元素语法 2.2 XAML 根元素 2.3 WPF 和 XAML 命名空间声明三.控件的继承关系四.常 ...
python画五角星为什么144度_使用turtle绘制五角星、分形树
本文实例为大家分享了使用turtle绘制五角星和分形树的具体代码,供大家参考,具体内容如下 turtle 库与之前程序的区别: 没有显示的input()与output() 没有赋值语句大部分语句为 ...
用canvas绘制“具有碰撞检测效果的运动五角星”
马上9月份要找工作了,琢磨着要做个作品作为面试时的加分项. 本来打算仿一个淘宝网,但写完淘宝首页竟花了我一个星期!!!光html.css就有4000多行,看着首页都能想象出来后台数据的庞大,估计半年都 ...
使用turtle库绘制分形树、太阳花、五角星
1.太阳花的绘制 import turtleturtle.pencolor('red') # 画笔颜色 turtle.fillcolor('yellow') # 填充颜色turtle.begin_fi ...
opengl绘制长方体线框_OpenGL绘图实例十之绘制3D机器人
综述通过上一节说的绘制3D图形基础,我们应该对绘制3D图形有了基本的认识,接下来我们就进行一个实例,绘制一个3D机器人. 本节我们要完成的任务有: 1.绘制一个仿真3D机器人(样式自选,参考例图), ...
python绘制三维曲面图-python中Matplotlib实现绘制3D图的示例代码
Matplotlib 也可以绘制 3D 图像,与二维图像不同的是,绘制三维图像主要通过 mplot3d 模块实现.但是,使用 Matplotlib 绘制三维图像实际上是在二维画布上展示,所以一般绘制三 ...
【MATLAB】三维图形绘制 ( 三维平面图 | 二维网格 | meshgrid 函数 | 绘制网格 | mesh 函授 | 绘制平面 | surf 函数 | 绘制等高线 | contour 函数 )
文章目录一.二维网格 1.线图与平面图 2.meshgrid 函数生成二维网格二.绘制网格 1.mesh 函数绘制网格 2.代码示例三.绘制平面 1.surf 函数绘制平面 2.代码示例四 ...
python图形绘制糖_不给糖果就捣乱，用Python绘制有趣的万圣节南瓜怪！
万圣节又叫诸圣节,在每年的11月1日,是西方的传统节日:而万圣节前夜的10月31日是这个节日最热闹的时刻.在中文里,常常把万圣节前夜(Halloween)讹译为万圣节(All Saints' Day) ...
R语言ggplot2可视化绘制Marimekko/Mosaic图实战：自定义函数绘制Marimekko/Mosaic图（添加数值、标题、色彩配置）、ggmosaic包绘制Marimekko图
R语言ggplot2可视化绘制Marimekko/Mosaic图实战:自定义函数绘制Marimekko/Mosaic图(添加数值.标题.色彩配置).ggmosaic包绘制Marimekko图目录

WPF-22：WPF绘制五角星改进版（增加半个五角星的绘制）

WPF-22：WPF绘制五角星改进版（增加半个五角星的绘制）相关推荐

最新文章

热门文章