• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Javascript SVG

Hosting forpsi easy 1 pln
0 głosów
220 wizyt
pytanie zadane 31 stycznia 2022 w JavaScript przez Jcob2222 Początkujący (480 p.)
edycja 1 lutego 2022 przez Jcob2222

Dobry wieczór!

Chciałbym uzyskać efekt, żeby podczas przenoszenia kółka z podłączonymi liniami, wszystkie linie podążały za tym kółkiem. Niestety jak na razie udało mi się zrobić to dla jednej linii. Próbowałem już różnych metod, szukałem w Internecie i nic nie znalazłem.

Próbowałem to zrobić na pętli, ustawiając cx i cy dla każdej linii, która jest podłączona do kółka po id (path0, path1 itd.) lecz mi to nie działało. Proszę o pomoc.

PS. kółka łączy się liniami klikając na nie z przytrzymanym "ctrl"

Mam taki kod:

 

var moved_element_offsetLeft = 0,
    moved_element_offsetTop = 0, 
    mousedown = false,
    moved_element,
    cx = 50,
    mcx, 
    cy = 50,
    mcy, 
    x = 50,
    mx, 
    y = 50,
    my,
    zmienna = 1,
    actualX,
    actualClick,
    ActualTagL,
    ActualTagR,
    LRectX,
    LRectY,
    RRectX,
    RRectY,
    FirstClickLocationX = 0,
    FirstClickLocationY = 0,
    SecondClickLocationX = 0,
    SecondClickLocationY = 0,
    click_element,
    liczbaP = 0,
    correctClick,
    Mcircle,
    Mpath,
    zmiennik = 0,
    Arrow2X = 0,
    Arrow2Y = 0,
    Arrow3X = 0,
    Arrow3Y = 0,
    Apath,
    scx;

var svg = document.getElementById('container'); 


function AddCircle(){ 
    var group = document.createElementNS("http://www.w3.org/2000/svg", 'g');
    var circle = document.createElementNS("http://www.w3.org/2000/svg", 'circle');

    Mcircle = circle;

    group.id = "CircleGroup"+zmienna;
    svg.appendChild(group);
    
    circle.setAttribute("cx","50");
    circle.setAttribute("cy","50");
    circle.setAttribute("r","40");
    circle.setAttribute("fill","yellow");
    circle.setAttribute("position", "absolute");
    circle.setAttribute("display", "block");
    circle.id = "Circle"+ zmienna;
    circle.classList = zmienna + 1;

    group.appendChild(circle);

    group.addEventListener('mousedown', mouseClick, true);
    zmienna++;
}

function RemPath(){
  svg.removeChild(Mpath);
}


function AddRect(){
  var rect = document.createElementNS("http://www.w3.org/2000/svg", 'rect');
  rect.setAttribute("x","50");
  rect.setAttribute("y","50");
  rect.setAttribute("width","100");
  rect.setAttribute("height","100");
  rect.setAttribute("fill","blue");
  rect.setAttribute("position", "absolute");
  rect.setAttribute("display", "block");
  svg.appendChild(rect);
  rect.addEventListener('click', mouseClick, true)
}

function AddPath(){
    var LSecondClickLocationX = Number(SecondClickLocationX);
    var LSecondClickLocationY = Number(SecondClickLocationY);
    var LFirstClickLocationX = Number(FirstClickLocationX);
    var LFirstClickLocationY = Number(FirstClickLocationY);

    var path = document.createElementNS("http://www.w3.org/2000/svg", 'line');
    Mpath = path;
    var poly = document.createElementNS("http://www.w3.org/2000/svg", 'polygon');
    path.setAttribute("x1", LFirstClickLocationX);
    path.setAttribute("y1", LFirstClickLocationY);
    path.setAttribute("x2", LSecondClickLocationX);
    path.setAttribute("y2", LSecondClickLocationY);
    path.setAttribute("stroke", "red");
    path.setAttribute("stroke-width", "3");
    path.setAttribute("fill", "none");
    path.setAttribute("position", "absolute");
    path.setAttribute("display", "block");
    path.classList.add("path");
    path.id = "path" + liczbaP;
    liczbaP++;
    svg.appendChild(path); 


    /*Arrow2X = LSecondClickLocationX - 10;
    Arrow2Y = LSecondClickLocationY + 10;
    Arrow3X = LSecondClickLocationX - 10;
    Arrow3Y = LSecondClickLocationY - 10;

    poly.setAttribute("points", LSecondClickLocationX+","+LSecondClickLocationY+" "+Arrow2X+","+Arrow2Y+" "+Arrow3X+","+Arrow3Y);
    poly.setAttribute("fill", "red");
    poly.setAttribute("stroke", "red");
    poly.setAttribute("display", "block");
    poly.setAttribute("position", "absolute");
    poly.setAttribute("z-index", "10");

    svg.appendChild(poly);*/
}

