js实现多张图片同时放大缩小相对位置不变

项目要求需要用js实现同时放大多张图片相对位置不变，就和同事去一家国外网站的js文件中跟踪扒取了这一算法，

庆幸的是算法抠出来了并整理了出来，但遗憾的只知计算过程却弄不明白算法原理：

大体上是核心运算将图片的中心点和画布（外层div）中心点的差和放大倍数针对矩阵[1.0000000000000002,-0,-0,1.0000000000000002]

（这个矩阵是由[1,0,01]经过一系列计算得出的一个固定矩阵）做了两次运算：（如果大家懂得其中计算原理，希望能分享一下）

/// <reference path="Scripts/jquery-1.4.1.min.js" />

//参数：canvas画布的id,img图片外层div的class值）

function ZoomBig(canvasId,imgDivClass) {

Canvas.zoom(canvasId,imgDivClass,1.25);

}

function ZoomSmall(canvasId, imgDivClass) {

Canvas.zoom(canvasId,imgDivClass,0.8);

}

//--

function Canvas() {

}

//--入口函数：

Canvas.zoom = function (canvasId,imgDivClass,c) {

//初始化

//canvas

cvW = TranNum($("#" + canvasId).css("width"));

cvH = TranNum($("#"+ canvasId).css("height"));

//Canvas

_items = $("#" + canvasId).find("[class='"+imgDivClass+"']");

//计算

if (c == 1) {

return

}

var b = this.getCanvasSize();

var a = new Point(b.w / 2, b.h / 2);

var d = new Point(c, c);

$.each(_items, function (f) {

//pro

proW = TranNum($(this).css("width"));

proH = TranNum($(this).css("height"));

proT = TranNum($(this).css("top"));

proL = TranNum($(this).css("left"));

//pro中心点到pro四条边的距离left,bottom,right,top

x1 = -1 * proW / 2;

x2 = proW / 2;

y1 = -1 * proH / 2;

y2 = proH / 2;

//中心点到画布的top.left值：

translation = new Point(x2 + proL, y2 + proT);

//

setScale(d, a)//放大倍数坐标，画布中间点

$(this).css({ "left": round(x1 + translation.x, 0.001).toString() + "px", "top": round(y1 + translation.y, 0.001).toString() + "px" });

$(this).css({ "width": Math.abs((x1 * 2)).toString() + "px", "height": Math.abs((y1 * 2)).toString() + "px" });

$(this).find("img").css({ "width": Math.abs((x1 * 2)).toString() + "px", "height": Math.abs((y1 * 2)).toString() + "px" });

});

};

//--Tool

function TranNum(a) {

return parseFloat(a.replace("px", ""));

}

//

function Point(a, b) {

this.x = a;

this.y = b

}

//

Canvas.getCanvasSize = function () {

return new Dim(parseInt(cvW, 10), parseInt(cvH, 10))

};

//

function Dim(a, b) {

this.w = Math.abs(a);

this.h = Math.abs(b);

this.aspect = b / a

}

//--

setScale = function (c, a) {//,倍数, 画布中心点

beginResize();

scale(c, a); //,倍数.画布中心点

// return endResize()

};

//

beginResize = function () {

this.rectStart = clone();

this.translationStart = new Point(translation.x, translation.y);

};

//

clone = function () {

return new Rect(x1,y1,x2,y2)

};

//

function Rect(b, d, a, c) {

this.x1 = b || 0;

this.y1 = d || 0;

this.x2 = a || 0;

this.y2 = c || 0

}

//

scale = function (c, a, d, b) {

this._scale(c, a, b);

};

//

_scale = function (c, a, f) {////,倍数,画布中心点

if (f === undefined) {

f = true;

}

this.rect = clone();

x1 *= c.x;

y1 *= c.y;

x2 *= c.x;

y2 *= c.y;

if (a) {

_values=[1.0000000000000002,-0,-0,1.0000000000000002];//对[1,0,0,1]做了些计算得出的；

var b = transform(a.x -translationStart.x, a.y -translationStart.y);

var d =transform(c.x * -b.x, c.y * -b.y);

translation.x = d.x + a.x;

translation.y = d.y + a.y

} else {

translation.x = translationStart.x * c.x;

translation.y = translationStart.y * c.y

}

};

//

transform = function (b, d, a) {//两中心x差，两中心y差

if (a) {

b -= a.x;

d -= a.y;

}

var c = new Point(_values[0] * b + _values[1] * d, _values[2] * b + _values[3] * d);

if (a) {

c.x += a.x;

c.y += a.y

}

return c

};

function round(b, a) {

a = a || 1;

if (a > 1) {

return Math.round(b / a) * a

} else {

a = 1 / a;

return Math.round(b * a) / a

}

}