基于Vue的Fabricjs的画布移动和缩放，以及鼠标在缩放与移动后的画布上的定位（二）

在自由移动缩放的画布上定位鼠标位置

通过的操作已经实现了对画布的一系列操作，也包括在画布移动的情况下，使用相对偏差位置来定位鼠标在画布上所见位置。但是考虑进一步的情况，当画布同时发生了缩放和平移的状况又该如何？
先考虑画布在发生缩放时鼠标如何定位：

1 缩放

当画布进行缩放后，在浏览器中看到的是被放大后的图片，但是通过实际的验证发现实际上的画布尺寸并没有发生改变。也就是说以浏览器页面为原点左上顶点放大画布2倍之后，若以此时鼠标在浏览器页面为原点的位置画图，会发现画出的图案出现在此时鼠标位置的右下角两倍位置。
这样一来，定位鼠标在缩放画布上的定位就变成了，如何将鼠标在页面上坐标映射到画布上，这一步思想与移动画布上定位一样。
缩放原点：在举例中提到过，缩放原点的概念，实际上在缩放图片时也使用了缩放原点：

this.zoomPoint = new fabric.Point(e.pointer.x,e.pointer.y);

其中this.zoomPoint就是缩放原点，通过缩放原点，画布才能以此进行缩放。这样一来缩放原点就是缩放过程中不变的地方。也就是说当从原图开始进行缩放时，这一点所对应的页面位置，就是缩放后画布的位置。此后鼠标的在画布上的位置，都可以通过计算与原点的距离得到。

 this.mouseFrom.x = (o.pointer.x - this.zoomPoint.x) / this.canvas.getZoom();
 this.mouseFrom.y = (o.pointer.y - this.zoomPoint.y) / this.canvas.getZoom();

原理：如上代码中缩放发生时，记录此时鼠标在页面上的位置以及缩放原点的位置，两者相减得出鼠标与缩放原点的绝对距离。但是此时由于发生了缩放导致此时的绝对距离并不等于实际上的画布上的距离，所以需要除于此刻的缩放比例。
局限：由上述的代码可以看出缩放原点和鼠标位置的绝对距离必须要在同一屏幕之下，换句话说就是缩放之后画布就不可以再移动了。

移动与缩放组合

1 先移动后缩放

先将画布进行移动，再进行缩放，这种情况下求此刻鼠标的定位。通过之前的讲解已经知道了鼠标分别在移动和缩放这两种情况下的位置，自然就可以得出这种情况下的鼠标定位：

	this.mouseFrom.x = (o.pointer.x - this.relativeMouseX - this