WPF图形学习笔记之Line

最新推荐文章于 2025-06-18 15:06:37 发布

YaruCode

最新推荐文章于 2025-06-18 15:06:37 发布

阅读量7.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： WPF学习笔记文章标签： WPF图形学 WPF WPF示例 WPFb笔记

本文链接：https://blog.csdn.net/yasenRK/article/details/104339796

WPF学习笔记专栏收录该内容

25 篇文章

订阅专栏

本文详细介绍了如何使用WPF进行图形绘制，包括Line的创建与属性设置，不同单位的应用，自定义坐标系的实现，以及通过滑动条控制坐标系缩放效果。同时，展示了如何为2D图标应用自定义坐标系，满足坐标系独立于外界物体单位的要求，并以Ellipse为例说明图形自动填充空间的特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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控件的倒置 -->
                <Button.RenderTransform>
                    <ScaleTransform ScaleY="-1"/>
                </Button.RenderTransform>
            </Button>
            <TextBlock FontSize="10" Foreground="Red" Canvas.Top="100" Canvas.Left="10" Text="My text Block">
            <!-- 这里是设置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>
        <!-- First Row -->
        <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"/>

        <!-- First Row -->
        <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"/>

        <!-- First Row -->
        <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>

效果如下：
在这里插入图片描述