Question

138

Fabricjs pan and zoom

rated 0 times [ 143] [ 5] / answers: 1 / hits: 27183 / 9 Years ago, tue, may 26, 2015, 12:00:00

How can I pan and zoom using fabricjs? I've tried using the methods zoomToPoint and setZoom but they do not work for panning. Once I start using different zoom points I start having trouble.

$('#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/

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

beatrices

Add To Favorites

Follow

Total Points: 745

Total Questions: 103

Total Answers: 105

Location: Guam

Member since Tue, Nov 29, 2022

2 Years ago

beatrices questions

1 Chrome Extension Manifest V3 Libraries in Background

Fri, Jan 14, 22, 00:00, 2 Years ago

1 Shopify {{ product.price | money_without_trailing_zeros}}

Sun, Feb 14, 21, 00:00, 3 Years ago

1 Scroll to bottom with cdk-virtual-scroll (Angular 8)

Fri, Nov 20, 20, 00:00, 4 Years ago

1 Calling/Invoking a Javascript function from python a flask function within html

Mon, Apr 13, 20, 00:00, 4 Years ago

1 URLSearchParams always returning empty

Mon, Aug 12, 19, 00:00, 5 Years ago

View All

answered 9 Years ago jaliyahcynthiac · Accepted Answer

Solved it using:

relativePan()
absolutePan()

[Update]

$('#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/