WPF图形学习笔记之Line

WPF_Graphics之Line

Line

创建一个Line

 <Canvas>
        <Line X1="0" Y1="0"
              X2="100" Y2="100"
              Stroke="Black"
              StrokeThickness="1"/>
    Canvas>

WPF绘制图形时提供了以下的几个单位(默认的单位是像素)：

1.px, 像素(一个像素等于1/96个英寸)
2. in, 英寸;1in=96px
3. cm, 厘米，1cm=(96/2.54)px
4. pt,点，1pt=(96/72)px

自定义坐标系

<Border BorderBrush="Black" BorderThickness="1"
                Height="200" Width="200">
        <Canvas Height="200" Width="200">
            <Canvas.RenderTransform>
                <TransformGroup>
                    <ScaleTransform ScaleY="-1"/>
                    <TranslateTransform Y="200"/>
                TransformGroup>
            Canvas.RenderTransform>
            <Line X1="0" Y1="0"
                  X2="100" Y2="100"
                  Stroke="Black"
                  StrokeThickness="2"/>
        Canvas>
    Border>

上面的操作成功的进行了两次坐标转换，第一个时把Y轴的正方向转换到朝上为正方向，第二个是把原点向下偏移了200个像素（默认单位是像素）

如果在上述的Canvas中添加一个Button和TextBlock的话，其内容也跟着倒置。需要进行坐标的转置才可以使其正常显示，代码如下：

 <Button Name="btn" Canvas.Top="80" Canvas.Left="100" FontSize="15" Content="My button">
                
                <Button.RenderTransform>
                    <ScaleTransform ScaleY="-1"/>
                Button.RenderTransform>
            Button>
            <TextBlock FontSize="10" Foreground="Red" Canvas.Top="100" Canvas.Left="10" Text="My text Block">
            
                <TextBlock.RenderTransform>
                    <ScaleTransform ScaleY="-1"/>
                TextBlock.RenderTransform>
            TextBlock>

用一个滑动条来控制坐标系的Scale属性(即实现zooming的效果)

代码如下：

        <StackPanel Height="280" Width="250">
            <Border BorderBrush="Black" BorderThickness="1" Height="200"
                    Width="200" Margin="20">
                <Canvas Height="200" Width="200" >
                    <Canvas.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform ScaleY="-1"/>
                            <TranslateTransform Y="200"/>
                        TransformGroup>
                    Canvas.RenderTransform>
                    <Line X1="0" Y1="0"
                          X2="100" Y2="100"
                          Stroke="Black" StrokeThickness="2">
                        <Line.RenderTransform>
                            <ScaleTransform 
                                ScaleX="{Binding ElementName=slider, Path=Value}"
                                ScaleY="{Binding ElementName=slider,Path=Value}"/>
                        Line.RenderTransform>
                    Line>

                    <Rectangle Canvas.Top="100" Canvas.Left="30" Width="80"
                               Height="40" Stroke="DarkRed" StrokeThickness="3">
                        <Rectangle.RenderTransform>
                            <ScaleTransform
                                 ScaleX="{Binding ElementName=slider, Path=Value}"
                                ScaleY="{Binding ElementName=slider,Path=Value}"/>
                        Rectangle.RenderTransform>
                    Rectangle>  
                Canvas>
            Border>
        <Slider Margin="10 10 10 10" Name="slider" Minimum="0" Maximum="3"  
                    Value="1"/>
    StackPanel>

为2D图标自定义一个坐标系

为2D图标应用自定义的坐标体系必须满足一下要求：

• 坐标系必须独立与外界物体的单位
• 坐标系的Y轴的正方向必须时朝上的，此外坐标系原点必须位于图形窗口的左下角

Ellipse示例

 <Grid>
        <StackPanel Orientation="Vertical">
            <TextBlock Text="Ellipse Width=100  Height=70" HorizontalAlignment="Center" FontSize="20"/>
            <Ellipse Stroke="Black" Fill="LightGray" Width="100" Height="70" Margin="20 10 0 0"/>


            <TextBlock Text="Cirle Width=100  Height=100" Margin="0 30 0 0" HorizontalAlignment="Center" FontSize="20"/>
            <Ellipse Stroke="Black" Fill="LightGray" Width="100" Height="100" Margin="20 10 0 0"/>
        StackPanel>

    Grid>

巨星和椭圆都有自动填充自己所在空间的特性，如果没有显示的声明宽度和高度，那么就会填充所在空间，下面用实例说明

     Title="Rectangle" Height="500" Width="400">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="2*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="2*"/>
            <ColumnDefinition Width="*"/>
        Grid.ColumnDefinitions>
        
        <Ellipse Grid.Row="0" Grid.Column="0" Fill="LightBlue" Stroke="Black"/>
        <Ellipse Grid.Row="0" Grid.Column="1" Fill="Red" Stroke="Black" StrokeThickness="2"/>
        <Rectangle Grid.Row="0" Grid.Column="2" Fill="Blue" Stroke="Black" StrokeThickness="1"/>

        
        <Ellipse Grid.Row="1" Grid.Column="1" Fill="LightBlue" Stroke="Black"/>
        <Ellipse Grid.Row="1" Grid.Column="2" Fill="Red" Stroke="Black" StrokeThickness="2"/>
        <Rectangle Grid.Row="1" Grid.Column="0" Fill="Blue" Stroke="Black" StrokeThickness="1"/>

        
        <Ellipse Grid.Row="2" Grid.Column="2" Fill="LightBlue" Stroke="Black"/>
        <Ellipse Grid.Row="2" Grid.Column="0" Fill="Red" Stroke="Black" StrokeThickness="2"/>
        <Rectangle Grid.Row="2" Grid.Column="1" Fill="Blue" Stroke="Black" StrokeThickness="1"/>

    Grid>

效果如下：