至于如何求取缩放后图片左上角的坐标值，在草稿纸上画来画去，画了很久……终于有点眉目。首先要找到一个缩放中心（这里做法是取双指的中点坐标，但是这个坐标必须要位于图片上，如果不在图片上，则取图片上离该中点坐标最近的点），然后存在下面这个等式
（缩放中心x坐标 – 缩放后图片左上角x坐标）/ 缩放后图片的宽度 = （缩放中心x坐标 – 缩放前图片左上角x坐标）/ 缩放前图片的宽度；（y坐标同理）
接下来看看下面这个例子（在visio找了很久都没有画坐标系的功能，所以只能手工画了）
绿色框是一张10*5的图片，蓝色框是宽高放大两倍后的图片20*10，根据上面的公式推算的x2 = sx – w2(sx – x1) / w1，y2 = sy – h2(sy – y1) / h1。
坚持…继续看看代码吧
_initEvent() {
let $gesture = this.$refs.gesture,
cClientRect = this.$refs.canvas.getBoundingClientRect(),
scx = 0, //对于单手操作是移动的起点坐标，对于缩放是图片距离两手指的中点最近的图标。
scy = 0,
fingers = {}; //记录当前有多少只手指在触控屏幕
//one finger
let iX = this.imgX,
iY = this.imgY;
//two finger
let figureDistance = 0,
pinchScale = this.imgScale;
$gesture.addEventListener('touchstart', e => {
if (!this.imgLoaded) {
return;
}
if (e.touches.length === 1) {
let finger = e.touches[0];
scx = finger.pageX;
scy = finger.pageY;
iX = this.imgX;
iY = this.imgY;
fingers[finger.identifier] = finger;
} else if (e.touches.length === 2) {
let finger1 = e.touches[0],
finger2 = e.touches[1],
f1x = finger1.pageX - cClientRect.left,
f1y = finger1.pageY - cClientRect.top,
f2x = finger2.pageX - cClientRect.left,
f2y = finger2.pageY - cClientRect.top;
scx = parseInt((f1x + f2x) / 2);
scy = parseInt((f1y + f2y) / 2);
figureDistance = this._pointDistance(f1x, f1y, f2x, f2y);
fingers[finger1.identifier] = finger1;
fingers[finger2.identifier] = finger2;
//判断变换中点是否在图片中，如果不是则去离图片最近的点
if (scx < this.imgX) {
scx = this.imgX;
}
if (scx > this.imgX + this.imgCurrentWidth) {
scx = this.imgX + this.imgCurrentHeight;
}
if (scy < this.imgY) {
scy = this.imgY;
}
if (scy > this.imgY + this.imgCurrentHeight) {
scy = this.imgY + this.imgCurrentHeight;
