有时候我们需要对一些图片元素添加transform：Matrix()，用于图片的缩放、旋转、位移等，但是有时候我们也会替换掉其中的图片，但是如果前后图片大小及长宽比不一致的话，就会导致元素位置的偏移，具体原因请看：http://web.zhaicool.net/471.html
针对这个问题，我写了一个方法用于处理
function getNewMatrixPoint(w2,h2,x2,y2,sx,sy,w3,h3){
/**参数说明：
w1：原控件最初宽度（计算得出）；
h1：原控件最初高度（计算得出）；
w2：原控件经matrix缩放后的宽度（已知）；
h2：原控件经matrix缩放后的高度（已知）；
x1：原控件最初的X坐标（需计算）；
y1：原控件最初的Y坐标（需计算）；
x2：原控件经matrix平移后的X坐标（已知）；
y2：原控件经matrix平移后的Y坐标（已知）；
sx：x轴缩放比例（已知）；
sy：y轴缩放比例（已知）；
w3：替换后的图片初始宽度（已知）；
h3：替换后图片初始高度（已知）；
w4：替换后图片放入DIV中之后的自适应宽度（已知，即为w1）；
h4：替换后图片放入DIV中之后的自适应高度（需根据图片初始化比例计算）；
w5：替换后图片经matrix缩放后的宽度（需计算）；
h5：替换后图片经matrix缩放后的高度（需计算）；
x3：替换后图片matrix平移后的X坐标（需计算，最终输出结果）；
y3：替换后图片matrix平移后的Y坐标（需计算，最终输出结果）；
依据公式：x2=x1-(w1-w2)/2;y2=y1-(h1-h2)/2;
*/
var w1, h1, w2, h2, x1, y1, x2, y2, sx, sy, w3, h3, w4, h4, w5, h5, x3, y3;
w2=w2;
h2=h2;
x2=x2;
y2=y2;
sx=sx;
sy=sy;
w3=w3;
h3=h3;
//根据老控件缩放后的尺寸及比例得出缩放前的尺寸
w1=w2/sx;
h1=h2/sy;
//根据缩放后的起始坐标得出缩放前的起始坐标
x1=x2+(w1-w2)/2;
y1=y2+(h1-h2)/2;
//根据老控件的尺寸及起始坐标值求老控件缩放前的中心坐标，此步目的是给控件缩放后进行定位，因为控件的缩放是以中心为参考的
var oldCtrlCenterX=w1/2+x1;
var oldCtrlCenterY=h1/2+y1;
//根据圆心坐标求出老控件缩放后的起始坐标，此坐标也是新替换控件缩放后的起始坐标
var ctrlStartX=oldCtrlCenterX-w2/2;
var ctrlStartY=oldCtrlCenterY-h2/2;
//求出新替换的图片尺寸
var PictureAspectRatio=w3/h3;//图片宽高比
w4=w1;
h4=w4/PictureAspectRatio;
//缩放后的图片尺寸
w5=w4*sx;
h5=w5/PictureAspectRatio;
//根据新替换控件缩放后的尺寸以及起始坐标值求出替换后控件的中心坐标
var newCtrlCenterX=ctrlStartX+w5/2;
var newCtrlCenterY=ctrlStartY+h5/2;
//根据中心求出新替换控件缩放前的起始坐标
x3=newCtrlCenterX-w4/2;
y3=newCtrlCenterY-h4/2;
//根据新替换控件缩放前的起始坐标得出缩放后的起始坐标
x4=x3-(w4-w5)/2;
y4=y3-(h4-h5)/2;
return{
x:x4,
y:y4,
sy:sx
}
}
将得到的x、y、及sy写入到style中即可。
因为我这边是跟数据库交互，这些值是写入到json里的，所以大家在用的时候最好不要照搬。需要做改动。
未经允许不得转载：前端撸码笔记 » 带有transform：Matrix()的元素替换