Direct canvas panning with raphael.js

Question

I'm trying to make an application that, when you click a button outside the shape, allows you to pan the viewport using setviewbox (); I did something close to it, but I'm not happy with it, I'm using a rectangle:

canvas = new Raphael(0,0,canvas_size, canvas_size); var rectan = paper.rect(0,0,canvas_size,canvas_size); using .drag(move,dragger,up); and in the function of move var bboxx=this.getBBox(false) paper.setViewBox(bboxx.x,bboxx.y,canvas_size,canvas_size,true); this.toBack(); 

I am sending back so it cannot conflict with other animation objects (drag and drop ...) it works, but I still need to know if this is possible, and it’s better to click / click on the canvas instead of the rectangle

Answer 1

I recommend the tihs library for panning and zooming, works great for me.

https://github.com/andrewseddon/raphael-zpd

Then, if you want to pan only when you click outside the form, you just need to prevent or stop events when you click on any shape.