现在的位置: 首页 > 综合 > 正文

MatrixTransform

2013年10月09日 ⁄ 综合 ⁄ 共 7185字 ⁄ 字号 评论关闭

MatrixTransform 通过创建一个任意仿射矩阵变换,用于操作二维平面中的对象或坐标系。由于仿射变换时,平行的边依然平行,所以,我们无法对一个矩形的位图进行随意变换,比如我们无法拉伸一个角,也无法进行把它变成梯形等。如下图所示:就类似光线照射下,图形的投影。

01000000000000119081530541941

如下图,从矩形是无法转换成后一种的。

t_affine

旋转、倾斜、平移、缩放 是最常用的仿射变换,对应就是RotateTransform、SkewTransform、TranslateTransform、ScaleTransform 类。

有关这四种变化可以参看我之前写的博客:

Silverlight学习笔记--通用绘图属性
http://blog.joycode.com/ghj/archive/2009/11/30/115793.joy

Silverlight 图形的转换
http://blog.joycode.com/ghj/archive/2010/01/05/115841.joy

由于 MatrixTransform之相关矩阵运算 可以看下面我写的博客:
http://blog.joycode.com/ghj/archive/2010/01/28/115865.joy 

 

MatrixTransform主要通过点的矩阵变换来实现图形的改变,我们常看到的一些效果,如对称效果,就可以通过矩阵变换来实现。

首先,我们先来了解一下MatrixTransform的所有参数的意义,MatrixTransform的参数如下:{M11, M 12, M 21, M22, OffesetX,OffsetY}

其中:{ M11, M12, M21, M22}构成一个矩阵A,用于坐标的变换,{ OffesetX,OffsetY }构成平移向量O,用于坐标的平移。

 

据我在Google上搜索,使用 MatrixTransform 并没有提供更多的 仿射变换 功能,我们使用 MatrixTransform 来创建 自定义变换也就是旋转、倾斜、平移、缩放这几种的组合。

 

下面是一个演示,我们可以手工修改 M11, M 12, M 21, M22, OffesetX,OffsetY ,继而可以看到矩形的变化效果,在输入框上滚动鼠标中轮也可以增加或者减少数字。

 

演示程序的代码:

Xaml 文件

UserControl x:Class="SilverlightApp_MatrixTransform.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="200" d:DesignWidth="400" >

    Grid x:Name="LayoutRoot" Background="White">
        Grid.ColumnDefinitions>
            ColumnDefinition Width="200"/>
            ColumnDefinition Width="50"/>
            ColumnDefinition Width="50"/>
            ColumnDefinition Width="50"/>
            ColumnDefinition Width="50"/>
        Grid.ColumnDefinitions>
        Grid.RowDefinitions>
            RowDefinition Height="0.33*"/>
            RowDefinition Height="0.34*"/>
            RowDefinition Height="0.33*"/>
        Grid.RowDefinitions>
        Rectangle Fill="#FF186ED0" Stroke="Black" Grid.Column="0" Grid.Row="0" Grid.RowSpan="3" x:Name="rectangle" 
                   Width="100" Height="100" VerticalAlignment="Center" HorizontalAlignment="Center">
            Rectangle.RenderTransform>
                MatrixTransform x:Name="rectangleMatrix">
                MatrixTransform>
            Rectangle.RenderTransform>
        Rectangle>
        TextBlock Grid.Column="1" Grid.Row="0"  Text="M11:" VerticalAlignment="Center" HorizontalAlignment="Center"/>
        TextBox x:Name="tb_M11"  Text="1.0" VerticalAlignment="Center" TextAlignment="Center" 
                 Grid.Row="0" Grid.Column="2" d:LayoutOverrides="Width" />
        TextBlock Grid.Column="3" Grid.Row="0"  Text="M12:" VerticalAlignment="Center" HorizontalAlignment="Center"/>
        TextBox x:Name="tb_M12"  Text="0.0" VerticalAlignment="Center" TextAlignment="Center"
                 Grid.Row="0" Grid.Column="4" d:LayoutOverrides="Width" />

        TextBlock Grid.Column="1" Grid.Row="1"  Text="M21:" VerticalAlignment="Center" HorizontalAlignment="Center"/>
        TextBox x:Name="tb_M21"  Text="0.0" VerticalAlignment="Center" TextAlignment="Center" 
                 Grid.Row="1" Grid.Column="2" d:LayoutOverrides="Width" />
        TextBlock Grid.Column="3" Grid.Row="1"  Text="M22:" VerticalAlignment="Center" HorizontalAlignment="Center"/>
        TextBox x:Name="tb_M22"  Text="1.0" VerticalAlignment="Center" TextAlignment="Center" 
                 Grid.Row="1" Grid.Column="4" d:LayoutOverrides="Width" />

        TextBlock Grid.Column="1" Grid.Row="2"  Text="offsetX:" VerticalAlignment="Center" HorizontalAlignment="Center"/>
        TextBox x:Name="tb_offsetX"  Text="0.0" VerticalAlignment="Center" TextAlignment="Center" 
                 Grid.Row="2" Grid.Column="2" d:LayoutOverrides="Width" />
        TextBlock Grid.Column="3" Grid.Row="2"  Text="offsetY:" VerticalAlignment="Center" HorizontalAlignment="Center"/>
        TextBox x:Name="tb_offsetY"  Text="0.0" VerticalAlignment="Center" TextAlignment="Center" 
                 Grid.Row="2" Grid.Column="4" d:LayoutOverrides="Width" />

    Grid>
