2012年11月27日火曜日

係数aを指定して2次曲線を表示

y=ax^2のグラフを表示してみる。係数aは、テキストボックスで指定できるようにする。
座標系は固定で、グラフが画面内におさまるのは、x軸、y軸ともに-15から15までとする。
2次曲線は、実際は曲線で描画していない。0.1ごとのxにたいするyを求めて、点を線分でつなげている。
連続する線分はPolyLineSegment クラスを使う。

Canvasの座標系は、デフォルトだと左上が(0,0)でピクセル単位なので、y座標の正負を逆にしてx、yのスケールを10倍する。
また、OffsetX、OffsetYを150ずつずらして、原点をウィンドウの中心あたりにもってきている。
<Matrix OffsetX="150" OffsetY="150" M11="10" M12="0" M21="0" M22="-10"/>



MainWindow.xaml

<Window x:Class="Graph.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="二次曲線 y=ax^2" Height="370" Width="330">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <DockPanel Grid.Row="0">
            <TextBlock DockPanel.Dock="Left">係数a:</TextBlock>
            <TextBox DockPanel.Dock="Left" Width="200" Name="coefficientTextBox"/>
            <Button DockPanel.Dock="Left" Click="Button_Click">描画</Button>
        </DockPanel>
        <Canvas Grid.Row="1" Name="canvas1">
            <Canvas.Resources>
                <Style TargetType="Line">
                    <Setter Property="StrokeThickness" Value="0.1" />
                    <Setter Property="Stroke" Value="Black" />
                </Style>
            </Canvas.Resources>
            <Canvas.RenderTransform>
                <MatrixTransform>
                    <MatrixTransform.Matrix>
                        <Matrix OffsetX="150" OffsetY="150" M11="10" M12="0" M21="0" M22="-10"/>
                    </MatrixTransform.Matrix>
                </MatrixTransform>
            </Canvas.RenderTransform>
            <Path Stroke="Black" StrokeThickness="0.1" Name="path"/>
            <Line X1="-15" Y1="0" X2="15" Y2="0" />
            <Line X1="0" Y1="-15" X2="0" Y2="15" />
            <Line X1="-10" Y1="-0.3" X2="-10" Y2="0.3" />
            <Line X1="10" Y1="-0.3" X2="10" Y2="0.3" />
            <Line X1="-0.3" Y1="10" X2="0.3" Y2="10" />
            <Line X1="-0.3" Y1="-10" X2="0.3" Y2="-10" />
        </Canvas>
        <Canvas Grid.Row="1">
            <TextBlock Canvas.Left="40" Canvas.Top="155">-10</TextBlock>
            <TextBlock Canvas.Left="240" Canvas.Top="155">10</TextBlock>
            <TextBlock Canvas.Left="160" Canvas.Top="40">10</TextBlock>
            <TextBlock Canvas.Left="160" Canvas.Top="240">-10</TextBlock>
        </Canvas>
    </Grid>
</Window>

MainWindow.xaml.cs


using System.Collections.Generic;
using System.Windows;
using System.Windows.Documents;
using System.Windows.Media;

namespace Graph
{
    public partial class MainWindow Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            double a = 1;
            if (this.coefficientTextBox.Text != "")
            {
                a = double.Parse(this.coefficientTextBox.Text);
            }
            List<Point> points = new List<Point>();
            for (double x = -15; x <= 15; x = x + 0.1)
            {
                double y = a * x * x;
                if (-15 <= y && y <= 15)
                {
                    points.Add(new Point(x, y));
                }
            }

            PolyLineSegment myPolyLineSegment = new PolyLineSegment(points, true);
            PathFigure pf = new PathFigure();
            pf.Segments.Add(myPolyLineSegment);
            pf.StartPoint = points[0];
            PathFigureCollection pfc = new PathFigureCollection();
            pfc.Add(pf);
            this.path.Data = new PathGeometry(pfc);
        }
    }
}

0 件のコメント:

コメントを投稿