WPFSilverlight中图形的平移,缩放,旋转,倾斜变换演示

概述为方便描述, 这里仅以正方形来做演示, 其他图形从略。 运行时效果图： XAML代码： // Transform.XAML <Canvas Width="700" Height="700" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"   xmlns:x="http://schemas.microsoft.com

为方便描述,这里仅以正方形来做演示,其他图形从略。

运行时效果图：

XAML代码：
// transform.XAML

<Canvas WIDth="700" Height="700" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
        <Canvas.Resources>
            <DrawingBrush x:Key="MyGrIDBrushResource" VIEwport="0,100,100" VIEwportUnits="absolute" TileMode="Tile">
                <DrawingBrush.Drawing>
                    <DrawingGroup>
                        <DrawingGroup.Children>
                            <!--横线-->
                            <GeometryDrawing Geometry="M0,1 L10,1 M0,2 L10,2 M0,3 L10,3 M0,4 L10,4 M0,5 L10,5 M0,6 L10,6 M0,7 L10,7 M0,8 L10,8 M0,9 L10,9">
                                <GeometryDrawing.Pen>
                                    <Pen Thickness="0.1" Brush="#CCCCFF" />
                                </GeometryDrawing.Pen>
                            </GeometryDrawing>
                            <!-- 横线100整数倍 -->
                            <GeometryDrawing Geometry="M0,0 L10,0">
                                <GeometryDrawing.Pen>
                                    <Pen Thickness="0.1" Brush="DarkOrange" />
                                </GeometryDrawing.Pen>
                            </GeometryDrawing>
                            <!--竖线-->
                            <GeometryDrawing Geometry="M1,0 L1,10 M2,0 L2,10 M3,0 L3,10 M4,0 L4,10 M5,0 L5,10 M6,0 L6,10 M7,0 L7,10 M8,0 L8,10 M9,0 L9,10">
                                <GeometryDrawing.Pen>
                                    <Pen Thickness="0.1" Brush="#CCCCFF" />
                                </GeometryDrawing.Pen>
                            </GeometryDrawing>
                            <!-- 竖线100整数倍 -->
                            <GeometryDrawing Geometry="M0,0 L0,10">
                                <GeometryDrawing.Pen>
                                    <Pen Thickness="0.1" Brush="DarkOrange" />
                                </GeometryDrawing.Pen>
                            </GeometryDrawing>
                        </DrawingGroup.Children>
                    </DrawingGroup>
                </DrawingBrush.Drawing>
            </DrawingBrush>

            <!-- 这里是外框线 -->
            <Style x:Key="MyGrIDborderStyle">
                <Setter Property="border.Background" Value="{StaticResource MyGrIDBrushResource}"/>
                <Setter Property="border.HorizontalAlignment" Value="Center"/>
                <Setter Property="border.VerticalAlignment" Value="top"/>
                <Setter Property="border.borderBrush" Value="Black"/>
                <Setter Property="border.borderThickness" Value="1"/>
            </Style>
        </Canvas.Resources>

        <!-- 引用方式 -->
        <border Style="{StaticResource MyGrIDborderStyle}">
            <Canvas WIDth="700" Height="600">
<!-- // 演示平移 -->
            <Canvas WIDth="800" Height="100" Canvas.top="0" Canvas.left="0">
<!-- 不平移-->
<Canvas WIDth="120" Height="120"  Canvas.left="0" Canvas.top="0">
                <Rectangle WIDth="80" Height="80" stroke="Black" />
</Canvas>
<!--水平平移10 -->
<Canvas WIDth="120" Height="120"  Canvas.left="100" Canvas.top="0">
                <Rectangle WIDth="80" Height="80" stroke="Black" />
                <Rectangle WIDth="80" Height="80" stroke="Red">
                    <Rectangle.Rendertransform>
                           <Translatetransform X="10" />
                    </Rectangle.Rendertransform>
                </Rectangle>
</Canvas>

