HTML5 - Renderowanie prostych obwodów elektrycznych

Question

Mam zestaw stosunkowo prostych obwodów elektrycznych. Małe z udziałem tylko rezystorów, kondensatorów, cewek i trymerów/trimpotów (tj. Trzy-końcowe rezystory zmienne).

Próbuję znaleźć prosty sposób renderowania tych obwodów z macierzy równań napięcia węzłowego. Nie muszę obliczyć wartości prądu/napięcia (jestem już w stanie to zrobić).

Mam podstawową wiedzę na temat renderowania kształtów 2D w HTML5. W tym momencie potrzebuję prostego sposobu na umieszczenie i połączenie kształtów za pomocą linii. Zawsze mogłem zrobić proste rozmieszczenie, ale wszelkie sugestie, jak uniknąć ponownego wynalezienia koła, byłyby świetne.

Dziękuję.

Answer 1

Przepraszam, że minęło trochę czasu, ale skończyłem bibliotekę, którą ci obiecałem. Przy jej pomocy można tworzyć układy, takie jak:

Utworzyłem uproszczony system rysowania w javascript, aby korzystać z budynku przez krótki library.Copy i wklej kod do niego na swojej stronie i zostaw to. Jeśli chcesz to zmienić, zapytaj mnie (lub kogoś, kto zna JavaScript), lub naucz się go na stronie internetowej, takiej jak W3Schools lub MDN Mozilli. Kod wymaga elementu canvas z identyfikatorem "canvas". Kod:

 "use strict" 

     var wW=window.innerWidth; 
     var wH=window.innerHeight; 
     var canvasHTML=document.getElementById("canvas"); 
     canvasHTML.width=wW; 
     canvasHTML.height=wH; 
     var ctx=canvasHTML.getContext("2d"); 
     var ix; 
     var iy; 
     var x; 
     var y; 
     var d; 
     var dx; 
     var dy; 

     function beginCircuit(a,b) 
     { 
      ctx.lineWidth=1.5; 
      ctx.strokeStyle="#000"; 
      ctx.beginPath(); 
      x=a; 
      y=b; 
      d=0; 
      dx=1; 
      dy=0; 
      ix=x; 
      iy=y; 
      ctx.moveTo(x,y); 
      drawWire(50); 
      drawPower(); 
     } 

     function endCircuit() 
     { 
      ctx.lineTo(ix,iy); 
      ctx.stroke(); 
     } 

     function drawWire(l) 
     { 
      x+=dx*l; 
      y+=dy*l; 
      ctx.lineTo(x,y); 
     }  

     function drawPower() 
     { 
      var n; 
      drawWire(10); 
      n=3; 
      ctx.moveTo(x+10*dy,y+10*dx); 
      ctx.lineTo(x-10*dy,y-10*dx); 
      x+=dx*5; 
      y+=dy*5; 
      while(n--) 
      { 
       ctx.moveTo(x+15*dy,y+15*dx); 
       ctx.lineTo(x-15*dy,y-15*dx); 
       x+=dx*5; 
       y+=dy*5; 
       ctx.moveTo(x+10*dy,y+10*dx); 
       ctx.lineTo(x-10*dy,y-10*dx); 
       if(n!=0) 
       { 
        x+=dx*5; 
        y+=dy*5; 
       } 
      } 
      ctx.moveTo(x,y); 
      drawWire(10); 
     } 

     function drawCapacitor() 
     { 
      drawWire(22.5); 
      ctx.moveTo(x+10*dy,y+10*dx); 
      ctx.lineTo(x-10*dy,y-10*dx); 
      x+=dx*5; 
      y+=dy*5; 
      ctx.moveTo(x+10*dy,y+10*dx); 
      ctx.lineTo(x-10*dy,y-10*dx); 
      ctx.moveTo(x,y); 
      drawWire(22.5); 
     } 

     function drawInductor() 
     { 
      var n,xs,ys; 
      drawWire(9); 
      n=4; 
      xs=1+Math.abs(dy); 
      ys=1+Math.abs(dx); 
      x+=dx*6; 
      y+=dy*6; 
      ctx.scale(xs,ys); 
      while(n--) 
      { 
       ctx.moveTo(x/xs+5*Math.abs(dx),y/ys+5*dy); 
       ctx.arc(x/xs,y/ys,5,Math.PI/2*dy,Math.PI+Math.PI/2*dy,1); 
       x+=6.5*dx; 
       y+=6.5*dy; 
       if(n!=0) 
       { 
        if(dx>=0) 
        { 
         ctx.moveTo(x/xs-5*dx,y/ys-5*dy); 
        } 

        ctx.moveTo(x/xs-5*dx,y/ys-5*dy); 
        ctx.arc(x/xs-6.5/2*dx,y/ys-6.5/2*dy,1.5,Math.PI+Math.PI/2*dy,Math.PI/2*dy,1); 
       } 
      } 
      ctx.moveTo(x/xs-1.75*dx,y/ys-1.75*dy); 
      ctx.scale(1/xs,1/ys); 
      ctx.lineTo(x,y); 
      drawWire(9); 
     } 

     function drawTrimmer() 
     { 
      ctx.moveTo(x+35*dx-7*dy,y+35*dy-7*dx); 
      ctx.lineTo(x+15*dx+7*dy,y+15*dy+7*dx); 
      ctx.moveTo(x+13*dx+4*dy,y+13*dy+4*dx); 
      ctx.lineTo(x+17*dx+10*dy,y+17*dy+10*dx); 
      ctx.moveTo(x,y); 
      drawCapacitor(); 
     } 

     function drawResistor() 
     { 
      var n; 
      drawWire(10); 
      n=5; 
      x+=dx*5; 
      y+=dy*5; 
      while(n--) 
      { 
       ctx.lineTo(x-5*dy,y-5*dx); 
       ctx.lineTo(x+5*dy,y+5*dx); 
       x+=5*dx; 
       y+=5*dy; 
      } 
      ctx.lineTo(x,y); 
      drawWire(10); 
     } 

     function turnClockwise() 
     { 
      d++; 
      dx=Math.cos(1.570796*d); 
      dy=Math.sin(1.570796*d); 
     } 

     function turnCounterClockwise() 
     { 
      d--; 
      dx=Math.cos(1.570796*d); 
      dy=Math.sin(1.570796*d); 
     } 

