如何實現移動FabricJS畫布的視口？

Question

我有一個FabricJS的畫布，我要在以下方式工作：

1. 用戶放大
2. 然後，用戶通過按壓左移動視窗（可視區域），右，上，向下按鈕。

每個按鈕的調用moveViewPort方法：

<button 
    type="button" 
    onclick="moveViewPort(-1, 0);" 
    class="btn btn-default"> 
    <span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span> 
</button> 
<button 
    type="button" 
    onclick="moveViewPort(1, 0);" 
    class="btn btn-default"> 
    <span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> 
</button> 
<button 
    type="button" 
    onclick="moveViewPort(0, -1);" 
    class="btn btn-default"> 
    <span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span> 
</button> 
<button 
    type="button" 
    onclick="moveViewPort(0, 1);" 
    class="btn btn-default"> 
    <span class="glyphicon glyphicon-arrow-down" aria-hidden="true"></span> 
</button> 

moveViewPort被定義爲

function moveViewPort(deltax, deltay) { 
    var canvas = window._canvas; 
    canvas.absolutePan({ 
     x: canvas.width/2 + deltax, 
     y: canvas.height/2 + deltay}); 
} 

canvas在HTML頁面中被初始化：

<script> 
    var canvas = window._canvas = new fabric.Canvas('canvas'); 
    var rect = new fabric.Rect({ 
      top : 100, 
      left : 100, 
      width : 60, 
      height : 70, 
      fill : 'red' 
     }); 

    canvas.add(rect); 
    canvas.isDrawingMode = false; 

    [...] 
</script> 

1. 運動不起作用（視口，你不能移動到右邊一路只移動一次）的權利，
2. 相同：但是像預期的那樣顯示在此video這是行不通的隨着運動到頂部和底部。

什麼是移動FabricJS畫布視口的正確方法？

Answer 1

你必須增加平移點，而不是每次都用deltax和deltay來改變它。檢查代碼片段以獲取管理它的想法。

var pos = {x:0, y:0} 
 
function moveViewPort(deltax, deltay) { 
 
var canvas = window._canvas; 
 
pos.x += deltax; 
 
pos.y += deltay; 
 
canvas.absolutePan({ 
 
    x: pos.x, 
 
    y: pos.y}); 
 
} 
 

 
var canvas = window._canvas = new fabric.Canvas('canvas'); 
 
var rect = new fabric.Rect({ 
 
     top : 10, 
 
     left : 10, 
 
     width : 20, 
 
     height : 30, 
 
     fill : 'red' 
 
    }); 
 

 
canvas.add(rect); 
 
canvas.isDrawingMode = false; 
 
canvas.setZoom(2);

<button 
 
type="button" 
 
onclick="moveViewPort(-1, 0);" 
 
class="btn btn-default"> 
 
LEFT 
 
</button> 
 
<button 
 
type="button" 
 
onclick="moveViewPort(1, 0);" 
 
class="btn btn-default"> 
 
RIGHT 
 
</button> 
 
<button 
 
type="button" 
 
onclick="moveViewPort(0, -1);" 
 
class="btn btn-default"> 
 
UP 
 
</button> 
 
<button 
 
type="button" 
 
onclick="moveViewPort(0, 1);" 
 
class="btn btn-default"> 
 
DOWN 
 
</button> 
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js" ></script> 
 
    <canvas id="canvas" width=500 height=200 style="height:500px;width:500px;"></canvas>