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/
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/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With