search

thecodealer / vue-panzoom

Vue plugin to zoom/pan dom elements
MIT License
89 stars 20 forks source link

How to zoom around mouse position #26

Closed thepaperpilot closed 3 years ago

thepaperpilot commented 3 years ago

By default panzoom zooms around the mouse, rather than the screen center. This is represented by the options object having transformOrigin set to null.

vue-panzoom has a default options which sets transformOrigin to { x: .5, y: .5 }, which represents zooming around the screen center. If I pass an options object with { transformOrigin: null }, it does not override the default value - I suspect because it ignores null values.

thecodealer commented 3 years ago

transformOrigin

Kindly try setting it on the panzoom instance like so panzoomInstance.setTransformOrigin(null)

In your template

<panZoom @init="onInit"></panZoom>

In the methods of your script

onInit: function(panzoomInstance, id) {
    panzoomInstance.setTransformOrigin(null);
}
thepaperpilot commented 3 years ago

Thank you, that works perfectly!