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>
WPF/Silverlight中图形的平移,缩放,旋转,倾斜变换演示的更多相关文章
- 图片在 canvas 中的 选中/平移/缩放/旋转，包含了所有canvas的2D变化，让你认识到数学的重要性
1.介绍 canvas 已经出来好久了,相信大家多少都有接触. 如果你是前端页面开发/移动开发,那么你肯定会有做过图片上传处理,图片优化,以及图片合成,这些都是可以用 canvas 实现的. 如果你是 ...
- WPF/Silverlight中的RichTextBox总结
WPF/Silverlight中的RichTextBox总结 在WPF或者是在Silverlight中有个非常强大的可以编辑的容器控件RichTextBox,有的时间会采取该控件来作为编辑控件.鉴 ...
- WPF,SilverLight中直线的样式示例
原文:WPF,SilverLight中直线的样式示例 XAML代码:// LineStyle.xaml<Viewbox Width="600" Height="50 ...
- 【转载】Unity中矩阵的平移、旋转、缩放
By:克森 简介 在这篇文章中,我们将会学到几个概念:平移矩阵.旋转矩阵.缩放矩阵.在学这几个基本概念的同时,我们会用到 Mesh(网格).数学运算.4x4矩阵的一些简单的操作.但由于克森也是新手,文 ...
- Graphics平移缩放旋转(转载)+点睛
点睛:可以进行多次旋转和平移,也就是平移以后再平移,旋转以后再旋转,有时候一次达不到要求,如果你想一次调整完美的话很麻烦,所以最好多次,上代码 private void btnTranslate_Cl ...
- WPF XAML中 Storyboard.TargetProperty设置TransformGroup指定的变换"RenderTransform.Children
<Grid x:Name="xx" RenderTransformOrigin="0.5,0.5"> <Grid.RenderTransfor ...
- Android图片旋转,缩放,位移,倾斜,对称完整示例(一)——imageView.setImageMatrix(matrix)和Matrix
MainActivity如下: import android.os.Bundle; import android.view.MotionEvent; import android.view.View; ...
- Android图片旋转,缩放,位移,倾斜,对称完整演示样例(一)——imageView.setImageMatrix(matrix)和Matrix
MainActivity例如以下: import android.os.Bundle; import android.view.MotionEvent; import android.view.Vie ...
- WPF/Silverlight深度解决方案：(一)解锁被Storyboard束缚的关联属性
原文 WPF/Silverlight深度解决方案:(一)解锁被Storyboard束缚的关联属性 如果您在使用WPF/Silverlight进行相关动画开发中使用了Storyboard,并对关联属性进 ...
随机推荐
- IP分类地址——a，b，c 类是如何划分的
今天IP网络使用32位地址,点分十进制格式,如172.16.0.0.地址格式:IP地址=网络地址+主机地址 或 IP地址=主机地址+子网地址+主机地址. IP地址类型 当互联网最初的设计,为了便于网络 ...
- ThinkPHP3.2 常量参考
原文:ThinkPHP3.2 常量参考 预定义常量 预定义常量是指系统内置定义好的常量,不会随着环境的变化而变化,包括: URL_COMMON 普通模式 URL (0) URL_PATHINFO PA ...
- MySQL分区技术 （一）
4:MySQL 分区技术(是mysql 5.1以版本号后開始用->是甲骨文mysql技术团队维护人员以插件形式插入到mysql里面的技术) 眼下,针对海量数据的优化主要有2中方法: 1:大表拆成 ...
- Python编程中常用的12种基础知识总结
原地址:http://blog.jobbole.com/48541/ Python编程中常用的12种基础知识总结:正则表达式替换,遍历目录方法,列表按列排序.去重,字典排序,字典.列表.字符串互转,时 ...
- Iconfinder 如何杜绝盗版，哈希算法检测图像重复
原地址:http://blog.jobbole.com/65914/ 本文由 伯乐在线 - 小鱼 翻译自 Silviu Tantos.欢迎加入技术翻译小组.转载请参见文章末尾处的要求. [伯乐在线导读 ...
- FMCG行业是什么行业？
FMCG行业是什么行业?_百度知道 FMCG行业是什么行业? 2008-05-21 20:03 搏浪峰 | 分类:创业投资 | 浏览13089次 在网上看到搜狐公司招聘“FMCG行业(高级)客户 ...
- Spark SQL Catalyst源代码分析Optimizer
/** Spark SQL源代码分析系列*/ 前几篇文章介绍了Spark SQL的Catalyst的核心运行流程.SqlParser,和Analyzer 以及核心类库TreeNode,本文将具体解说S ...
- Cocos2dx 3.x创建Layer的步骤
创建 1.新建类文件.注意文件夹为Classes下.否则文件不能正常找到. 2.改动预编译头.如用VS,默觉得#pragma once,为了兼容,改为#ifndef | #define | #endi ...
- cocos2d-x游戏循环和日程安排
每场比赛有一个程序执行周期继续.这是导演对象来管理非常维修.在运动假设需要的场景精神,我们可以使用计时器在游戏圈(Scheduler)精灵和其他对象进行调度. 由于Node类封装了Scheduler类 ...
- Java 使用AES/CBC/PKCS7Padding 加解密字符串
介于java 不支持PKCS7Padding,只支持PKCS5Padding 但是PKCS7Padding 和 PKCS5Padding 没有什么区别要实现在java端用PKCS7Padding填充, ...