function mouseClick(e) { 
  moved_element = e.target; 
  actualClick = moved_element.id;     
  const moved_element_rect = e.target.getBoundingClientRect();
  const margines_o = document.getElementById('container').getBoundingClientRect();
  moved_element_offsetLeft = e.clientX - moved_element_rect.left; 
  moved_element_offsetTop = e.clientY - moved_element_rect.top;

  if(e.ctrlKey){
    zmiennik = 1;
  }
  else{
    zmiennik = 0;
  }

  Mcircle.onmousedown = function MouseDownClick(){ 
    mousedown = true;
    moved_element.classList.add('mouse-down');
    moved_element.setAttribute('stroke', 'black');
    moved_element.setAttribute('stroke-width', '4');

  }
 
  Mcircle.onmouseup = function MouseUpClick(){
    mousedown = false;
    moved_element.classList.remove('mouse-down');
    moved_element.removeAttribute('stroke');
    moved_element.removeAttribute('stroke-width');

    if(zmiennik == 1){

      if((FirstClickLocationX == 0 && FirstClickLocationY == 0) || (FirstClickLocationX != 0 && FirstClickLocationY != 0 && SecondClickLocationX != 0 && SecondClickLocationY != 0)){
        FirstClickLocationX = moved_element.getAttribute("cx");
        FirstClickLocationY = moved_element.getAttribute("cy");
        
        SecondClickLocationX = 0;
        SecondClickLocationY = 0;
      }
      else if(FirstClickLocationX != 0 && FirstClickLocationY != 0 && SecondClickLocationX == 0 && SecondClickLocationY == 0){
        SecondClickLocationX = moved_element.getAttribute("cx");
        SecondClickLocationY = moved_element.getAttribute("cy");

        AddPath();
      }
    }
    moved_element = undefined;
  
  }
}
  
window.addEventListener('mousemove', (e) => {
  if (mousedown) { 
    if(moved_element=="[object SVGCircleElement]"){
      moved_element.setAttribute("cx", e.clientX - moved_element_offsetLeft + 40); 
      moved_element.setAttribute("cy", e.clientY - moved_element_offsetTop + 40);
 
      cx = e.clientX - moved_element_offsetLeft + 40;
      cy = e.clientY - moved_element_offsetTop + 40; 
    
      if(Mpath != undefined){
        if(document.querySelector('line[x1="'+cx+'"]') && document.querySelector('line[y1="'+cy+'"]')){
          Apath = document.querySelector('line[x1="'+cx+'"]').id;
        }else if(document.querySelector('line[x2="'+cx+'"]') && document.querySelector('line[y2="'+cy+'"]')){
          Apath = document.querySelector('line[x2="'+cx+'"]').id;
        }
      }
      
      
      if(Mpath != undefined){
        if(Mpath.getAttribute('x1') <= cx+20 && Mpath.getAttribute('x1') >= cx-20){
          Mpath.setAttribute('x1', cx);
          Mpath.setAttribute('y1', cy);
        }else if(Mpath.getAttribute('x2') <= cx+20 && Mpath.getAttribute('x2') >= cx-20){
          Mpath.setAttribute('x2', cx);
          Mpath.setAttribute('y2', cy);
        }
      }
    }
    else{
      moved_element.setAttribute("x", e.clientX - moved_element_offsetLeft); 
      moved_element.setAttribute("y", e.clientY - moved_element_offsetTop); 

      x = e.clientX - moved_element_offsetLeft +50;
      y = e.clientY - moved_element_offsetTop +50;
    
    }  
  } 
}, true);

 

<!DOCTYPE html>
<html>
    <head>
        <title>SVG</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style.css">
        <style>
              #container{
                    min-width: 1000px;
                    min-height: 700px;
                    background-color: rgb(87, 40, 40);
              }

             circle{
                    position: absolute;
                    display: block;
             }
       </style>
    </head>
    <body>
        <svg id="container">
            

        </svg>

        <button class="onclick" onclick="AddCircle()">Wstaw koło</button>
        <button class="onclick" onclick="AddPath()">Wstaw linię</button>
        <button class="onclick" onclick="RemPath()">Usuń linię</button>
        <script type="text/javascript" src="main.js"></script>
    </body>
</html>


 

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

Podobne pytania

0 głosów
0 odpowiedzi 159 wizyt
0 głosów
0 odpowiedzi 401 wizyt
0 głosów
0 odpowiedzi 150 wizyt
pytanie zadane 16 kwietnia w JavaScript przez AgentTecza Obywatel (1,810 p.)

92,125 zapytań

140,785 odpowiedzi

317,805 komentarzy

61,446 pasjonatów

Advent of Code 2023

Top 15 użytkowników

  1. 1468p. - Łukasz Eckert
  2. 1444p. - Dawid128
  3. 1430p. - CC PL
  4. 1419p. - rafalszastok
  5. 1418p. - Marcin Putra
  6. 1373p. - Mikbac
  7. 1362p. - rucin93
  8. 1351p. - sefirek
  9. 1325p. - Michal Drewniak
  10. 1296p. - Adrian Wieprzkowicz
  11. 1267p. - Eryk Andrzejewski
  12. 1260p. - TheLukaszNs
  13. 1239p. - JarekDev
  14. 1188p. - Rafał Trójniak
  15. 1179p. - 13NOONE37
Szczegóły i pełne wyniki

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Uwaga - w dniach od 02.12 do 08.12 trwają Mikołajki (książki drukowane mają rabat -35%, ebooki do -45%). Zaś dodatkowy, specjalny kod zniżkowy: HELMIKOLAJ-10 dla naszych Widzów zapewni Wam oszczędność -10zł dla zamówień powyżej 70zł! Warto korzystać!

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...