UserControl>

C# 文件

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace SilverlightApp_MatrixTransform
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
            this.Loaded += new RoutedEventHandler(MainPage_Loaded);
        }

        Matrix m = new Matrix();

        void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            this.tb_M11.MouseWheel += new MouseWheelEventHandler(TextBox_MouseWheel);
            this.tb_M11.GotFocus += new RoutedEventHandler(TextBox_GotFocus);
            this.tb_M11.TextChanged += new TextChangedEventHandler(TextBox_TextChanged);
            this.tb_M12.MouseWheel += new MouseWheelEventHandler(TextBox_MouseWheel);
            this.tb_M12.GotFocus += new RoutedEventHandler(TextBox_GotFocus);
            this.tb_M12.TextChanged += new TextChangedEventHandler(TextBox_TextChanged);
            this.tb_M21.MouseWheel += new MouseWheelEventHandler(TextBox_MouseWheel);
            this.tb_M21.GotFocus += new RoutedEventHandler(TextBox_GotFocus);
            this.tb_M21.TextChanged += new TextChangedEventHandler(TextBox_TextChanged);
            this.tb_M22.MouseWheel += new MouseWheelEventHandler(TextBox_MouseWheel);
            this.tb_M22.GotFocus += new RoutedEventHandler(TextBox_GotFocus);
            this.tb_M22.TextChanged += new TextChangedEventHandler(TextBox_TextChanged);
            this.tb_offsetX.MouseWheel += new MouseWheelEventHandler(TextBox_MouseWheel);
            this.tb_offsetX.GotFocus += new RoutedEventHandler(TextBox_GotFocus);
            this.tb_offsetX.TextChanged += new TextChangedEventHandler(TextBox_TextChanged);
            this.tb_offsetY.MouseWheel += new MouseWheelEventHandler(TextBox_MouseWheel);
            this.tb_offsetY.GotFocus += new RoutedEventHandler(TextBox_GotFocus);
            this.tb_offsetY.TextChanged += new TextChangedEventHandler(TextBox_TextChanged);
        }

        private void TextBox_MouseWheel(object sender, MouseWheelEventArgs e)
        {
            TextBox tb = sender as TextBox;
            if (tb == null) return;
            double w = 1.0;
            if (double.TryParse(tb.Text, out w))
                w = w + (double)e.Delta / 100;
            else
                w = 1.0;
            if (tb != null)
                tb.Text = w.ToString();
        }

        private void TextBox_GotFocus(object sender, RoutedEventArgs e)
        {
            TextBox box = sender as TextBox;
            box.Select(0, box.Text.Length);
        }

        private void TextBox_TextChanged(object sender, TextChangedEventArgs e)
        {
            TextBox tb = sender as TextBox;
            if (tb == null) return;

            double w = 1.0;
            if (!double.TryParse(tb.Text, out w)) w = 1.0;

            switch (tb.Name)
            {
                case "tb_M11":
                    m.M11 = w;
                    break;
                case "tb_M12":
                    m.M12 = w;
                    break;
                case "tb_M21":
                    m.M21 = w;
                    break;
                case "tb_M22":
                    m.M22 = w;
                    break;
                case "tb_offsetX":
                    m.OffsetX = w;
                    break;
                case "tb_offsetY":
                    m.OffsetY = w;
                    break;
                default:
                    break;
            }
            rectangleMatrix.Matrix = m;
        }
    }
}

参考资料:

WPF中的MatrixTransform

http://www.cnblogs.com/zhouyinhui/archive/2007/07/07/809553.html

稳扎稳打Silverlight(10) - 2.0其它之Transform详解,以及UIElement和FrameworkElement的常用属性

http://www.cnblogs.com/webabcd/archive/2008/11/03/1325150.html

MatrixTransform 类

http://msdn.microsoft.com/zh-cn/library/system.windows.media.matrixtransform.aspx

Basic Understanding of Matrix Transformation

http://blogs.msdn.com/joseph_fultz/archive/2009/07/31/basic-understanding-of-matrix-transformation.aspx

Silverlight Terrain Tutorial Part 2 – Using Transform Matrices to Create 3D Looking Terrain.

http://blogs.silverlight.net/blogs/msnow/archive/2008/08/18/terrain-tutorial-part-2-using-transform-matrices-to-create-3d-looking-terrain.aspx

MatrixTransform

http://blogs.msdn.com/jstegman/archive/2006/04/02/566939.aspx

WPF中MatrixTransform的理解与应用

http://blog.csdn.net/artlife/archive/2007/01/08/1477360.aspx

二维几何图形变换及其GDI+实现

http://www.cnblogs.com/begincsdn/archive/2005/07/14/193005.html

Silverlight Transforms

http://msdn.microsoft.com/en-us/library/cc189037(VS.95).aspx

Understanding the Transformation Matrix in Flash 8

http://www.senocular.com/flash/tutorials/transformmatrix/

Transformation Matrix in Silverlight 2

http://joel.neubeck.net/2008/09/transformation-matrix-in-silverlight-2/

AS3位图任意形变一步一步来(2)——计算变换矩阵

http://fdream.net/blog/article/632.aspx

抱歉!评论已关闭.