拖动图片不变形_html5拖动旋转代码

上一章有讲到初高中知识点的三角函数、向量点积与叉积，这节来讲讲如何使用高等数学矩阵来处理图片的拖动、旋转与缩放

先说说 CSS 函数 matrix() 指定了一个由指定的 6 个值组成的 2D 变换矩阵。这种矩阵的常量值是隐含的，而不是由参数传递的；其他的参数是以列优先的顺序描述的。

matrix(a, b, c, d, tx, ty) 是 matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1) 的简写。

结合上一节知识点，再复习一遍：

“角度和弧度转换公式：

弧度 = 角度 * PI / 180 或 2 * PI / 360
角度 = 弧度 * 180 / PI”

参数解意：a表示横向缩放参数，b表示纵向斜拉，c表示横向斜拉，d表示纵向缩放参数，tx表示横向位移参数，ty表示纵向位移参数。

矩阵旋转计算公式matrix(cosθ,sinθ,-sinθ,cosθ,0,0)，计算角度时根据Math对象方法角度转换弧度算出原始值。

b和c也指错切，在canvas中没有斜切错切的概念。不过可以手动计算去实现：

function skew([x, y], sx = 0, sy = 0) {
  // 由于 Math.tan() 函数接受弧度数值，但是通常使用度更方便，下面的函数可以接受以度为单位的数值，将其转为弧度，然后返回其正切值。
  // 此处求得倾斜量
  const rad = r => r * Math.PI / 180
  return [x + Math.tan(rad(sx)) * y, y + Math.tan(rad(sy)) * x]
}

用css各种属性实现一个旋转缩放效果：

// HTML
<div class="content b1"></div>
<div class="content b2"></div>
<div class="content b3"></div>
<div class="content"></div>
// CSS
.content{ background: #999; width: 100px; height: 100px; margin: 20px auto;}
 
/* 理解旋转是如何使用前四个参数的 */
.b1{transform: rotate(30deg);}
 
/* 矩阵具体写法 0.86603 => Math.cos(30/(180/Math.PI))得出 */
.b2{ transform: matrix(0.86603,0.5,-0.5,0.86603,1,1);}
 
/* 用斜切和变形来模拟,同时这里的参数是对应矩阵里的参数 ，斜切中的30deg的意思是,矩阵中的 sin30*  和 -sin30* 这两个斜切参数*/
.b3{ transform:skew(-30deg,30deg) scale(0.86603,0.86603);}

那么我们如何用矩阵来实现位移旋转缩放呢？

线性代数在前端中的实际应用中，通常缩放操作可以用缩放矩阵，旋转元素有旋转矩阵。一般业务中我们只关心平面2D上的旋转，所以只需要求旋转矩阵即可。

补充知识点：

在任意方阵中都存在一个标量，称作该方阵的行列式。 在线性代数中，行列式有很多有用的性质，它的几何解释也很有趣。方针 M 的行列式记作

或 “det M”。非方阵矩阵的行列式是未定义的。n*n 阶矩阵的行列式定义非常复杂，可以先从 2×2、3×3 矩阵开始。 2×2 阶矩阵行列式定义如下：

在书写行列式时两边可以用竖线将数字块围起来，省略方括号。上述列式可以理解为主对角线与反对角线元素各自相乘，然后用主对角线元素的积减去反对角线元素的积。

3×3 阶矩阵行列式定义如下：

可以用类似的示意图来帮助记忆。把矩阵 M 连写两两遍，将主对角线的元素和反对角线上的元素各自相乘，然后用各对角线上元素积的和减去反对角线上元素积的和。

再说下矩形的线性变换，在数学上，如果满足下式，那么映射 F(a) 就是线性的：F(a+b)=F(a)+F(b) 以及：F(ka) = kF(a)

如果映射 F 保持了基本运算，加法和数量乘，那么就可以称该映射为线性的。在这种情况下如果两个向量相加然后再进行变换得到的结果和先分别进行变换再变换后的向量相加得到的结果相同。同样，将一个向量数量乘再进行变换和先进行变换再数量乘的结果也是一样的。

这个线性变换的定义有两条重要的引理：

• 映射 F(a)=aM，当 M 为任意矩阵时，说映射是一个线性变换。这是因为：F(a+b)=(a+b)M=aM+bM=F(a)+F(b) 和 F(ka)=(ka)M=k(am)=kF(a)
• 零向量的任意线性变换的结果仍然是零向量。如果F(0)=a，a≠0.那么 F 不可能是线性变换。因为 F(k0)=a，但 F(k0)≠kF(0) 因此线性变换不会导致平移（原点位置上不会变化）。

3×3 变换矩阵表示的是线性变换，不包含平移。因为矩阵乘法的性质，零向量总是变换成零向量，因此任何能用矩阵乘法表达的变换都不包含平移。这很不幸，因为矩阵乘法和它的逆是一种非常方便的工具，不仅可以用来将复杂的变换合成简单的单一变换，还可以操纵嵌入式坐标系间的关系。

由上所示， 4D 向量和 4×4 矩阵不过是对于 3D 运算的一种方便的记法而已。4D 向量有 4 个分量，前 3 个是标准的 x, y, 和 z 分量，第四个是 w，有时也称作齐次坐标。

平移矩阵是一种线性变换矩阵，用于将向量沿着某个方向平移一定的距离。它的特点是除了最后一列以外，其他列的元素都为零，而最后一列的前面的元素分别表示在
$x$、
$y$、
$z$轴上的平移距离。

齐次坐标是一种表示三维坐标的方法，它使用四个数
$(x, y, z, w)$ 来表示一个点，其中
$w$ 通常被称为“齐次坐标参数”。齐次坐标中的
$w$ 可以是任何非零实数，因此
$(x/w, y/w, z/w)$ 等价于
$(x,y,z)$。

平移矩阵和齐次坐标之间的联系在于，平移矩阵可以被用来将三维坐标表示成齐次坐标的形式。具体来说，对于一个三维点
$(x,y,z)$，可以使用平移矩阵
$T$ 将其表示为
$(x’, y’, z’, w)$ 的形式，其中
$x’ = x + t_x$，
$y’ = y + t_y$，
$z’ = z + t_z$，
$w = 1$。这样就将一个三维坐标点转化为了一个四维的齐次坐标。

因此，平移矩阵和齐次坐标之间有着密切的联系，因为平移矩阵可以被用来将三维坐标表示成齐次坐标的形式。因此，平移矩阵也被称为齐次坐标变换矩阵，或者简称齐次矩阵。

假设 w 总是等于 1。那么，标准 3D 向量[x, y, z]对应的 4D 向量为 [x, y, z, 1] 。任意 3×3 变换矩阵在 4D 中表示为：

任意一个形如[x, y, z, 1]的向量乘以上面形式的矩阵其结果和标准的3×3情况相同，只是结果是用 w=1 的 4D 向量表示的：

[x, y, z]=

[x, y, z, 1]=

现在，在 4D 中，仍然可以用矩阵乘法表达平移，公式如下：

[x, y, z, 1]=

假设 R 为旋转矩阵，T 为变换矩阵：

将向量 v 先旋转再平移，新的向量 v’ 计算如：v’=vRT 注意，变换的顺序非常重要，因为我们使用的是行向量，变换的 顺序必须喝矩阵乘法的顺序相吻合（从左往右），先旋转再平移。

根据 RP 3 齐次坐标，平移矩阵公式如下：

缩放矩阵公式：

旋转矩阵公式：

绕 X 轴旋转，X 轴坐标不变。

绕 Y 轴旋转，Y 轴坐标不变。

绕 Z 轴旋转，Z 轴坐标不变。

矩阵知识已经了解过，我们就可以用JavaScript实现这几种矩阵，此处使用Float32Array，我们也可以使用一维数组实现。

// 实现旋转矩阵、位移矩阵、缩放矩阵
let ARRAY_TYPE = typeof Float32Array !== "undefined" ? Float32Array : Array;
const EPSILON = 0.000001;
const degree = Math.PI / 180;
function createMatrix() {
  let out = new Float32Array(16);
  out[1] = 0;
  out[2] = 0;
  out[3] = 0;
  out[4] = 0;
  out[6] = 0;
  out[7] = 0;
  out[8] = 0;
  out[9] = 0;
  out[11] = 0;
  out[12] = 0;
  out[13] = 0;
  out[14] = 0;
  out[0] = 1;
  out[5] = 1;
  out[10] = 1;
  out[15] = 1;
  return out;
}
function multiplyMatrix(out, a, b) {
  let a00 = a[0],
    a01 = a[1],
    a02 = a[2],
    a03 = a[3];
  let a10 = a[4],
    a11 = a[5],
    a12 = a[6],
    a13 = a[7];
  let a20 = a[8],
    a21 = a[9],
    a22 = a[10],
    a23 = a[11];
  let a30 = a[12],
    a31 = a[13],
    a32 = a[14],
    a33 = a[15];

  // 只缓存第二个矩阵的当前行
  let b0 = b[0],
    b1 = b[1],
    b2 = b[2],
    b3 = b[3];
  out[0] = b0 * a00 + b1 * a10 + b2 * a20 + b3 * a30;
  out[1] = b0 * a01 + b1 * a11 + b2 * a21 + b3 * a31;
  out[2] = b0 * a02 + b1 * a12 + b2 * a22 + b3 * a32;
  out[3] = b0 * a03 + b1 * a13 + b2 * a23 + b3 * a33;

  b0 = b[4];
  b1 = b[5];
  b2 = b[6];
  b3 = b[7];
  out[4] = b0 * a00 + b1 * a10 + b2 * a20 + b3 * a30;
  out[5] = b0 * a01 + b1 * a11 + b2 * a21 + b3 * a31;
  out[6] = b0 * a02 + b1 * a12 + b2 * a22 + b3 * a32;
  out[7] = b0 * a03 + b1 * a13 + b2 * a23 + b3 * a33;

  b0 = b[8];
  b1 = b[9];
  b2 = b[10];
  b3 = b[11];
  out[8] = b0 * a00 + b1 * a10 + b2 * a20 + b3 * a30;
  out[9] = b0 * a01 + b1 * a11 + b2 * a21 + b3 * a31;
  out[10] = b0 * a02 + b1 * a12 + b2 * a22 + b3 * a32;
  out[11] = b0 * a03 + b1 * a13 + b2 * a23 + b3 * a33;

  b0 = b[12];
  b1 = b[13];
  b2 = b[14];
  b3 = b[15];
  out[12] = b0 * a00 + b1 * a10 + b2 * a20 + b3 * a30;
  out[13] = b0 * a01 + b1 * a11 + b2 * a21 + b3 * a31;
  out[14] = b0 * a02 + b1 * a12 + b2 * a22 + b3 * a32;
  out[15] = b0 * a03 + b1 * a13 + b2 * a23 + b3 * a33;
  return out;
}
function translateMatrix(out, a, v) {
  let x = v[0],
    y = v[1],
    z = v[2];
  let a00, a01, a02, a03;
  let a10, a11, a12, a13;
  let a20, a21, a22, a23;

  if (a === out) {
    out[12] = a[0] * x + a[4] * y + a[8] * z + a[12];
    out[13] = a[1] * x + a[5] * y + a[9] * z + a[13];
    out[14] = a[2] * x + a[6] * y + a[10] * z + a[14];
    out[15] = a[3] * x + a[7] * y + a[11] * z + a[15];
  } else {
    a00 = a[0];
    a01 = a[1];
    a02 = a[2];
    a03 = a[3];
    a10 = a[4];
    a11 = a[5];
    a12 = a[6];
    a13 = a[7];
    a20 = a[8];
    a21 = a[9];
    a22 = a[10];
    a23 = a[11];

    out[0] = a00;
    out[1] = a01;
    out[2] = a02;
    out[3] = a03;
    out[4] = a10;
    out[5] = a11;
    out[6] = a12;
    out[7] = a13;
    out[8] = a20;
    out[9] = a21;
    out[10] = a22;
    out[11] = a23;

    out[12] = a00 * x + a10 * y + a20 * z + a[12];
    out[13] = a01 * x + a11 * y + a21 * z + a[13];
    out[14] = a02 * x + a12 * y + a22 * z + a[14];
    out[15] = a03 * x + a13 * y + a23 * z + a[15];
  }

  return out;
}
function scaleMatrix(out, a, v) {
  let x = v[0],
    y = v[1],
    z = v[2];

  out[0] = a[0] * x;
  out[1] = a[1] * x;
  out[2] = a[2] * x;
  out[3] = a[3] * x;
  out[4] = a[4] * y;
  out[5] = a[5] * y;
  out[6] = a[6] * y;
  out[7] = a[7] * y;
  out[8] = a[8] * z;
  out[9] = a[9] * z;
  out[10] = a[10] * z;
  out[11] = a[11] * z;
  out[12] = a[12];
  out[13] = a[13];
  out[14] = a[14];
  out[15] = a[15];
  return out;
}
function rotateMatrix(out, a, rad, axis) {
  let x = axis[0],
    y = axis[1],
    z = axis[2];
  let len = Math.sqrt(x * x + y * y + z * z);
  let s, c, t;
  let a00, a01, a02, a03;
  let a10, a11, a12, a13;
  let a20, a21, a22, a23;
  let b00, b01, b02;
  let b10, b11, b12;
  let b20, b21, b22;

  if (len < EPSILON) {
    return null;
  }

  len = 1 / len;
  x *= len;
  y *= len;
  z *= len;

  s = Math.sin(rad);
  c = Math.cos(rad);
  t = 1 - c;

  a00 = a[0];
  a01 = a[1];
  a02 = a[2];
  a03 = a[3];
  a10 = a[4];
  a11 = a[5];
  a12 = a[6];
  a13 = a[7];
  a20 = a[8];
  a21 = a[9];
  a22 = a[10];
  a23 = a[11];

  // 构造旋转矩阵的元素
  b00 = x * x * t + c;
  b01 = y * x * t + z * s;
  b02 = z * x * t - y * s;
  b10 = x * y * t - z * s;
  b11 = y * y * t + c;
  b12 = z * y * t + x * s;
  b20 = x * z * t + y * s;
  b21 = y * z * t - x * s;
  b22 = z * z * t + c;

  // 执行特定于旋转乘法
  out[0] = a00 * b00 + a10 * b01 + a20 * b02;
  out[1] = a01 * b00 + a11 * b01 + a21 * b02;
  out[2] = a02 * b00 + a12 * b01 + a22 * b02;
  out[3] = a03 * b00 + a13 * b01 + a23 * b02;
  out[4] = a00 * b10 + a10 * b11 + a20 * b12;
  out[5] = a01 * b10 + a11 * b11 + a21 * b12;
  out[6] = a02 * b10 + a12 * b11 + a22 * b12;
  out[7] = a03 * b10 + a13 * b11 + a23 * b12;
  out[8] = a00 * b20 + a10 * b21 + a20 * b22;
  out[9] = a01 * b20 + a11 * b21 + a21 * b22;
  out[10] = a02 * b20 + a12 * b21 + a22 * b22;
  out[11] = a03 * b20 + a13 * b21 + a23 * b22;

  if (a !== out) {
    // 如果源和目标不同，则复制未更改的最后一行
    out[12] = a[12];
    out[13] = a[13];
    out[14] = a[14];
    out[15] = a[15];
  }
  return out;
}

参考资料如下

矩阵、齐次坐标 📎

矩阵 📎

CSS里的matrix 📎

什么齐次坐标📎

矩阵逆变换📎