2-1：对于压缩后 translate3d中的X轴和Y轴移动位置计算方式：
x = 容器的宽度 / 压缩比
y = 容器的高度 / 压缩比
即：transform: translate3d(x, y, z) -> translate3d(容器的宽度 / 压缩比 + ‘px’, 容器的高度 / 压缩比 + ‘px’, 0)
因此页面布局变成如下：
<!DOCTYPE html>
<html>
<head>
<title>图片裁剪</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
<link rel="stylesheet" type="text/css" href="./index.css">
</head>
<body>
<div id="app" style="height:500px;margin: 0 auto;">
<div class="vue-cropper">
<div class="cropper-box">
<div class="cropper-box-canvas" style="width:644px;height:642px;transform: scale(0.778816, 0.778816) translate3d(453.252px, -87.312px, 0px) rotateZ(0deg)">
<img src="https://images2018.cnblogs.com/blog/561794/201804/561794-20180416230443389-1451524334.jp" />
</div>
</div>
<div class="cropper-drag-box cropper-crop"></div>
</div>
</div>
</body>
</html>4. 裁剪的过程中，如何计算裁剪的宽度和高度？
当我们点下鼠标时，就能够通过event事件对象获取鼠标点击位置，e.clientX 和 e.clientY; 当鼠标进行移动的时候，也能通过event获取鼠标的位置，
通过两次鼠标位置的改变，就能够获得鼠标移动的距离。即：
初始的x轴和Y轴位置分别为 cropX = e.clientX, cropY = e.clientY;
移动后现在的X轴和Y轴的位置分别为：nowX = e.clientX, nowY = e.clientY;
因此裁剪区域的临时值 var fw = ~~(nowX – cropX);
裁剪区域的临时值是 fh = ~~(nowY – cropY);
裁剪图片的时候，有可能往右拖动(值会越来越大)，也有可能往相反的方向(向左)拖动(值会越来越小)，同理，向上或向下拖动也是同一个道理。因此需要判断 fw 和 fh是否大于0的判断；在鼠标按键下去的时候，先获取鼠标相对于事件源元素的X和Y轴坐标，e.offsetX 和 e.offsetY;
因此
cropChangeX = e.offsetX; cropChangeY = e.offsetY;对于offsetX 和 offsetY 的理解如下；
if (fw > 0) {
var cropW(裁剪区域的实际宽度) = cropChangeX + fw > w(图片的实际宽度) ? w - cropChangeX : fw;
cropOffsertX = cropChangeX;
}cropOffsertX 就是保存事件源相对于元素的距离。
如果fw 小于0，说明是往左裁剪，那么裁剪的距离 fw = (事件结束的clientX – 事件的开始clientX);
