如何实现 FabricJS canvas 视口的移动？

Question

我有一个 FabricJS canvas，我想按以下方式工作：

用户放大。
然后用户通过按左、右、上、下按钮移动视口（可见区域）。

每个按钮调用 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>

但它并没有像预期的那样工作 video:

向右移动不起作用（视口只移动一次，不能一直向右移动），
与顶部和底部的移动相同。

移动 FabricJS 视口的正确方法是什么 canvas？

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>

如何实现 FabricJS canvas 视口的移动？

How to implement moving of the viewport of the FabricJS canvas?

html

javascript

canvas

fabricjs