Win8 Canvas 绘图时坐标系翻转

当使用WPF创建图形时，应该清楚的知道图形显示在什么地方，要明白这一点，就需要我们对WPF中的坐标系统有一定的认识。下面就讨论一下WPF中的坐标系统以及它们的关系。

　　默认坐标系统

　　在WPF 2维坐标中规定，左上角是坐标原点，向右为X轴的正方向，向下为Y轴的正方向，如图：

　　在WPF中，可以用布局控件来描述绘制区域，如Canvas、DockPanel、Grid等，下面，看一个例子：

　　运行结果：

Win8 Canvas 绘图时坐标系翻转

　　也可以使用其它单位，WPF支持四种不同的单位：px、in、cm、pt ，如:

　　用户自定义坐标系统

　　WPF除了默认的坐标系统外，也支持用户自定义坐标系统。比如，在很多场景中，是以左下角为坐标原点，Y轴方向指向上方。

Win8 Canvas 绘图时坐标系翻转

　　这个时候，我们可以通过WPF强大的变换把坐标系统变成这个样子，如：

<Window x:Class="Chapter02.LineInCustomSystem"  
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
        Title="Line In Custom System" Height="240" Width="220"> 
    <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> 
</Window>

Win8 Canvas 绘图时坐标系翻转

　　当然，这时也还有一个问题，如在Canvas中添加一个按钮和文本：

<Button Canvas.Top="50" Canvas.Left="80" FontSize="15" Foreground="Red" Name="label1" Content="My Button" /> <TextBlock Canvas.Top="120" Canvas.Left="20" FontSize="12pt" Foreground="Blue"> <Bold>My Text Block</Bold> </TextBlock>

　　会发现，文本和按钮也是经过翻转，要解决这个问题，可以再次翻转：

<Button Canvas.Top="50" Canvas.Left="80" FontSize="15" Foreground="Red" Content="My Button"> <Button.RenderTransform> <ScaleTransform ScaleY="-1" /> </Button.RenderTransform> </Button> <TextBlock Canvas.Top="120" Canvas.Left="20" FontSize="12pt" Foreground="Blue"> <Bold>My Text Block</Bold> <TextBlock.RenderTransform> <ScaleTransform ScaleY="-1" /> </TextBlock.RenderTransform> </TextBlock>

秒客网

Win8 Canvas 绘图时坐标系翻转

相关文章

Win8 Canvas 绘图时 坐标系翻转

相关文章

Win8 Canvas 绘图时坐标系翻转