HTML5 - 渲染簡單的電路

Question

我有一套相對簡單的電路。只涉及電阻器，電容器，電感器和修剪器/觸發器的小型器件（即：三端可變電阻器）。

我想找到一個簡單的方法來渲染這些電路從節點電壓方程的矩陣。我不需要計算電流/電壓值（我已經能夠做到這一點）。

我對如何在HTML5中呈現2D形狀有基本的瞭解。在這一點上，我只需要一種簡單的方法來通過線條放置和連接形狀。我總是可以做一個簡單的放置，但是如何避免重新發明輪子的任何建議都會很棒。

謝謝。

Answer 1

對不起，這是一段時間，但我已經完成了我答應你的圖書館。使用它，我可以創造這樣的電路：

我創建了一個簡單的繪圖系統，在JavaScript爲你建設一個短library.Copy使用，它的代碼粘貼到您的網頁，然後離開它。如果你想改變它，或者問我（或者其他知道Javascript的人），或者在像W3Schools或Mozilla MDN這樣的網站上學習它。該代碼需要一個id爲「canvas」的畫布元素。代碼：

 "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); 
     } 

然後創建一個新<script type="text/javascript">....</script>標籤和標籤之間把你的繪製代碼。繪圖代碼的工作原理如下：

您首先調用函數beginCircuit(x,y)。在圓括號內，放置你想要開始電路的x和y座標，如下所示：beginCircuit(200,100)。這將在您指定的座標處繪製電線和電池（以像素爲單位）。電池和電線一起佔用屏幕上100個像素的空間。

然後，可以調用任何以下功能：

drawWire(length)

繪製你在電路的端部指定的長度的線材。佔用空間量length。

turnClockwise(length)

轉動下一個命令將順時針繪製90°的方向。不佔用空間。

turnCounterClockwise(length)

打開下一個命令將逆時針旋轉90°的方向。不佔用空間。

drawCapacitor(length)

在電路的末端繪製電容器。佔用50px。

drawInductor(length)

在電路的末端繪製一個電感。佔用50px。

drawResistor(length)

在電路的末端繪製一個電阻。佔用50px。

drawTrimmer(length)

在電路的末端繪製一個電阻。佔用50px。

完成繪圖電路後，使用功能endCircuit()關閉然後繪製電路。它會自動從您停下的地方開始畫一條電線到電路的開始處。

我知道需要做很多事情，但一旦理解它，它確實是一種非常簡單和靈活的方式。如果你想看到這個行動，去這裏：http://jsfiddle.net/mindoftea/ZajVE/。請給它一個鏡頭，如果你有問題，請評論一下。

謝謝，希望這有助於！