Fabric.js相對於getZoom（）和getWidth（）/ getHeight（）的位置元素

Question

我正在使用Fabric.js和React/Redux，我試圖在canvas上實現以下效果:(注意我有2個標尺在平移時不應該左右移動的頂部和左側，只是水​​平和垂直）。

這是我想要得到的效果視頻：https://vid.me/qs5Q

我有以下代碼：

var canvas = new fabric.Canvas('c'); 
var topRuler = new fabric.Text('this is the top ruler', { 
    top: 0, 
    left: 60, 
    selectable: false 
}); 
var leftRuler = new fabric.Text('this is the left ruler', { 
    top: 150, 
    left: -125, 
    selectable: false 
}); 
var circle = new fabric.Circle({ 
    radius: 20, 
    fill: 'green', 
    left: 180, 
    top: 100 
}); 
var triangle = new fabric.Triangle({ 
    fill: 'green', 
    left: 150, 
    top: 170 
}); 
var panning = false; 
var panningOn = false; 
leftRuler.setAngle(-90).setCoords(); 
canvas.add(circle, triangle, topRuler, leftRuler); 
canvas.renderAll(); 

canvas.on('mouse:up', function(e) { 
if (panningOn) panning = false; 
}); 

canvas.on('mouse:down', function(e) { 
if (panningOn) panning = true; 
}); 

canvas.on('mouse:move', function(e) { 
    if (panning && e && e.e) { 
    moveX = e.e.movementX; 
    moveY = e.e.movementY; 
    topRuler.set({ 
    top: topRuler.top - moveY, 
    left: topRuler.left - moveX 
    }); 

    leftRuler.set({ 
    top: leftRuler.top - moveY, 
    left: leftRuler.left - moveX 
    }); 
    canvas.relativePan(new fabric.Point(moveX, moveY)); 
    } 
}); 
$('#toggle').click(function() { 
    panningOn = !panningOn; 
    canvas.selection = !panningOn; 
    canvas.defaultCursor = 'default'; 
    $('#toggle').html('Turn Panning ON'); 
    if (panningOn) { 
    $('#toggle').html('Turn Panning OFF'); 
    canvas.defaultCursor = 'move'; 
    } 
}); 

/* ZOOM FUNCTIONS */ 
$('#zoomIn').click(function(){ 
    canvas.setZoom(canvas.getZoom() * 1.1) ; 
}); 

$('#zoomOut').click(function(){ 
    canvas.setZoom(canvas.getZoom()/1.1) ; 
}); 

這是一個工作的jsfiddle：https://jsfiddle.net/z3p8utmc/19/ 的代碼是不完整的，因爲我不知道如何定位統治者，試圖用viewPort，畫布大小等來玩，但沒有達到相同的效果。

謝謝你的幫助。

Answer 1

這裏的結果的屏幕截圖：

下面是兩種變焦功能：

/* ZOOM FUNCTIONS */ 
$('#zoomIn').click(function() { 
    rectangle.set({ 
    width: rectangle.width * 1.1, 
    height: rectangle.height * 1.1 
    }); 
    rectangle.setCoords(); 
    textSample.set({ 
    top: 60 + (textSample.top - 60) * 1.1, 
    left: 60 + (textSample.left - 60) * 1.1, 
    scaleX: textSample.scaleX * 1.1, 
    scaleY: textSample.scaleY * 1.1 
    }); 
    textSample.setCoords(); 
    setPins(); 
    addLeftRuler(); 
    addTopRuler(); 
    resizeCanvas(); 
}); 
$('#zoomOut').click(function() { 
    rectangle.set({ 
    width: rectangle.width/1.1, 
    height: rectangle.height/1.1 
    }); 
    rectangle.setCoords(); 
    textSample.set({ 
    top: 60 + (textSample.top - 60)/1.1, 
    left: 60 + (textSample.left - 60)/1.1, 
    scaleX: textSample.scaleX/1.1, 
    scaleY: textSample.scaleY/1.1 
    }) 
    textSample.setCoords(); 
    setPins(); 
    addLeftRuler(); 
    addTopRuler(); 
    resizeCanvas(); 
}); 

平移是使用第三方的控制完成，而傳統的方式，因爲這就是視頻顯示的內容（和你想要的） - 當滾動發生時，通過更新位置來保持頂部和左側標尺的位置。

縮放是通過基於點（60,60）縮放各個對象完成的 - 就像在視頻中一樣。重新設置針腳，重新調整標尺，並根據需要重新調整畫布大小。

訣竅是計算和重新計算一切，因爲用戶操作和事件正在觸發。

希望這可以讓您獲得您需要的畫布基礎。

這是一個可用的JSFiddle，https://jsfiddle.net/rekrah/hs6jL8d4/。