Vue-cropper 图片裁剪的基本原理及思路讲解(2)

日期：2020-05-11 栏目：程序人生浏览：次

2. 图片如何进行压缩？

当图片的宽度大于容器的宽度，就需要进行压缩；因此 var scale = 容器的宽度 / 图片的宽度；

如果图片的高度 * 缩放比例 > 容器的高度，那么缩放比例 scale = 容器的高度 / 图片的高度；否则的话，不进行压缩。

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;
}

转载注明出处：http://www.heiqu.com/274.html

Vue-cropper 图片裁剪的基本原理及思路讲解(2)

相关推荐