Następnie utwórz nowy <script type="text/javascript">....</script> tag i umieścić pomiędzy znacznikami kod rysowania. Kod rysunku działa w ten sposób:

Zaczynasz od wywołania funkcji beginCircuit(x,y). Wewnątrz nawiasu wpisz współrzędne X i Y, od których chcesz zacząć swój obwód, na przykład: beginCircuit(200,100). Spowoduje to narysowanie drutu i baterii we wskazanych współrzędnych (w pikselach). Bateria i przewód zajmują razem 100 pikseli miejsca na ekranie.

Następnie można wywołać dowolną z następujących funkcji:

drawWire(length)

Rysuje przewód o długości określonej na końcu toru. Zajmuje length ilość miejsca.

turnClockwise(length)

Powoduje obrót w kierunku, w którym następne polecenie wyświetli 90 ° zgodnie z ruchem wskazówek zegara. Nie zajmuje miejsca.

turnCounterClockwise(length)

Powoduje obrócenie kierunku, w którym następne polecenie zostanie obrócone o 90 ° w kierunku przeciwnym do ruchu wskazówek zegara. Nie zajmuje miejsca.

drawCapacitor(length)

Rysuje kondensator na końcu obwodu. Zajmuje 50px.

drawInductor(length)

Rysuje cewkę na końcu obwodu. Zajmuje 50px.

drawResistor(length)

Rysuje rezystor na końcu obwodu. Zajmuje 50px.

drawTrimmer(length)

Rysuje rezystor na końcu obwodu. Zajmuje 50px.

Kiedy skończysz rysowanie obwodów, użyj funkcji endCircuit() zamknąć, a następnie narysować obwód. Automatycznie pobierze przewód od miejsca, w którym się zatrzymałeś, do początku obwodu.

Wiem, że jest wiele do zrobienia, ale to naprawdę jest bardzo łatwy i elastyczny sposób, aby to zrobić, gdy go zrozumieć. Jeśli chcesz zobaczyć to w akcji, przejdź tutaj: http://jsfiddle.net/mindoftea/ZajVE/. Daj mu szansę, a jeśli masz problemy, skomentuj to, proszę.

Dzięki i mam nadzieję, że to pomoże!