一開始我也是被這個問題困擾，認為是一個很復(fù)雜的數(shù)學(xué)運算問題，什么向量啊，坐標現(xiàn)象啊，各種胡思亂想，看了下別人的博文也是寫非常復(fù)雜，看上去就令人怯步，其實細想一下，就是一個偏移量的問題。

首先聲明一個變量，記錄x，y的偏移量，一個變量記錄最后一次的縮放比例:

// 定義變量記錄最后一次的偏移量和縮放比例 const relationship = {x: 0, y: 0, zoom: 1};

放大縮小時計算的偏移量

// 按住ctrl + 滾輪實現(xiàn)放大縮小 const mouseWheelEvent = (e: any) => {if (e.ctrlKey) {e.preventDefault();let zoom = (e.deltaY > 0 ? 0.1 : -0.1) + canvas.getZoom();zoom = Math.max(0.1, zoom);zoom = Math.min(5, zoom);if (zoom === relationship.zoom) return;const [x, y] = [e.offsetX, e.offsetY];// 計算縮放時產(chǎn)生的偏移量 這是重點代碼relationship.x += x / zoom - x / relationship.zoom;relationship.y += y / zoom - y / relationship.zoom;const zoomPoint = new fabric.Point(x, y);canvas.zoomToPoint(zoomPoint, zoom);relationship.zoom = zoom;} }

上面的x / y 的取值看你是監(jiān)聽在什么元素上，不一定要按照我的，你也可以用 e.pointer.x，e.pointer.y 或者是 e.pageX， e.pageY等

下面我們看看平移的代碼時的偏移量，平移其實是最簡單的了，以為它不用計算縮放時產(chǎn)生的平移量:

canvas.on("mouse:move", e => {if (panning && e && e.e) { // padding 表示是否允許拖動畫布const delta = new fabric.Point(e.e.movementX, e.e.movementY);canvas.relativePan(delta);//累計每一次移動時候的偏移量relationship.x += e.e.movementX / relationship.zoom;relationship.y += e.e.movementY / relationship.zoom;} })

好了，完事之后就可以去愉快地隨意的放大縮小移動N百次再添加圖形看看效果了，添加對象的方法如下：

canvas.on('mouse:dblclick', e => {const [left, top] = [e.pointer.x / relationship.zoom - relationship.xe.pointer.y / relationship.zoom - relationship.y];const rect = new fabric.Rect({left,top,width: 100,height: 100,fill: 'red'});canvas.add(rect).renderAll(); })

?

總結(jié)

以上是生活随笔為你收集整理的关于fabricjs移动、放大等一些列操作后位置不对的问题的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。