Przepraszam, że minęło trochę czasu, ale skończyłem bibliotekę, którą ci obiecałem. Przy jej pomocy można tworzyć układy, takie jak:
Utworzyłem uproszczony system rysowania w javascript, aby korzystać z budynku przez krótki library.Copy i wklej kod do niego na swojej stronie i zostaw to. Jeśli chcesz to zmienić, zapytaj mnie (lub kogoś, kto zna JavaScript), lub naucz się go na stronie internetowej, takiej jak W3Schools lub MDN Mozilli. Kod wymaga elementu canvas z identyfikatorem "canvas". Kod:
"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);
}
Następnie utwórz nowy <script type="text/javascript">....</script>
tag i umieścić pomiędzy znacznikami kod rysowania. Kod rysunku działa w ten sposób:
Zaczynasz od wywołania funkcji beginCircuit(x,y)
. Wewnątrz nawiasu wpisz współrzędne X i Y, od których chcesz zacząć swój obwód, na przykład: beginCircuit(200,100)
. Spowoduje to narysowanie drutu i baterii we wskazanych współrzędnych (w pikselach). Bateria i przewód zajmują razem 100 pikseli miejsca na ekranie.
Następnie można wywołać dowolną z następujących funkcji:
drawWire(length)
Rysuje przewód o długości określonej na końcu toru. Zajmuje length
ilość miejsca.
turnClockwise(length)
Powoduje obrót w kierunku, w którym następne polecenie wyświetli 90 ° zgodnie z ruchem wskazówek zegara. Nie zajmuje miejsca.
turnCounterClockwise(length)
Powoduje obrócenie kierunku, w którym następne polecenie zostanie obrócone o 90 ° w kierunku przeciwnym do ruchu wskazówek zegara. Nie zajmuje miejsca.
drawCapacitor(length)
Rysuje kondensator na końcu obwodu. Zajmuje 50px.
drawInductor(length)
Rysuje cewkę na końcu obwodu. Zajmuje 50px.
drawResistor(length)
Rysuje rezystor na końcu obwodu. Zajmuje 50px.
drawTrimmer(length)
Rysuje rezystor na końcu obwodu. Zajmuje 50px.
Kiedy skończysz rysowanie obwodów, użyj funkcji endCircuit()
zamknąć, a następnie narysować obwód. Automatycznie pobierze przewód od miejsca, w którym się zatrzymałeś, do początku obwodu.
Wiem, że jest wiele do zrobienia, ale to naprawdę jest bardzo łatwy i elastyczny sposób, aby to zrobić, gdy go zrozumieć. Jeśli chcesz zobaczyć to w akcji, przejdź tutaj: http://jsfiddle.net/mindoftea/ZajVE/. Daj mu szansę, a jeśli masz problemy, skomentuj to, proszę.
Dzięki i mam nadzieję, że to pomoże!
Więc czego potrzebujesz to szybki wstęp na rysowanie kształtów i linii dynamicznie z javascript? Czy mają być animowane? – mindoftea
@mndoftea To prawda. Animacje byłyby miłe, ale nie są konieczne. Nie zdawałem sobie sprawy, że będę musiał używać JavaScript. Moje tło to C/assembler/embedded. Mam przyzwoitą znajomość HTMLa na swój własny (np. HTML4), ale nie HTML5 ani JavaScript. – DevNull
Tak, o ile mi wiadomo, to jedyny sposób, aby korzystać z HTML5 canvas jest z javascript. Jeżeli nie jesteś animacji, nie trzeba robić bardzo dużo to dynamiczny, wpisz linie, które mają pomiędzy znacznikami skryptu. Napiszę jutro z jakimi liniami powinny być. – mindoftea