Question

我在这里https://github.com/sdrdis/jquery.flowchart上使用jquery.flowchart

这很适合我的需求，但是我有一个小问题。为了确保从高分辨率屏幕移至较低分辨率时所有元素均可见，我添加了放大和缩小按钮。这些效果很好，所有元素都可以正确放大/缩小。这是放大，缩小和重置的代码。

currentZoom = 1.0;
$('#zoom').text(currentZoom);

$('#ZoomIn').click(
    function () {
        $('#grid').animate({ 'zoom': currentZoom += .1 }, 'slow');
        $('#zoom').text(currentZoom);
        $flowchart.flowchart('redrawLinksLayer');  
    })
$('#ZoomOut').click(
    function () {
        $('#grid').animate({ 'zoom': currentZoom -= .1 }, 'slow');
        $('#zoom').text(currentZoom);
        $flowchart.flowchart('redrawLinksLayer');  
    })
$('#ZoomReset').click(
    function () {
        currentZoom = 1.0
        $('#grid').animate({ 'zoom': 1 }, 'slow');
        $('#zoom').text(currentZoom);
        $flowchart.flowchart('redrawLinksLayer');  
})

流程图可让您在连接器之间创建链接。当您单击输出连接器时，会创建一个临时链接，该临时链接会跟随鼠标指针直到您到达输入连接器并单击它，然后会创建一个真正的链接。

当currentZoom级别为1时，此方法工作正常，一旦更改临时链接，该链接便与鼠标指针不符。

例如：我已经缩小，currentZoom为0.8，我单击了输出连接器，显示了临时链接，但是它与鼠标指针不符，但是如果我单击输入连接器，则会创建链接正确。

因此，临时链接认为鼠标指针所在的位置似乎是个问题。

此功能似乎与鼠标位置有关

 _mousemove: function (x, y, e) {
            if (this.lastOutputConnectorClicked != null) {
                this.objs.temporaryLink.setAttribute('x2', x);
                this.objs.temporaryLink.setAttribute('y2', y);
            }
        },

所以我尝试添加以下内容：

_mousemove: function (x, y, e) {
   if (this.lastOutputConnectorClicked != null) {

   if (currentZoom > 0) {
      x = x / currentZoom
      y = y / currentZoom
   } else {
      x = x * currentZoom
      y = y * currentZoom
   }

   this.objs.temporaryLink.setAttribute('x2', x);
   this.objs.temporaryLink.setAttribute('y2', y);
    }
  },

这似乎有所帮助，但这是不对的。放大或缩小得越多，问题就越明显。

有人知道如何解决吗？

谢谢

jQuery缩放时计算鼠标偏移

0 个答案: