原文:WPF/Silverlight中图形的平移,缩放,旋转,倾斜变换演示

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

运行时效果图：


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,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中图形的平移,缩放,旋转,倾斜变换演示的更多相关文章

  1. 图片在 canvas 中的 选中/平移/缩放/旋转，包含了所有canvas的2D变化，让你认识到数学的重要性

    1.介绍 canvas 已经出来好久了,相信大家多少都有接触. 如果你是前端页面开发/移动开发,那么你肯定会有做过图片上传处理,图片优化,以及图片合成,这些都是可以用 canvas 实现的. 如果你是 ...

  2. WPF/Silverlight中的RichTextBox总结

    WPF/Silverlight中的RichTextBox总结   在WPF或者是在Silverlight中有个非常强大的可以编辑的容器控件RichTextBox,有的时间会采取该控件来作为编辑控件.鉴 ...

  3. WPF,SilverLight中直线的样式示例

    原文:WPF,SilverLight中直线的样式示例 XAML代码:// LineStyle.xaml<Viewbox Width="600" Height="50 ...

  4. 【转载】Unity中矩阵的平移、旋转、缩放

    By:克森 简介 在这篇文章中,我们将会学到几个概念:平移矩阵.旋转矩阵.缩放矩阵.在学这几个基本概念的同时,我们会用到 Mesh(网格).数学运算.4x4矩阵的一些简单的操作.但由于克森也是新手,文 ...

  5. Graphics平移缩放旋转(转载)+点睛

    点睛:可以进行多次旋转和平移,也就是平移以后再平移,旋转以后再旋转,有时候一次达不到要求,如果你想一次调整完美的话很麻烦,所以最好多次,上代码 private void btnTranslate_Cl ...

  6. WPF XAML中 Storyboard.TargetProperty设置TransformGroup指定的变换"RenderTransform.Children

    <Grid x:Name="xx" RenderTransformOrigin="0.5,0.5"> <Grid.RenderTransfor ...

  7. Android图片旋转,缩放,位移,倾斜,对称完整示例(一)——imageView.setImageMatrix(matrix)和Matrix

    MainActivity如下: import android.os.Bundle; import android.view.MotionEvent; import android.view.View; ...

  8. Android图片旋转,缩放,位移,倾斜,对称完整演示样例(一)——imageView.setImageMatrix(matrix)和Matrix

    MainActivity例如以下: import android.os.Bundle; import android.view.MotionEvent; import android.view.Vie ...

  9. WPF/Silverlight深度解决方案：(一)解锁被Storyboard束缚的关联属性

    原文 WPF/Silverlight深度解决方案:(一)解锁被Storyboard束缚的关联属性 如果您在使用WPF/Silverlight进行相关动画开发中使用了Storyboard,并对关联属性进 ...

随机推荐

  1. 表空间的状态(二) - read/write

    表空间状态-READ ONLY.READ WRITE 1. 仅仅读表空间的主要用途就是为了消除对数据库大部分静态数据的备份和恢复的须要.Oracle不会更新仅仅读表空间爱你的文件.因此这部分文件能够存 ...

  2. Apache+windows server2008 外网访问配置

    之前在一个服务器上部署一个apache网站,在局域网内都可以访问,但是外网始终访问不了,经常多次谷歌,把解决方案总结出来. 下面就默认部署apache自带的网站.系统:windows server20 ...

  3. WM_CLOSE、WM_DESTROY、WM_QUIT学习总结（点击关闭按钮会触发WM_CLOSE消息，DestroyWindow API会触发WM_DESTROY和WM_NCDESTROY消息，MSDN上写的很清楚）

    WM_CLOSE:关闭应用程序窗口 WM_DESTROY:关闭应用程序 WM_QUIT:关闭消息循环 只有关闭了消息循环,应用程序的进程才真正退出(在任务管理器里消失). win32应用程序的完整退出 ...

  4. C++primer原书中的一个错误（派生类using声明对基类权限的影响）

    在C++primer 第4版的 15章 15.2.5中有以下这样一段提示: "注解:派生类能够恢复继承成员的訪问级别,但不能使訪问级别比基类中原来指定的更严格或者更宽松." 在vs ...

  5. [Cocos2d-x]创建项目

    从cocos2d-x 2.1.4之后,就不提供工程项目模板的安装文件了,我们只能手工修改以前的安装文件,让它连接最新的工程,但是这样很麻烦. 我们可以使用python命令创建cocos2d-x项目 步 ...

  6. 我经历的IT公司面试及离职感受（转）

    毕业后几年一直待在广州,觉得这是一个比较生活化及务实的城市,其互联网公司和相应的投融资环境都不如北深上活跃,大大小小的面试也有几十个,有点规模的公司应该都面试过了,面试一般会见到主力技术人员,技术主管 ...

  7. Java引用类型具体解释

    JVM  的垃圾回收器对于不同类型的引用有不同的处理方式.java中对于一个对象来说,仅仅要有引用的存在,它就会一直存在于内存中.假设这种对象越来越多,超出了JVM中的内存总数,JVM就会抛出OutO ...

  8. Android数据库高手秘籍(一)——SQLite命令

    转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/38461239 要想熟练地操作不论什么一个数据库.最最主要的要求就是要懂SQL语言, ...

  9. codechef Sums in a Triangle题解

    Let's consider a triangle of numbers in which a number appears in the first line, two numbers appear ...

  10. zabbix监控nginx连接状态(转)

    zabbix监控nginx zabbix可以监控nginx的状态,关于一个服务的状态可以查看服务本身的状态(版本号.是否开启),还应该关注服务能力(例如以nginx的负载效果:连接数.请求数和句柄数) ...