Panzoom, установите положение div для увеличения фокусной точки при масштабировании
Я хотел бы визуально контролировать фокусировку увеличения в плагине Panzooom JQuery. чтобы сделать это, я бы хотел расположить маленький делитель 10х10 по тем же координатам, что и фокус, но каким-то образом он помещает его в совершенно другое место. Вот мой код:
(только размещение соответствующих частей)
$panzoom.panzoom("option", {
contain: false,
increment: 10,
duration: 2000,
animate: true,
exponential: false,
minScale: minScale,
maxScale: maxScale,
panOnlyWhenZoomed : false,
focal: {
clientX: position.left, //coordinates of an existing div.
clientY: position.top
}
});
$panzoom.panzoom('zoom');
var d = document.getElementById('zoomcenter');
d.style.left = position.left+'px';
d.style.top = position.top+'px'; // I expect this div to be
// placed in the same position as the above,
// where I am zooming to. Instead it is placed
// somewhere totally different.
// probably affected by the transform Matrix.
// but not able to figure out why.
var matrix = $panzoom.panzoom("getMatrix");
console.debug("boxl:" + position.left + " boxt:" + position.top + " zcl:" + $('#zoomcenter').offset().left + " zct:" + $('#zoomcenter').offset().top + " Matrix:" + matrix.toString())
//returns this:
// boxl:986.6997680664062 boxt:343.0241394042969 zcl:692.1810302734375 zct:285.1896057128906 Matrix:1.6775,0,0,1.6775,-1133.01,-244.451
РЕДАКТИРОВАТЬ: Дополнительная информация: - Div ZoomCenter имеет абсолютное положение. - положение $panzoom.panzoom('zoom') не влияет на результат.