svgdotjs / svg.panzoom.js

A plugin for svg.js which enables panzoom for viewbox elements

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Please add a method to pan svg programmatically

qingyun1988 opened this issue · comments

I can't find any method for this purpose. Could you add one? thank you.

you would use the viewbox function for that purpose.
e.f. if you want to center a point, you get your current viewbox, get its center, substract it from the point taht should be centered and move the viewbox by that amount

const p = { x: 200, y: 200 } // center this point
const vb = canvas.viewbox()

const {cx, cy} = vb
const deltaX = p.x - cx
const deltaY = p.y - c.y

canvas.viewbox({
  ...vb,
  x: vb.x - deltaX,
  y: vb.y - deltaY
})

Didnt test that code. Probably have some flipped negative signs there

Thank you very much! But it's better if you can provide a pan() method based on your thoughts above.

Feel free to create a PR to contribute this method. Unfortunately I cannot do open source full time and I am also not quite sure if a method is neccessary. For now, you can just use the code I provided :)

Feel free to create a PR to contribute this method. Unfortunately I cannot do open source full time and I am also not quite sure if a method is necessary. For now, you can just use the code I provided :)

I am not talented as you are at coding. Thank you very much!

If you are able to use this library you are also able to create a PR

I also need something similar to this and seems like a good fit for this plugin.

What I'm thinking is to isolate the 'core' code inside panning that actually 'moves' the map by X pixels into a private method and the new public method and panning event would use that code. Does that sound good @Fuzzyma ?

I wouldnt use a private method since its only a few lines long. Just inline it :)