Графический редактор Javascript - Наблюдатель Дизайн шаблона - PullRequest
Новая
       11

Графический редактор Javascript - Наблюдатель Дизайн шаблона

0 голосов
/ 18 сентября 2018

Я занимаюсь разработкой графического редактора с использованием two.js (холст SVG). В этом приложении мне нужно перетащить узлы (круги). Узел имеет форму (круг) и метку. Узел связан с другими узлами линиями, и каждая строка имеет свою метку.

Редактор графиков при перемещении узла

Идея состоит в том, чтобы при перетаскивании узла (круга) я перемещал вместе с ним его метку, и соответственно обновлял линии, и соответственно менял угол и положение метки. Мне нужно знать, как использовать события для создания моего кода, используя лучшие практики, что-то вроде шаблона проектирования наблюдателя.

Я имею в виду, когда я перемещаю Узел (круг), он уведомляет связанные линии, что они должны обновить. Сейчас я просто поместил обновление строк в функцию перемещения узла. Вот код: 

    function mousedown(e) { 
     document.getElementById('log1').textContent = 'offsetY:' + e.offsetY + ' - clientY:' + e.clientY;
     if (e.clientY < 25) return; // menu

     mouse.current.set(e.clientX, e.clientY);
     mouse.previous.copy(mouse.current);

     move.start.set(e.clientX, e.clientY);

     window.addEventListener('mousemove', mousemove, false);
     window.addEventListener('mouseup', mouseup, false);

     realMousePos = mouse.current.clone().subSelf(two.scene.translation).divideScalar(two.scene.scale);
}


    function mousemove(e) {
    mouse.current.set(e.clientX, e.clientY);
    if(!isDragging){
        isDragging = true;
    }

    var dx = mouse.current.x - mouse.previous.x;
    var dy = mouse.current.y - mouse.previous.y;

    // To Pan
    if (State !== 'MOVE'){
        zui.translateSurface(dx, dy);
    } else {
        // Move Selected Nodes
        Move_SelectedNodes(dx, dy); //========> (see below)
    }

    mouse.previous.copy(mouse.current);
}

Обновление node_label и связанных строк 

function Move_SelectedNodes(dx, dy){
    var zoomScale = two.scene.scale;
    var rdx = dx/zoomScale;
    var rdy = dy/zoomScale; 

    var dep = {x: rdx, y:rdy};//dep: deplacement !!!

    for(let i = 0; i < selectedNodes.length; i++){
         var node = selectedNodes[i];
         var node_circle = node.circle;
         var node_label = node.label;

         node_circle.translation.addSelf(dep);
         node_label.translation.addSelf(dep);

         //Move line end
         for (iBr = 0; iBr < node.branches.length; iBr++){
         var ligne = node.branches[iBr].ligne;

              if (ligne.vertices[0].node_id == node_circle.node_id) {
                   ligne.vertices[0].addSelf(dep);
              } else if (ligne.vertices[1].node_id == node_circle.node_id){             
                   ligne.vertices[1].addSelf(dep);
              }

              //Move line label
              var edgeLabel = node.branches[iBr].label;
              var labelX = (ligne.vertices[0].x + ligne.vertices[1].x)/2;
              var labelY = (ligne.vertices[0].y + ligne.vertices[1].y)/2;       
              edgeLabel.translation.set(labelX, labelY);
              edgeLabel.rotation = angle(ligne.vertices[0], ligne.vertices[1]);         
          }
      }

      two.update();
 }

Вот весь пример в JSFiddle https://jsfiddle.net/hichem147/fdzn1u0x/ Чтобы использовать это: 

(1) create nodes by adding nodes by clicking first [(+) Nodes]
(2) click on the canvas where you want to add a node
(3) add branches (lines) by clicking [Branche]
(4) click on the nodes you want to link with a line
(5) To move nodes you click on [select] then
(6) select one node or many using [ctrl]
(7) click [Move]
(8) Move the selected nodes
(9) to end click [Pan/Zoom] or [Select] button

1 Ответ

0 голосов
/ 23 сентября 2018

Наконец, я увидел этот урок по использованию RaphaelJS для чего-то похожего на то, что я разработал, с прямоугольником и текстом, который должен двигаться вместе с прямоугольником. И автор использует тот же метод, который я использовал изначально. Так что, кажется, нет необходимости усложнять вещи. Просто сделай все.

http://thewayofcoding.com/2016/09/using-raphael-the-javascript-graphics-library/

...