<!--垂直平移10 -->
<Canvas WIDth="120" Height="120"  Canvas.left="200" Canvas.top="0">
                <Rectangle WIDth="80" Height="80" stroke="Black" />
                <Rectangle WIDth="80" Height="80" stroke="Red">
                    <Rectangle.Rendertransform>
                           <Translatetransform Y="10" />
                    </Rectangle.Rendertransform>
                </Rectangle>
</Canvas>

<!--水平平移10，垂直平移10 -->
<Canvas WIDth="120" Height="120"  Canvas.left="300" Canvas.top="0">
                <Rectangle WIDth="80" Height="80" stroke="Black" />
                <Rectangle WIDth="80" Height="80" stroke="Red">
                    <Rectangle.Rendertransform>
                           <Translatetransform X="10" Y="10" />
                    </Rectangle.Rendertransform>
                </Rectangle></Canvas>
       </Canvas>

<!-- // 演示缩放 -->
            <Canvas WIDth="800" Height="100" Canvas.top="100" Canvas.left="0">
<!-- 未缩放时的原始大小-->
<Canvas WIDth="120" Height="120"  Canvas.left="0" Canvas.top="0">
                <Rectangle WIDth="80" Height="80" stroke="Black" />
</Canvas>
<!--水平缩放比例：2倍 -->
<Canvas WIDth="120" Height="120"  Canvas.left="100" Canvas.top="0">
                <Rectangle WIDth="80" Height="80" stroke="Red">
                    <Rectangle.Rendertransform>
                           <Scaletransform ScaleX="2" />
                    </Rectangle.Rendertransform>
                </Rectangle>
                <Rectangle WIDth="80" Height="80" stroke="Black" />
</Canvas>

<!--垂直缩放比例2.5倍 -->
<Canvas WIDth="120" Height="120"  Canvas.left="300" Canvas.top="0">
                <Rectangle WIDth="80" Height="80" stroke="Red">
                    <Rectangle.Rendertransform>
                           <Scaletransform ScaleY="2.5" />
                    </Rectangle.Rendertransform>
                </Rectangle>
                <Rectangle WIDth="80" Height="80" stroke="Black" />
</Canvas>

<!--水平、垂直同时缩放2.5倍 -->
<Canvas WIDth="120" Height="120"  Canvas.left="400" Canvas.top="0">
                <Rectangle WIDth="80" Height="80" stroke="Red">
                    <Rectangle.Rendertransform>
                           <Scaletransform ScaleX="2.5" ScaleY="2.5" />
                    </Rectangle.Rendertransform>
                </Rectangle>
                <Rectangle WIDth="80" Height="80" stroke="Black" />
</Canvas>
       </Canvas>

<!-- // 演示旋转 -->
            <Canvas WIDth="800" Height="100" Canvas.top="300" Canvas.left="0">
<!-- 不旋转-->
<Canvas WIDth="120" Height="120"  Canvas.left="0" Canvas.top="20">
                <Rectangle WIDth="80" Height="80" stroke="Black" />
                <Ellipse WIDth="4" Height="4" stroke="Black" Canvas.top="38" Canvas.left="38"  />
</Canvas>
<!--旋转15度（默认以左上角为旋转中心 -->
<Canvas WIDth="120" Height="120"  Canvas.left="100" Canvas.top="20">
                <Rectangle WIDth="80" Height="80" stroke="Black">
                    <Rectangle.Rendertransform>
                           <Rotatetransform Angle="15" />
                    </Rectangle.Rendertransform>
                </Rectangle>
                <!-- 旋转中心点 -->
                <Ellipse WIDth="4" Height="4" Fill="Red" Canvas.top="-2" Canvas.left="-2"  />
                <!-- 矩形中心点 -->
                <Ellipse WIDth="4" Height="4" stroke="Black" Canvas.top="38" Canvas.left="38"  />
