我试图找到一种从节点电压方程矩阵中渲染这些电路的简单方法.我不需要计算电流/电压值(我已经能够做到这一点).
我对如何在HTML5中渲染2D形状有基本的了解.在这一点上,我只需要一种简单的方法来通过线条放置和连接形状.我总是可以做一个简单的放置,但是关于如何避免重新发明轮子的任何建议都会很棒.
谢谢.
解决方法
我已经在javascript中创建了一个简化的绘图系统,您可以通过构建一个简短的库来使用它.将代码复制并粘贴到您的页面中,然后保留它.如果你想改变它,要么问我(或其他知道Javascript的人),要么在W3Schools或Mozilla MDN等网站上学习.代码需要一个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);
- x+=dx*5;
- y+=dy*5;
- ctx.moveTo(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,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(长度)
绘制一条在电路末端指定长度的导线.占用空间长度.
turnClockwise(长度)
转动下一个命令顺时针旋转90°的方向.没有空间.
turnCounterClockwise(长度)
转动下一个命令逆时针旋转90°的方向.没有空间.
drawCapacitor(长度)
在电路末端画一个电容.占50px.
drawInductor(长度)
在电路末端绘制一个电感.占50px.
drawResistor(长度)
在电路末端画一个电阻.占50px.
drawTrimmer(长度)
在电路末端画一个电阻.占50px.
完成绘图电路后,使用函数endCircuit()关闭然后绘制电路.它会自动从您停止的点到电路的开始画一条线.
我知道这很多事情要做,但是一旦理解了它,这真的是一种非常简单灵活的方法.如果你想看到这个,请到这里：http://jsfiddle.net/mindoftea/ZajVE/.请试一试,如果你有问题,请评论一下.
谢谢,希望这有帮助！
