HTML5 - 渲染简单的电路

Question

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

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

我对如何在 HTML5 中呈现二维形状有基本的了解。此时，我只需要一种简单的方法来通过线条放置和连接形状。我总是可以做一个简单的放置，但任何关于如何避免重新发明轮子的建议都会很棒。

谢谢。

Answer 1

抱歉，已经有一段时间了，但我已经完成了我向你 promise 的图书馆。使用它，我可以创建如下电路:

我已经在 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/ .请试一试，如果您有问题，请发表评论。

谢谢，希望这对您有所帮助!