</Canvas>
<!--旋转15度，以右上角为旋转中心 -->
<Canvas WIDth="120" Height="120"  Canvas.left="200" Canvas.top="20">
                <Rectangle WIDth="80" Height="80" stroke="Black">
                    <Rectangle.Rendertransform>
                           <Rotatetransform Angle="15" CenterX="80" CenterY="0" />
                    </Rectangle.Rendertransform>
                </Rectangle>
                <!-- 旋转中心点 -->
                <Ellipse WIDth="4" Height="4" Fill="Red" Canvas.top="-2" Canvas.left="78"  />
                <!-- 矩形中心点 -->
                <Ellipse WIDth="4" Height="4" stroke="Black" Canvas.top="38" Canvas.left="38"  />
</Canvas>
<!--旋转15度，以左下角为旋转中心 -->
<Canvas WIDth="120" Height="120"  Canvas.left="300" Canvas.top="20">
                <Rectangle WIDth="80" Height="80" stroke="Black">
                    <Rectangle.Rendertransform>
                           <Rotatetransform Angle="15" CenterX="0" CenterY="80" />
                    </Rectangle.Rendertransform>
                </Rectangle>
                <!-- 旋转中心点 -->
                <Ellipse WIDth="4" Height="4" Fill="Red" Canvas.top="78" Canvas.left="-2"  />
                <!-- 矩形中心点 -->
                <Ellipse WIDth="4" Height="4" stroke="Black" Canvas.top="38" Canvas.left="38"  />
</Canvas>
<!--旋转15度，以右下角为旋转中心 -->
<Canvas WIDth="120" Height="120"  Canvas.left="400" Canvas.top="20">
                <Rectangle WIDth="80" Height="80" stroke="Black">
                    <Rectangle.Rendertransform>
                           <Rotatetransform Angle="15" CenterX="80" CenterY="80" />
                    </Rectangle.Rendertransform>
                </Rectangle>
                <!-- 旋转中心点 -->
                <Ellipse WIDth="4" Height="4" Fill="Red" Canvas.top="78" Canvas.left="78"  />
                <!-- 矩形中心点 -->
                <Ellipse WIDth="4" Height="4" stroke="Black" Canvas.top="38" Canvas.left="38"  />
</Canvas>
<!--旋转15度，以正方形的中心点为旋转中心 -->
<Canvas WIDth="120" Height="120"  Canvas.left="500" Canvas.top="20">
                <Rectangle WIDth="80" Height="80" stroke="Black">
                    <Rectangle.Rendertransform>
                           <Rotatetransform Angle="15" CenterX="40" CenterY="40" />
                    </Rectangle.Rendertransform>
                </Rectangle>
                <!-- 旋转中心点 -->
                <Ellipse WIDth="4" Height="4" Fill="Red" Canvas.top="38" Canvas.left="38"  />
                <!-- 矩形中心点 -->
                <Ellipse WIDth="4" Height="4" stroke="Black" Canvas.top="38" Canvas.left="38"  />
</Canvas>
       </Canvas>

<!-- // 演示倾斜 -->
            <Canvas WIDth="800" Height="100" Canvas.top="400" Canvas.left="0">
<!-- 原始图形-->
<Canvas WIDth="120" Height="120"  Canvas.left="0" Canvas.top="20">
                <Rectangle WIDth="80" Height="80" stroke="Black" />
                <Ellipse WIDth="4" Height="4" stroke="Black" Canvas.top="38" Canvas.left="38"  />
</Canvas>
<!--沿X轴方向倾斜10度（默认以左上角为原点) -->
<Canvas WIDth="120" Height="120"  Canvas.left="100" Canvas.top="20">
                <Rectangle WIDth="80" Height="80" stroke="Black">
                    <Rectangle.Rendertransform>
                           <Skewtransform AngleX="10" />
                    </Rectangle.Rendertransform>
                </Rectangle>
                <!-- 倾斜中心点 -->
                <Ellipse WIDth="4" Height="4" Fill="Red" Canvas.top="-2" Canvas.left="-2"  />
                <!-- 矩形中心点 -->
                <Ellipse WIDth="4" Height="4" stroke="Black" Canvas.top="38" Canvas.left="38"  />
