javascript - 如何实现FabricJS Canvas 视口(viewport)的移动？

Question

我有一个 FabricJS Canvas ，我想按以下方式工作:

1. 用户放大。
2. 然后，用户通过按左、右、上、下按钮移动视口(viewport)(可见区域)。

每个按钮都会调用 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 所示:

1. 向右移动不起作用(视口(viewport)仅移动一次，无法一直向右移动)，
2. 与顶部和底部的移动相同。

移动 FabricJS Canvas 视口(viewport)的正确方法是什么？

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>