比較的単純な電気回路のセットがあります。抵抗器、コンデンサ、インダクタ、およびトリマー/トリムポットのみを含む小さなもの (つまり、3 端子可変抵抗器)。
ノード電圧方程式の行列からこれらの回路をレンダリングする簡単な方法を見つけようとしています。電流/電圧値を計算する必要はありません (私はすでにそれを行うことができます)。
HTML5 で 2D 形状をレンダリングする方法について基本的な理解があります。この時点で必要なのは、図形を線で配置して接続する簡単な方法だけです。私はいつでも簡単な配置を行うことができましたが、車輪の再発明を避ける方法についての提案は素晴らしいでしょう.
ありがとうございました。
申し訳ありませんが、しばらく経ちましたが、約束したライブラリを完成させました。それを使用して、次のような回路を作成できます。
簡単なライブラリを作成して使用できるように、javascript で簡略化された描画システムを作成しました。そのコードをコピーしてページに貼り付け、そのままにしておいてください。変更したい場合は、私 (または Javascript を知っている他の人) に尋ねるか、W3Schools や Mozilla MDN などの Web サイトで学んでください。このコードには、id "canvas" を持つ 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/にアクセスしてください。試してみてください。問題がある場合は、コメントしてください。
ありがとう、これが役立つことを願っています!