我试图找到一种从节点电压方程矩阵中渲染这些电路的简单方法.我不需要计算电流/电压值(我已经能够做到这一点).
我对如何在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/.请试一试,如果你有问题,请评论一下.
谢谢,希望这有帮助!