Javascript Fabricjs平移和缩放

如何使用fabricjs进行平移和缩放？我尝试过使用zoomToPoint和setZoom方法，但它们不适用于平移。一旦我开始使用不同的缩放点，我就会有麻烦

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

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

$('#goRight').click(function(){
    //Need to implement
}) ;

$('#goLeft').click(function(){
    //Need to implement
}) ;

使用以下方法解决此问题：

relativePan（） 绝对量

[更新]

$('#goRight').click(function(){
    var units = 10 ;
    var delta = new fabric.Point(units,0) ;
    canvas.relativePan(delta) ;
}) ;

$('#goLeft').click(function(){
    var units = 10 ;
    var delta = new fabric.Point(-units,0) ;
    canvas.relativePan(delta) ;
}) ;
$('#goUp').click(function(){
    var units = 10 ;
    var delta = new fabric.Point(0,-units) ;
    canvas.relativePan(delta) ;
}) ;

$('#goDown').click(function(){
    var units = 10 ;
    var delta = new fabric.Point(0,units) ;
    canvas.relativePan(delta) ;
});

---

我知道答案已经有了，但我不得不做鼠标平移，所以我调整了小提琴的接受答案这样做。我把它贴在这里是为了任何一个需要做这种事情的人。这只是主要的想法：

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

canvas.on('mouse:down', function (e) {
    panning = true;
});
canvas.on('mouse:move', function (e) {
    if (panning && e && e.e) {
        var units = 10;
        var delta = new fabric.Point(e.e.movementX, e.e.movementY);
        canvas.relativePan(delta);
    }
});

---

这是小提琴：

如果您只想在显示器中平移画布，而不想更改元素的位置， 你可以用

---

其想法是使用css为

overflow:hidden

的固定大小容器，其中包含扩展的画布。pan将在容器内移动画布，以便用户每次都能看到扩展画布的不同区域

这是我的画布缩放（使用鼠标滚轮）和平移（使用左/上/右/下键或shift键+鼠标左下+鼠标移动）解决方案

变量方向={
左:0,，
上:1,，
右:2,，
下降：3
};
var zoomLevel=0；
var zoomLevelMin=0；
var zoomLevelMax=3；
var shiftKeyDown=错误；
var mouseDownPoint=null；
var canvas=new fabric.canvas（'canvas'{
宽度：500，
身高：500，
选择键：“ctrlKey”
});
canvas.add（new fabric.Rect({
左:100,，
前100名，
宽度：50，
身高：50，
填写：“#faa”
}));
canvas.add（new fabric.Rect({
左:300,，
排名：300，
宽度：50，
身高：50，
填写：“#afa”
}));
canvas.on（'mouse:down'，函数（选项）{
var pointer=canvas.getPointer（options.e，true）；
mouseDownPoint=newfabric.Point（pointer.x，pointer.y）；
});
canvas.on（'mouse:up'，函数（选项）{
mouseDownPoint=null；
});
canvas.on（'mouse:move'，函数（选项）{
if（向下移动键和鼠标向下点（&M）{
var pointer=canvas.getPointer（options.e，true）；
var mouseMovePoint=newfabric.Point（pointer.x，pointer.y）；
canvas.relativePan（mouseMovePoint.subtract（mouseDownPoint））；
mouseDownPoint=mouseMovePoint；
边界（画布）中的keepositioninbounds；
}
});
fabric.util.addListener（document.body，'keydown'，函数（选项）{
如果（选项。重复）{
返回；
}
var key=options.which | | options.keyCode；//密钥检测
如果（键==16）{//handle Shift键
canvas.defaultCursor='move'；
canvas.selection=false；
shiftKeyDown=true；
}如果（key==37）{//处理左键
移动（方向左）；
}如果（键===38）{//处理向上键
移动（方向向上）；
}如果（key==39）{//处理右键，则为else
移动（方向。右）；
}否则，如果（键===40）{//按下键
移动（方向向下）；
}
});
fabric.util.addListener（document.body，'keyup'，函数（选项）{
var key=options.which | | options.keyCode；//密钥检测
如果（键==16）{//handle Shift键
canvas.defaultCursor='default'；
canvas.selection=true；
shiftKeyDown=false；
}
});
jQuery（“.canvas container”）.on（'mousewheel'，函数（选项）{
var delta=options.originalEvent.wheelDelta；
如果（增量！=0）{
var pointer=canvas.getPointer（options.e，true）；
var point=新结构点（pointer.x，pointer.y）；
如果（增量>0）{
zoomIn（点）；
}else if（delta<0）{
zoomOut（点）；
}
}
});
功能移动（方向）{
开关（方向）{
case Direction.LEFT：
relativePan（新的fabric.Point（-10*canvas.getZoom（），0））；
打破
案例说明.UP：
relativePan（新的fabric.Point（0，-10*canvas.getZoom（））；
打破
case Direction.RIGHT：
relativePan（新的fabric.Point（10*canvas.getZoom（），0））；
打破
case Direction.DOWN：
relativePan（新的fabric.Point（0,10*canvas.getZoom（））；
打破
}
边界（画布）中的keepositioninbounds；
}
函数缩放（点）{
if（zoomLevelzoomLevel最小值）{
zoomLevel--；
canvas.zoomToPoint（point，Math.pow（2，zoomLevel））；
边界（画布）中的keepositioninbounds；
}
}
函数keepositioninbounds（）{
var zoom=canvas.getZoom（）；
var xMin=（2-zoom）*canvas.getWidth（）/2；
var xMax=zoom*canvas.getWidth（）/2；
var yMin=（2-zoom）*canvas.getHeight（）/2；
var yMax=zoom*canvas.getHeight（）/2；
var point=new fabric.point（canvas.getWidth（）/2，canvas.getHeight（）/2）；
var center=fabric.util.transformPoint（point，canvas.viewportTransform）；
var clampedCenterX=夹紧（中心x，xMin，xMax）；
var clampedCenterY=夹具（中心
<!DOCTYPE html>
<html>

<head>
    <script type="text/javascript" src="lib/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="lib/fabric.min.js"></script>
</head>

<body>

    <canvas id="canvas" style="border: 1px solid #cccccc"></canvas>

    <script>
        var Direction = {
            LEFT: 0,
            UP: 1,
            RIGHT: 2,
            DOWN: 3
        };

        var zoomLevel = 0;
        var zoomLevelMin = 0;
        var zoomLevelMax = 3;

        var shiftKeyDown = false;
        var mouseDownPoint = null;

        var canvas = new fabric.Canvas('canvas', {
            width: 500,
            height: 500,
            selectionKey: 'ctrlKey'
        });

        canvas.add(new fabric.Rect({
            left: 100,
            top: 100,
            width: 50,
            height: 50,
            fill: '#faa'

        }));
        canvas.add(new fabric.Rect({
            left: 300,
            top: 300,
            width: 50,
            height: 50,
            fill: '#afa'
        }));

        canvas.on('mouse:down', function (options) {
            var pointer = canvas.getPointer(options.e, true);
            mouseDownPoint = new fabric.Point(pointer.x, pointer.y);
        });
        canvas.on('mouse:up', function (options) {
            mouseDownPoint = null;
        });
        canvas.on('mouse:move', function (options) {
            if (shiftKeyDown && mouseDownPoint) {
                var pointer = canvas.getPointer(options.e, true);
                var mouseMovePoint = new fabric.Point(pointer.x, pointer.y);
                canvas.relativePan(mouseMovePoint.subtract(mouseDownPoint));
                mouseDownPoint = mouseMovePoint;
                keepPositionInBounds(canvas);
            }
        });
        fabric.util.addListener(document.body, 'keydown', function (options) {
            if (options.repeat) {
                return;
            }
            var key = options.which || options.keyCode; // key detection
            if (key == 16) { // handle Shift key
                canvas.defaultCursor = 'move';
                canvas.selection = false;
                shiftKeyDown = true;
            } else if (key === 37) { // handle Left key
                move(Direction.LEFT);
            } else if (key === 38) { // handle Up key
                move(Direction.UP);
            } else if (key === 39) { // handle Right key
                move(Direction.RIGHT);
            } else if (key === 40) { // handle Down key
                move(Direction.DOWN);
            }
        });
        fabric.util.addListener(document.body, 'keyup', function (options) {
            var key = options.which || options.keyCode; // key detection
            if (key == 16) { // handle Shift key
                canvas.defaultCursor = 'default';
                canvas.selection = true;
                shiftKeyDown = false;
            }
        });
        jQuery('.canvas-container').on('mousewheel', function (options) {
            var delta = options.originalEvent.wheelDelta;
            if (delta != 0) {
                var pointer = canvas.getPointer(options.e, true);
                var point = new fabric.Point(pointer.x, pointer.y);
                if (delta > 0) {
                    zoomIn(point);
                } else if (delta < 0) {
                    zoomOut(point);
                }
            }
        });

        function move(direction) {
            switch (direction) {
            case Direction.LEFT:
                canvas.relativePan(new fabric.Point(-10 * canvas.getZoom(), 0));
                break;
            case Direction.UP:
                canvas.relativePan(new fabric.Point(0, -10 * canvas.getZoom()));
                break;
            case Direction.RIGHT:
                canvas.relativePan(new fabric.Point(10 * canvas.getZoom(), 0));
                break;
            case Direction.DOWN:
                canvas.relativePan(new fabric.Point(0, 10 * canvas.getZoom()));
                break;
            }
            keepPositionInBounds(canvas);
        }


        function zoomIn(point) {
            if (zoomLevel < zoomLevelMax) {
                zoomLevel++;
                canvas.zoomToPoint(point, Math.pow(2, zoomLevel));
                keepPositionInBounds(canvas);
            }
        }

        function zoomOut(point) {
            if (zoomLevel > zoomLevelMin) {
                zoomLevel--;
                canvas.zoomToPoint(point, Math.pow(2, zoomLevel));
                keepPositionInBounds(canvas);
            }
        }

        function keepPositionInBounds() {
            var zoom = canvas.getZoom();
            var xMin = (2 - zoom) * canvas.getWidth() / 2;
            var xMax = zoom * canvas.getWidth() / 2;
            var yMin = (2 - zoom) * canvas.getHeight() / 2;
            var yMax = zoom * canvas.getHeight() / 2;

            var point = new fabric.Point(canvas.getWidth() / 2, canvas.getHeight() / 2);
            var center = fabric.util.transformPoint(point, canvas.viewportTransform);

            var clampedCenterX = clamp(center.x, xMin, xMax);
            var clampedCenterY = clamp(center.y, yMin, yMax);

            var diffX = clampedCenterX - center.x;
            var diffY = clampedCenterY - center.y;

            if (diffX != 0 || diffY != 0) {
                canvas.relativePan(new fabric.Point(diffX, diffY));
            }
        }

        function clamp(value, min, max) {
            return Math.max(min, Math.min(value, max));
        }
    </script>

</body>

</html>

canvas.toggleDragMode(true); // Start panning
canvas.toggleDragMode(false); // Stop panning