Jquery Расчет мыши смещения при увеличении - PullRequest
Новая
       23

Jquery Расчет мыши смещения при увеличении

0 голосов
/ 11 мая 2019

Я использую jquery.flowchart отсюда https://github.com/sdrdis/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);
    }
  },

Кажется, это помогает, но это не правильно.Чем больше вы увеличиваете или уменьшаете масштаб, тем более выраженной становится проблема.

Кто-нибудь знает, как решить эту проблему?

Спасибо

...