Closed SkyHolder closed 3 years ago
Hello, i start panZoom like this
<panZoom :options="{ minZoom: 0.2, maxZoom: 1, initialZoom: 0.2, autocenter: true, boundsPadding: 1, }" > <img :src="image.path" /> </panZoom>
but on start image has this transform
transform-origin: 0px 0px 0px; transform: matrix(1, 0, 0, 1, 338, 554);
338, 554 - size of my modalwhen i move image transform change to this
transform-origin: 0px 0px 0px; transform: matrix(1, 0, 0, 1, -4, -1);
initialZoom and autocenter not aplying, what is my mistake?
looks like
var transformAdjusted = keepTransformInsideBounds();
working wrong, but i not shure.
Kindly update the package to the latest v1.1.3
I updated the package, but I did not see any changes I use @init event for manual moving image on open
onPanZoomInit(panzoomInstance) {
let img = document.querySelector(".zoomed-img");
let modal = document.querySelector(".full-image-modal");
img.addEventListener("load", () => {
panzoomInstance.zoomTo(-img.offsetWidth / 2 + modal.offsetWidth / 2, -img.offsetHeight / 2 + modal.offsetHeight / 2, 0.5);
});
},
Works as expected, but pinch zoom does not work when the edge reaches the edge .vue-pan-zoom-scene When I reach the minimum zoom, the image fits into the modal and it becomes impossible to enlarge it
my markup is
<panZoom
@init="onPanZoomInit"
:options="{
minZoom: 0.2,
maxZoom: 1,
bounds: true,
boundsPadding: 1,
}"
>
<img :src="existImages.path" alt="" class="zoomed-img" data-not-lazy />
</panZoom>
Thanks for the quick response
Hello, i start panZoom like this ` <panZoom :options="{ minZoom: 0.2, maxZoom: 1, initialZoom: 0.2, autocenter: true, boundsPadding: 1, }"
but on start image has this transform
transform-origin: 0px 0px 0px; transform: matrix(1, 0, 0, 1, 338, 554);
338, 554 - size of my modalwhen i move image transform change to this
transform-origin: 0px 0px 0px; transform: matrix(1, 0, 0, 1, -4, -1);
initialZoom and autocenter not aplying, what is my mistake?
looks like
var transformAdjusted = keepTransformInsideBounds();
working wrong, but i not shure.