Tegne en linje med javascript

magicgunnar · 18. juni 2007

Jeg bruker følgende kode for å tegne en linje med javascript (funnet på nettet):

function DrawLinVert( x, y, size, color){
var str;
if (x>=0 && y>=0 && size>0){
 str = '<div style="position:absolute; left:' + x + 'px; top:' + y +
 'px; width:1px; height:' + size + 'px;background-color:' + color +
 '"><table height=' + size + ' width=1></table></div>\n';
} else {
 str = '';
}
document.write(str);
}

Dette fungerer fint når scriptet kalles når siden lastes, men når scriptet kalles som følge av at brukeren klikker med musen så blir siden helt hvit og kun streken vises. Nettleseren virker som den laster siden, men det går flere minutter og ingenting skjer.

Er det noen som vet hva dette kan skyldes?

LostOblivion · 18. juni 2007

document.write() fungerer som regel bare når siden først blir skrevet. Jeg skjønner ikke helt hvorfor det er sånn, men jeg har lært meg å bruke noduler (nodes på godt engelsk). Lær deg å bruke dem hvis du vil lage 2D med JavaScript (praktisk til masse annet og selvfølgelig). Og sett inn div-tags med forskjellig koordinat.

La meg komme tilbake til deg med kode.

Endret 18. juni 2007 av LostOblivion

LostOblivion · 18. juni 2007

Jeg snakker ut av egen erfaring her når jeg sier at JavaScript virkelig ikke er det språket du burde kode i hvis du har lyst til å more deg med 2D-tegning (les: komplisert og treigt). :confused: Lær deg heller litt Java, det er mye morsommere, og omtrent like lett. For ikke å snakke om at det er et programmeringsspråk og ikke et scriptingspråk. F eks i stedet for å måtte lage egne funksjoner i JavaScript som tegner en strek, så er funksjonen i Java der allerede, og jobber mye raskere. Jeg lagde en slags fysikksimulasjon i JavaScript. Når det ble litt for mye å holde styr på for stakkars nettleseren, lærte jeg meg litt Java. Fungerer mye bedre.

Omtrent sånn her du tenkte?

Klikk for å se/fjerne innholdet nedenfor

<html>

<head>
<title>
Draw Line Function
</title>
<script>
var lineStartX, lineStartY, lineEndX, lineEndY;
mouseMoveOn = false;
document.onmousedown = function(e)
{
mouseMoveOn = true;
lineStartX = lineEndX = e.x || e.pageX;
lineStartY = lineEndY = e.y || e.pageY;
}
document.onmouseup = function(e)
{
mouseMoveOn = false;
drawLine(lineStartX, lineStartY, lineEndX, lineEndY, "blue", 1);
}
document.onmousemove = function(e)
{
if (!mouseMoveOn)
 return false;
lineEndX = e.x || e.pageX;
lineEndY = e.x || e.pageY;
}
function drawLine(startX, startY, endX, endY, color, thickness)
{
length = Math.sqrt(Math.pow(endX - startX, 2) + Math.pow(endY - startY, 2))
angle = Math.atan2(endX - startX, endY - startY);
for (i = 0; i < length; i++)
{
 pos = new Position(startX + i * Math.sin(angle), startY + i * Math.cos(angle));
 div = document.createElement("div");
 div.id = "line";
 div.style.position = "absolute";
 div.style.left = parseInt(pos.x) + "px";
 div.style.top = parseInt(pos.y) + "px";
 div.style.background = color;
 div.style.width = div.style.height = parseInt(thickness) + "px";
 document.body.appendChild(div);
}
}
function Position(x, y)
{
this.x = x;
this.y = y;
}
</script>
</head>

<body>
</body>

</html>

Endret 18. juni 2007 av LostOblivion

magicgunnar · 20. juni 2007

Kjempetakk for mye nyttig kode! Siden jeg bare trengte horisontale og vertikale linjer, droppet jeg for-løkken og satte heller høyden og bredden for å få riktig lengde på linjene.

I tilfelle noen andre benytter seg av informasjon i denne tråden og får de samme problemene som jeg fikk, nevner jeg to små ting som jeg ikke fikk til å funke og måtte forandre litt på:

document.onmousedown = function(e)
{

mouseMoveOn = true;

lineStartX = lineEndX = e.x || e.pageX;

lineStartY = lineEndY = e.y || e.pageY;

}

8889171[/snapback]

For meg virket det som om FF, krevde objektet event, mens IE mente at event ikke eksisterte. Derfor brukte jeg if-setninger istedet:

var x = (e) ? e.pageX : event.x;
var y = (e) ? e.pageY : event.y;

Jeg måtte også legge inn:

div.style.fontSize = "0px";

Edit: div.style.overflow = "hidden"; funker bedre enn fontSize.

For at de horisontale linjene ikke skulle bli 1 cm tykke i Explorer.

Endret 6. juli 2007 av magicgunnar

LostOblivion · 21. juni 2007

Ja stemmer kanskje det med IE og event. IE er helt på trynet spør du meg. Som regel i de fleste kodespråk, være det script eller programmering, så sendes vanligvis en event som et objekt til eventhandleren, hvor man da kan kalle det eventobjektet hva man vil innad i eventhandleren (funksjonen), men IE gidder tydeligvis ikke å følge denne konvensjonen... :ermm:

LostOblivion · 23. juni 2007

Men hvis du bare skal tegne rette linjer, burde du vurdere å bare gjøre dette i CSS.

magicgunnar · 6. juli 2007

Men hvis du bare skal tegne rette linjer, burde du vurdere å bare gjøre dette i CSS.

8927567[/snapback]

Jeg har prøvd å lese meg opp på CSS, som jeg er ganske grønn på, men jeg skjønner ikke helt hvorfor det vil være enklere å bruke det enn javascript?

Logg inn

Tegne en linje med javascript

Anbefalte innlegg

magicgunnar

Videoannonse

LostOblivion

LostOblivion

magicgunnar

LostOblivion

LostOblivion

magicgunnar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer