Fabricjs panoramique et zoom

Comment puis-je de panoramique et de zoom à l'aide de fabricjs? J'ai essayé d'utiliser les méthodes zoomToPoint et setZoom mais ils ne fonctionnent pas pour le panoramique. Une fois que je commence à l'aide de différentes zoom points je commence à avoir des ennuis.

$('#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
}) ;

http://jsfiddle.net/hdramos/ux16013L/

source d'informationauteur d0001

  1. 17

    Résolu à l'aide de:

    relativePan()
    absolutePan()

    [Mise à jour]

    $('#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) ;
});

    http://jsfiddle.net/ux16013L/2/

  2. 13

    Je sais que c'est déjà répondu, mais j'ai dû faire un panoramique de la souris, j'ai donc adapté le violon, de la accepté de répondre à le faire. Je poste ici pour une personne qui doit faire quelque chose comme ça. C'est juste l'idée principale:

    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);
    }
});

    Ici est le violon: http://jsfiddle.net/gncabrera/hkee5L6d/5/