HTML5 - Basit elektrik devrelerini işleyin

Question

Göreceli olarak basit elektrik devreleri var. Sadece dirençler, kondansatörler, indüktörler ve düzelticiler/trimpots'lar içeren küçük olanlar (yani: üç terminalli değişken dirençler).

Bu devreleri, düğüm voltaj denklemlerinin matrisinden işlemek için basit bir yol bulmaya çalışıyorum. Akım/gerilim değerlerini hesaplamama gerek yok (bunu zaten yapabilirim).

2B şekillerinin HTML5'te nasıl oluşturulacağına dair temel bilgilerim var. Bu noktada, şekilleri çizgilerle yerleştirmek ve birbirine bağlamak için basit bir yönteme ihtiyacım var. Her zaman basit bir yerleştirme yapabilirim, ancak tekerleği yeniden icat etmekten nasıl kaçınacağınız konusunda her türlü öneri harika olurdu.

Teşekkür ederiz.

Answer 1

Maalesef biraz zaman geçti, ama söz verdiğim kütüphaneyi bitirdim. Bunu kullanarak, bunlar gibi devreleri oluşturabilirsiniz:

kısa library.Copy kurarak kullanmak ve sayfanızda bunun için kodu yapıştırın için Javascript basitleştirilmiş bir çizim sistemi oluşturduk, ve sonra bırakın. Bunu değiştirmek isterseniz, ya bana (veya Javascript bilen birisine) sorun veya W3Schools ya da Mozilla MDN gibi bir web sitesinde öğrenin. Kod, "kanvas" kimliğine sahip bir tuval öğesi gerektirir. 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); 
     } 

Sonra yeni <script type="text/javascript">....</script> etiketi oluşturmak ve etiketleri arasına çizim kodu koymak. Çizim kodu şu şekilde çalışır: beginCircuit(x,y) işlevini çağırarak başlarsınız. Parantez içinde, devrenizi başlatmak istediğiniz x ve y koordinatlarını şu şekilde yapın: beginCircuit(200,100). Bu, bir kabloyu ve belirttiğiniz koordinatlardaki (piksel cinsinden) bir pil çeker. Pil ve kablo birlikte ekranda 100 piksel yer kaplıyor.

Daha sonra, aşağıdaki fonksiyonların bir çağırabilir:

drawWire(length)

devrenin sonunda belirtmek uzunlukta bir kablo çizer. length yer tutar.

turnClockwise(length)

Bir sonraki komutunuzun saat yönünde 90 ° çizeceği yönü döndürür. Boş yer kalmadı.

turnCounterClockwise(length)

Bir sonraki komutunuzun saat yönünün tersine 90 ° çizeceği yönü döndürür. Boş yer kalmadı.

drawCapacitor(length)

Devrenin sonunda bir kondansatör çizer. 50px alır.

drawInductor(length)

Devrenin sonunda bir indüktör çizer. 50px alır.

drawResistor(length)

Devrenin sonunda bir direnç çeker. 50px alır.Devrenin sonunda bir rezistans çizer.

Devrenin sonunda bir direnç çeker. 50px alır.

Çizim devresi bittiğinde, kapatmak için endCircuit() işlevini kullanın ve sonra devreyi çizin. Devrenin başlangıcına kadar durduğunuz noktadan otomatik olarak bir tel çeker.

Yapılması gereken bir çok şey olduğunu biliyorum, ancak bunu anladığınızda bunu yapmak çok kolay ve esnek bir yöntem. Bunu eylem halinde görmek isterseniz buraya gidin: http://jsfiddle.net/mindoftea/ZajVE/. Lütfen bir şans verin ve sorunlarınız varsa yorum yapın, lütfen.

Teşekkürler ve umarım bu yardımcı olur!