Fabric.jsの位置は、getZoom（）とgetWidth（）/ getHeight（）との相対位置です。

Question

Fabric.jsをReact/Reduxで使用していますが、キャンバスで次のような効果を得ようとしています。パンニング時に上下左右に移動しないようにしてください）。

これは私が取得しようとしています効果のビデオです：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/ コードは、I以来、完全ではないがルーラーを配置する方法、viewPort、キャンバスのサイズなどで再生しようとした方法を正確にはわかりませんが、同じ効果を得ることはできませんでした。

ありがとうございました。ここで

Answer 1

は、結果のスクリーンショットです：

は、ここでは、2つのズーム機能です：

/* 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/があります。