HTML5 - 渲染简单的电路

Question

我有一套相对简单的电路.小型仅涉及电阻器,电容器,电感器和微调器/微调器(即:三端可变电阻器).

我试图找到一种从节点电压方程矩阵中渲染这些电路的简单方法.我不需要计算电流/电压值(我已经能够做到这一点).

我对如何在HTML5中渲染2D形状有基本的了解.在这一点上,我只需要一种简单的方法来通过线条放置和连接形状.我总是可以做一个简单的放置,但是关于如何避免重新发明轮子的任何建议都会很棒.

谢谢.

Answer 1

对不起已经有一段时间了,但我已经完成了我答应你的图书馆了.使用它,我可以创建这样的电路:

我已经在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);
            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/.请试一试,如果您有问题,请评论一下.

谢谢,希望这有帮助!