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') не влияет на результат.

0 ответов

Другие вопросы по тегам