备案控制台
开发者社区 开发与运维 文章 正文

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

2015-04-21 780
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 原文: WPF/Silverlight中图形的平移,缩放,旋转,倾斜变换演示 为方便描述, 这里仅以正方形来做演示, 其他图形从略。 运行时效果图：XAML代码：// Transform.
原文: WPF/Silverlight中图形的平移,缩放,旋转,倾斜变换演示

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

运行时效果图：
WPF UIElement Transform

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>

文章标签：
前端开发
C#
关键词：
wpf变换
wpf图形
silverlight变换
wpf silverlight
wpf旋转
杰克.陈
目录
相关文章
Rick_1/2
|
9月前
|
C# Windows
WPF技术之图形系列Polygon控件
WPF Polygon是Windows Presentation Foundation (WPF)框架中的一个标记元素，用于绘制多边形形状。它可以通过设置多个点的坐标来定义多边形的形状，可以绘制任意复杂度的多边形。
Rick_1/2
489 0
杰克.陈
|
C# 前端开发
WPF - 图形设计器（Diagram Designer）
原文:WPF - 图形设计器（Diagram Designer）   OpenExpressApp计划中包括建模工具，计划是采用MetaEdit+模型来作为元模型，使用codeproject的《WPF Diagram Designer》一系列文章来做为设计器实现参考，本篇介绍一下codeprojcet的这四个文章，推荐给对图形设计器感兴趣的人去看看，通过WPF的模板功能和其他功能可以很方便的设计出图形编辑器。
杰克.陈
3399 0
李杰-@yd
|
1天前
|
C#
WPF —— 动画缩放变换
`ScaleTransform`用于二维x-y坐标系中对象的缩放，可沿X或Y轴调整。在故事板中，通过RenderTransform.ScaleX和ScaleY属性控制缩放。示例代码展示了如何设置按钮的RenderTransformOrigin、Background等属性，并通过LayoutTransform应用ScaleTransform。当鼠标进入按钮时，EventTrigger启动DoubleAnimation实现X和Y轴的缩放动画。最后，展示了如何将动画集成到自定义按钮样式中。
李杰-@yd
18 0
Rick_1/2
|
9月前
|
C# 开发者 Windows
WPF技术之图形系列Path控件
WPF Path是Windows Presentation Foundation (WPF)框架中的一个标记元素，用于绘制复杂的几何路径形状。它可以通过设置一系列的路径命令以及相应的参数来定义形状，可以绘制任意复杂度的路径。
Rick_1/2
635 0
Rick_1/2
|
9月前
|
C# Windows
WPF技术之图形系列Line控件
WPF Line是Windows Presentation Foundation (WPF)中的一个图形控件，用于在界面上绘制线条。它可以用来表示直线、分割线、边框等，提供了一种简单但有力的方式来显示和布局线条。
Rick_1/2
931 0
Rick_1/2
|
9月前
|
前端开发 C# Windows
WPF技术之图形系列Rectangle控件
WPF Rectangle是Windows Presentation Foundation (WPF)中的一个图形控件，用于在界面上绘制矩形。它是一个非常常见的UI元素，可用于显示、布局和交互。
Rick_1/2
683 0
Rick_1/2
|
9月前
|
数据可视化 前端开发 C#
WPF技术之图形系列Ellipse控件
WPF Ellipse是Windows Presentation Foundation (WPF)中的一个图形控件，它用于绘制椭圆形状。在WPF中，Ellipse可以用于创建具有椭圆形状的可视化效果，可以设置其位置、大小、填充颜色等属性。
Rick_1/2
840 0
杰克.陈
|
前端开发 C#
WPF多点触摸放大缩小旋转
原文:WPF多点触摸放大缩小旋转 版权声明：本文为博主原创文章，需要转载尽管转载。 https://blog.csdn.net/z5976749/article/details/40118437 如果要方法缩小一个canvas，或图片： 只要在控件中添加    就可以拉伸改控件。
杰克.陈
1570 0
杰克.陈
|
C# 算法
WPF 3D 平移模型+动画（桥梁检测系统）
原文:WPF 3D 平移模型+动画（桥梁检测系统） 关于WPF 3D，网上有很多旋转的例子，但是关于平移的例子并不是太多。
杰克.陈
1406 0
杰克.陈
|
C# 索引
好玩的WPF第四弹：用Viewport2DVisual3D实现3D旋转效果
原文:好玩的WPF第四弹：用Viewport2DVisual3D实现3D旋转效果 版权声明：转载请联系本人，感谢配合！本站地址：http://blog.csdn.net/nomasp https://blog.csdn.net/NoMasp/article/details/46567895 效果呢就是这么个效果，但是大家要发挥想象力，比如做成一个可以旋转的按钮等等。
杰克.陈
898 0