WPF用SkewTransform画3D柱状图

WPF用SkewTransform画3D柱状图

SkewTransform主要是对控件实现一种2-D扭曲,具体内容可以查看以下链接: http://msdn.microsoft.com/zh-cn/library/system.windows.media.skewtransform.aspx 从图中可以看到,3-D的柱状图呈现给人们的是三个面,所以,我们需要用三个Rectangle经过SkewTransform变换来呈现柱状图的3个面,并且三个面的颜色要相互协调,给
  

  SkewTransform主要是对控件实现一种2-D扭曲,具体内容可以查看以下链接:

  http://msdn.microsoft.com/zh-cn/library/system.windows.media.skewtransform.aspx

  从图中可以看到,3-D的柱状图呈现给人们的是三个面,所以,我们需要用三个Rectangle经过SkewTransform变换来呈现柱状图的3个面,并且三个面的颜色要相互协调,给人一种立体的感觉。首先,新建一个WPF窗体,窗体上放置一个Canvas。

< Window x:Class= "_3DHistogram.Window1"
    xmlns=
"http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x=
"http://schemas.microsoft.com/winfx/2006/xaml"
    Title=
"Window1"  Height= "600"  Width= "800"  WindowStartupLocation= "CenterScreen">
    < Canvas x:Name= "PicBox">
    < /Canvas>
< /Window>

  将各种已配好的颜色方案放在数组里,

private Color[,] colorsSolution =  new Color[12, 3]
        {
           {Color.FromRgb(246,188,16),Color.FromRgb(194,153,11),Color.FromRgb(158,123,3)},
           {Color.FromRgb(175,216,248),Color.FromRgb(135,173,196),Color.FromRgb(111,139,161)},
           {Color.FromRgb(215,69,70),Color.FromRgb(167,55,54),Color.FromRgb(138,44,44)},
           {Color.FromRgb(140,186,0),Color.FromRgb(112,147,1),Color.FromRgb(92,121,2)},
           {Color.FromRgb(253,143,68),Color.FromRgb(200,114,55),Color.FromRgb(165,95,76)},
           {Color.FromRgb(0,142,143),Color.FromRgb(0,113,113),Color.FromRgb(2,92,93)},
           {Color.FromRgb(142,70,143),Color.FromRgb(117,56,116),Color.FromRgb(88,46,90)},
           {Color.FromRgb(90,133,41),Color.FromRgb(70,107,30),Color.FromRgb(58,87,23)},
           {Color.FromRgb(178,170,21),Color.FromRgb(142,133,0),Color.FromRgb(115,108,2)},
           {Color.FromRgb(1,141,216),Color.FromRgb(3,112,175),Color.FromRgb(1,92,137)},
           {Color.FromRgb(158,9,13),Color.FromRgb(130,7,10),Color.FromRgb(101,5,7)},
           {Color.FromRgb(161,134,189),Color.FromRgb(127,105,151),Color.FromRgb(107,86,125)}
        };

  编写画单个柱状图的方法,函数根据提供的宽高以及颜色方案绘制相应的柱状图,

public StackPanel Draw3DHitsgram(Double width, Double height, int colorSolutionIndex)
        {
            StackPanel sp = new StackPanel()
            {
                Orientation = Orientation.Horizontal,
                Height = height + width/3,
                Width = width/3*4
            };

            Rectangle rect1 = new Rectangle()
            {
                Fill = new SolidColorBrush(colorsSolution[colorSolutionIndex, 0]),
                Width = width,
                Height = height,
                VerticalAlignment = VerticalAlignment.Bottom
            };
            sp.Children.Add(rect1);
            Rectangle rect2 = new Rectangle()
            {
                Fill = new SolidColorBrush(colorsSolution[colorSolutionIndex, 1]),
                Width = width,
                Height = width/3,
                VerticalAlignment = VerticalAlignment.Top,
                Margin = new Thickness(-width/3*2, 0, 0, 0),
                RenderTransform = new SkewTransform(-45, 0, 0, 0)
            };
            sp.Children.Add(rect2);
            Rectangle rect3 = new Rectangle()
            {
                Fill = new SolidColorBrush(colorsSolution[colorSolutionIndex, 2]),
                Width = width/3,
                Height = height,
                VerticalAlignment = VerticalAlignment.Bottom,
                Margin = new Thickness(-width/3, 0, 0, 0),
                RenderTransform = new SkewTransform(0, -45, 0, 0)
            };
            sp.Children.Add(rect3);
            
            return sp;
        }

  在窗体的构造函数中用Random生成随机的宽和高,调用上面的函数,将绘制的柱状图添加至Canvas

public Window1()
        {
            InitializeComponent();

            Random r = new Random();
            for (int i = 0; i < 12; i++)
            {
                StackPanel sp = Draw3DHitsgram((Double)(r.Next(20, 50)), (Double)(r.Next(40, 200)), i);
                Canvas.SetLeft(sp, 20 + 70 * i);
                Canvas.SetTop(sp, 250 - sp.Height);
                this.PicBox.Children.Add(sp);

            }
        }

  本文来自junwillday的博客,原文地址:http://blog.csdn.net/junwillday/article/details/7347894

你可能感兴趣的:(transform)