2

我想直观地监控 panzooom jquery 插件中的缩放焦点。为了做到这一点，我想将一个 10x10 的小 div 放置在与焦点相同的坐标上，但不知何故它将它放置在一个完全不同的位置。这是我的代码：

（只贴相关部分）

$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') 的位置不影响结果。

4

0 回答 0