前言
上一篇文章，我们讲解了图像金字塔，这篇文章我们来了解仿射变换。
仿射？！
任何仿射变换都可以转换成，乘以一个矩阵（线性变化），再加上一个向量（平移变化）。
实际上仿射是两幅图片的变换关系。
例如我们可以通过仿射变换对图片进行：缩放、旋转、平移等操作。
一个数学问题
在解决仿射问题前，我们来做一个数学题。
如图，对于点(x1, y1)，相对于原点旋转一个角度a，那么这个点到哪里了呢？
我们将坐标系变成极坐标系，则点(x1, y1)就变成了(r, β)，而旋转后变成(r, α + β)。
转回直角坐标系，则旋转后的点变成了(cos(α + β) * r, sin(α + β) * r)。
然后利用公式：
cos（α+β）=cosαcosβ-sinαsinβ
sin（α+β）=sinαcosβ+cosαsinβ
以及原来点为(cosβ * r, sinβ * r)，于是很容易得出新的点为(x1 * cosα - y1 * sinα, x1 * sinaα + y1 * cosα)。
我们可以从中推导出旋转变换公式：
那么平移就相对简单很多了，就相当于加上一个向量(c, d)就行了。
获得变换矩阵函数实现
通常我们使用矩阵来表示仿射变换。
其中A是旋转缩放变换，B是平移变换。则结果T满足：
或者
即：
var sin = Math.sin(__angle) || 0,
cos = Math.cos(__angle) || 1,
x = __x || 0,
y = __y || 0;
return [cos, -sin, -x,
sin, cos, -y
];
};
这样我们就得到了一个仿射变换矩阵。
当然这个实现本身是有一定问题的，因为这个原点被固定在左上角了。
仿射变换实现
(__src && __rotArray) || error(arguments.callee, IS_UNDEFINED_OR_NULL/* {line} */);
if(__src.type && __src.type === "CV_RGBA"){
var height = __src.row,
width = __src.col,
dst = __dst || new Mat(height, width, CV_RGBA),
sData = new Uint32Array(__src.buffer),
dData = new Uint32Array(dst.buffer);
var i, j, xs, ys, x, y, nowPix;
for(j = 0, nowPix = 0; j < height; j++){
xs = __rotArray[1] * j + __rotArray[2];
ys = __rotArray[4] * j + __rotArray[5];
for(i = 0; i < width; i++, nowPix++, xs += __rotArray[0], ys += __rotArray[3]){
if(xs > 0 && ys > 0 && xs < width && ys < height){
y = ys | 0;
x = xs | 0;
dData[nowPix] = sData[y * width + x];
}else{
dData[nowPix] = 4278190080; //Black
}
}
}
}else{
error(arguments.callee, UNSPPORT_DATA_TYPE/* {line} */);
}
return dst;
};
这个函数先把矩阵数据变成32位形式，操作每个元素就等同于操作每一个像素。
然后遍历所有元素，对对应的点进行赋值。
效果
系列目录
Javascript图像处理系列
参考资料
Affine Transformations
本文链接
先介绍一下矢量图的概念：
矢量图使用直线和曲线来描述图形，这些图形的元素是一些点、线、矩形、多边形、圆和弧线等等，它们都是通过数学公式计算获得的。例如一幅花的矢量图形实际上是由线段形成外框轮廓，由外框的颜色以及外框所封闭的颜色决定花显示出的颜色。
SVG,VML, HTML5 Canvas 这三个技术绘制的都是矢量图。 只是由不同的厂商开发出来的。 要达成的效果基本是一样的。
1. VML
全称Vector Markup Language(矢量可标记语言)。 是微软1999年9月附带IE5.0发布的。
浏览器支持：
Internet Explorer 5++ -- Internet Explorer 8IE9 以后就支持SVG了。
2. SVG
全称Scalable Vector Graphics(可缩放矢量图形)， 是基于xml,用于描述二维矢量图形的一种图形格式。
在 2003 年一月，SVG 1.1 被确立为 W3C 标准。 参与定义 SVG 的组织有：太阳微系统、Adobe、苹果公司、IBM 以及柯达。
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持内联 SVG。
3. HTML5 Canvas
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域，您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
浏览器支持最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。
总结
所以在要在 browser 显示图形， 对于不同的浏览器使用的技术不同。
使用VML绘制图形， 速度是比较慢的。 基本上50个节点加上一些关联页面就会比较钝了。
VML会逐渐的退出。 但是目前IE8 及以下版本的IE浏览器的使用量还是很高。所以必须要兼顾。
HTML5 的标准尚未完全制定， 前途如何尚不可知。浏览器的支持方面也有一些问题。
目前来看，SVG看上去是主流。
不过针对图形绘制方面， 已有很多js library 可以使用， 这些 library已经处理了各浏览器的兼容问题。解决办法就是对于不同的浏览器及版本使用不同的技术绘制。只是对于我们之间使用这些library 来说， 就不再需要关注浏览器兼容的问题了。
比较好的library 有：
raphael , google web toolkit, yui
Less （一种动态样式语言）。
LESS是一种由Alexis Sellier设计的动态层叠样式表语言，受Sass所影响，同时也影响了Sass的新语法：SCSS。 LESS是开源的，其第一个版本由Ruby写成，但在后续的版本当中，Ruby逐渐被替换为JavaScript。受益于JavaScript，LESS可以在客户端上运行（IE6+、Webkit、Firefox），也可以在服务端运行（Node.js、Rhino）。 在语法方面，LESS与CSS较为接近，一个合法的CSS代码段本身也是一段合法的LESS代码段。LESS提供变量、嵌套、混合、操作符、函数等一般编程所需的抽象机制。
例子：
Windows操作系统需要安装下面的这个工具：
WinLess工具 http://winless.org/
注意：第一次运行，需要添加你的less文件所在的文件夹，后缀名必须全部是小写字母.less。
【在编写less的时候一定要先运行这个软件，保存文件的时候才会自动编译.css文件。】
运行WinLess之后，你就可以在任何编辑器中打开less文件进行编辑，只要保存文件，它就会自动生成对应的一个.css文件（并压缩，包括去掉注释）。
相关网站【推荐阅读】：
LESS官方网站 http://lesscss.org/
LESS中国官网 http://www.lesscss.net/ 【详细使用介绍】
LESS源码(Git) https://github.com/cloudhead/less.js
LESS教程(W3CPlus) http://www.w3cplus.com/css/less
CSS3.LESS(HoneyLess) https://github.com/xiaoqiang/Honey-less
Dreamweaver中Less自动完成 http://istyles.blog.163.com/blog/static/1811003892012630570145/
LESS介绍及其与Sass的差异 http://www.qianduan.net/an-introduction-to-less-and-comparison-to-sass.html
Css预处理器实践之Sass、Less大比拼 http://cued.xunlei.com/log044
Sublime Text 2的Less2Css插件介绍与安装 http://www.qianduan.net/sublime-text-2-less2css-plugin-introduction.html
本文链接