</Canvas>
<!--沿Y轴方向倾斜10度（默认以左上角为原点) -->
<Canvas WIDth="120" Height="120"  Canvas.left="200" Canvas.top="20">
                <Rectangle WIDth="80" Height="80" stroke="Black">
                    <Rectangle.Rendertransform>
                           <Skewtransform AngleY="10" />
                    </Rectangle.Rendertransform>
                </Rectangle>
                <!-- 旋转中心点 -->
                <Ellipse WIDth="4" Height="4" Fill="Red" Canvas.top="-2" Canvas.left="-2"  />
                <!-- 矩形中心点 -->
                <Ellipse WIDth="4" Height="4" stroke="Black" Canvas.top="38" Canvas.left="38"  />
</Canvas>
<!--X轴、Y轴同时倾斜10度（默认以左上角为原点) -->
<Canvas WIDth="120" Height="120"  Canvas.left="300" Canvas.top="20">
                <Rectangle WIDth="80" Height="80" stroke="Black">
                    <Rectangle.Rendertransform>
                           <Skewtransform AngleX="10" AngleY="10" />
                    </Rectangle.Rendertransform>
                </Rectangle>
                <!-- 旋转中心点 -->
                <Ellipse WIDth="4" Height="4" Fill="Red" Canvas.top="-2" Canvas.left="-2"  />
                <!-- 矩形中心点 -->
                <Ellipse WIDth="4" Height="4" stroke="Black" Canvas.top="38" Canvas.left="38"  />
</Canvas>
<!--设定倾斜中心为矩形的正中心位置，沿X轴倾斜10度 -->
<Canvas WIDth="120" Height="120"  Canvas.left="400" Canvas.top="20">
                <Rectangle WIDth="80" Height="80" stroke="Black">
                    <Rectangle.Rendertransform>
                           <Skewtransform AngleX="10" CenterX="40" CenterY="40" />
                    </Rectangle.Rendertransform>
                </Rectangle>
                <!-- 旋转中心点 -->
                <Ellipse WIDth="4" Height="4" Fill="Red" Canvas.top="38" Canvas.left="38"  />
                <!-- 矩形中心点 -->
                <Ellipse WIDth="4" Height="4" stroke="Black" Canvas.top="38" Canvas.left="38"  />
</Canvas>
<!--仍将正方形的中心点作为倾斜中心点，X轴倾斜负10度 -->
<Canvas WIDth="120" Height="120"  Canvas.left="500" Canvas.top="20">
                <Rectangle WIDth="80" Height="80" stroke="Black">
                    <Rectangle.Rendertransform>
                           <Skewtransform AngleX="-10" CenterX="40" CenterY="40" />
                    </Rectangle.Rendertransform>
                </Rectangle>
                <!-- 旋转中心点 -->
                <Ellipse WIDth="4" Height="4" Fill="Red" Canvas.top="38" Canvas.left="38"  />
                <!-- 矩形中心点 -->
                <Ellipse WIDth="4" Height="4" stroke="Black" Canvas.top="38" Canvas.left="38"  />
</Canvas>
<!--X轴、Y轴同时倾斜负10度（默认以左上角为原点) -->
<Canvas WIDth="120" Height="120"  Canvas.left="600" Canvas.top="20">
                <Rectangle WIDth="80" Height="80" stroke="Black">
                    <Rectangle.Rendertransform>
                           <Skewtransform AngleX="-10" AngleY="-10" />
                    </Rectangle.Rendertransform>
                </Rectangle>
                <!-- 旋转中心点 -->
                <Ellipse WIDth="4" Height="4" Fill="Red" Canvas.top="-2" Canvas.left="-2"  />
                <!-- 矩形中心点 -->
                <Ellipse WIDth="4" Height="4" stroke="Black" Canvas.top="38" Canvas.left="38"  />
</Canvas>
       </Canvas>

            </Canvas>
        </border>

</Canvas>

总结

以上是内存溢出为你收集整理的WPF/Silverlight中图形的平移,缩放,旋转,倾斜变换演示全部内容，希望文章能够帮你解决WPF/Silverlight中图形的平移,缩放,旋转,倾斜变换演示所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。