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

原文: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>

时间： 2024-08-03 16:41:34

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

交互式QGraphicsView（平移/缩放/旋转）

简述 Graphics View提供了一个平台用于大量自定义 2D 图元的管理与交互框架包括一个事件传播架构支持场景 Scene 中的图元 Item 进行精确的双精度交互功能.Item 可以处理键盘事件.鼠标按下.移动.释放和双击事件同时也能跟踪鼠标移动. 和 Google 地图一样在管理大量 Item 的时候通常需要 View 具有交互平移/缩放/旋转功能. 简述 交互式 QGraphicsView 效果 源码 交互式 QGraphicsView 便于以后复用实现一个交互式 QGraphics

[C#] Graphics平移缩放旋转

[平移] private void btnTranslate_Click(object sender, EventArgs e) { Graphics graphics = this.CreateGraphics(); // 红色笔 Pen pen = new Pen(Color.Red, 5); Rectangle rect = new Rectangle(0, 0, 200, 50); // 用红色笔画矩形 graphics.DrawRectangle(pen, rect); // 向左平移

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

MainActivity如下: import android.os.Bundle; import android.view.MotionEvent; import android.view.View; import android.view.View.OnTouchListener; import android.widget.ImageView; import android.app.Activity; import android.graphics.Matrix; /** * Demo描述:

MDX之平移与旋转（1）

做项目一年,虽然说没有学得很好,但一年来,自己学的东西也比较多,也有了一些经验,正如我前面说的现在没有事做就多写,等过两天就不会有这么多的时间了,项目一开始,那可就没有多少时间了. 我做的那个项目是地质相关的项目,就会有一些必不可少的图形的显示,二维方面老师自己做的非常好了,但在3D方面大家都没有什么经验,就只有靠自己去摸索了,在自己摸索的过程中,最头疼的就是没有资料,在就是问别人没有一个人回答你,问了别人还被说成叫自己去按书一步一步敲例子,把人都气死,好了,我现在就将我在学习的时候遇到的两个困

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

原文 WPF/Silverlight深度解决方案:(一)解锁被Storyboard束缚的关联属性 如果您在使用WPF/Silverlight进行相关动画开发中使用了Storyboard,并对关联属性进行了动画修改,那么您是否有注意到这些关联属性常常无法再通过直接赋值的形式去修改,尽管它的值已经被更改,但却始终无法在界面上得以体现.例如,在我的C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial)教程里大量运用了Storyboard对角色的X,Y坐标关联属性以及角色

html5用transform来实现位移,缩放,旋转实例

前面我讲过在canvas中实现图形的变换,这是比较简单的,因为都是用的直观的函数.今天我还是要实现同样的图形变化效果,但不同的是我要用一个看起来就让人心碎的方法,就是transform,也就是矩阵matrix. 其实我对Matrix的认识只限于他是一部很好看的电影(即黑客帝国),在没看此电影前,我根本不知道有矩阵这个名字,而且矩阵这名字又不霸气,我听了除了不明白为什么要叫这么个怪名字之外没什么感觉;看了电影,然后又知道矩阵是个数学上的东西后,我就知道要糟,作为一个数学白痴的我希望永远不要和矩阵打

C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial)：(四十二)

C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial):(四十二)制作精美的Mini地图② 前面章节中讲解的包括对象头像面板.Mini雷达地图等窗体都是位置固定的,在处理起来方式多样且简单:而RPG.SLG.休闲养成等类型的游戏中往往会大量使用到悬浮且可自由拖动的窗体,比如包裹面板.武器装备面板.个人属性面板.技能面板.系统设置面板等等,这就要求我们必须为游戏量身定做一个通用且易用的ChildWindow控件.那么本节我将为大家讲解如何制作一个包含可拖动头部.关闭

C#开发WPF/Silverlight动画及游戏系列教程(Game Course)：(十)

C#开发WPF/Silverlight动画及游戏系列教程(Game Course):(十)斜度α地图的构造及算法 在当前的网络游戏中,地图基本都是采取一定斜度的拼装地图,这其中存在两种斜度地图的构造方式: 第一种我称之为伪斜度地图:该类型地图表现层图片为斜度的,但地图基底障碍物等的构造则实为正方形,如下图: 其实最典型的例子就是上一节所演示的内容了,地图是斜的,但是我们却用垂直的障碍物对其进行基底布局,这就是典型的伪斜度地图了. 这样的地图优点在于可以使用简单直接的地图构造算法(上一节中有详细的

C#开发WPF/Silverlight动画及游戏系列教程(Game Course)：(三十一)

C#开发WPF/Silverlight动画及游戏系列教程(Game Course):(三十一) 超酷万变的矢量魔法 还记得当年的经典网游奇迹(MU)吗?辉煌就如同其名字一般深刻烙印在我的脑海.与朋友们一起通宵奋战的日子已成过去,残留世上那一张张经典不朽的截图让我时刻感受回味.它的成功不仅仅因为其拥有一个极棒的世界观,更深层的却是那些超酷且绚丽的魔法效果,曾经打动着无数年轻的心. 本节我将以奇迹中So cool的"激光"魔法为蓝本,向大家展示如何制作矢量魔法: 不知道这张图是否能打捞起大