Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Fabricjs pan and zoom

Tags:

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/

like image 732
d0001 Avatar asked May 26 '15 18:05

d0001


1 Answers

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/

like image 70
d0001 Avatar answered Nov 14 '22 02:11

d0001