Hallo,
wich wollte mit Javascript ein "Malprogramm" erstellen. Ich erstelle einfach ein Span mit den Maßen 1x1 Pixeln, das die Hintergrundfarbe #FF0000 hat mit der Position des Cursors. Jetzt werden aber nur solche Punkte gelmalt, die nicht verbunden sind, da dachte ich mit, dass ich einfach Linien zwichen den Punkten zeichne und da ist auch schon mein Problem: Die Linien werden nicht von Punkt zu Punkt gezeichnet, sondern irgendwo anders...
Wenn aber die Funktion doLine() aufgerufen wird zeichnet er die Linie Perfekt....
Was habe ich falsch gemacht?
Achso: Ich möchte es nicht mit Flash machen, sondern mit Javascript! http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm habe ich auch bereits gefunden, ich möchte es aber lieber über meine Span-Methode machen, da ich dann auch schon vorhandene Punkte anders färben kann......
Wäre sehr nett wenn ihr mir helfen würdet.
wich wollte mit Javascript ein "Malprogramm" erstellen. Ich erstelle einfach ein Span mit den Maßen 1x1 Pixeln, das die Hintergrundfarbe #FF0000 hat mit der Position des Cursors. Jetzt werden aber nur solche Punkte gelmalt, die nicht verbunden sind, da dachte ich mit, dass ich einfach Linien zwichen den Punkten zeichne und da ist auch schon mein Problem: Die Linien werden nicht von Punkt zu Punkt gezeichnet, sondern irgendwo anders...
Code:
<script type="text/javascript">
var doPainting = false;
var lastPixelX = 0;
var lastPixelY = 0;
function setPixel(x, y) {
pixel = document.createElement("span");
pixel.style.position = "absolute";
pixel.style.left = x + "px";
pixel.style.top = y + "px";
pixel.style.width = "1px";
pixel.style.height = "1px";
pixel.style.backgroundColor = "#FF0000";
document.body.appendChild(pixel);
}
function drawLine(x1, y1, x2, y2) {
if (x1 < x2 && y1 < y2) {
from = x1;
to = x2;
n = x2 / y2;
/*
\
\
\
\
v
*/
for (x = from; x <= to; x++) {
y = x * n;
setPixel(x, y);
}
document.getElementById("anz").innerHTML = "1";
}
else if (x1 > x2 && y1 > y2) {
from = x2;
to = x1;
n = x2 / y2;
/*
^
\
\
\
\
*/
for (x = from; x <= to; x++) {
y = x * n;
setPixel(x, y);
}
document.getElementById("anz").innerHTML = "2";
}
else if (x1 > x2 && y1 < y2) {
from = x2;
to = x1;
n = x1 / y2;
/*
/
/
/
/
/
v
*/
for (x = from; x <= to; x++) {
y = x1 - (x * n);
setPixel(x, y);
}
document.getElementById("anz").innerHTML = "3";
}
else if (x1 < x2 && y1 > y2) {
from = x1;
to = x2;
n = y1 / x2;
/*
^
/
/
/
/
/
*/
for (x = from; x <= to; x++) {
y = x2 - (x * n);
setPixel(x, y);
}
document.getElementById("anz").innerHTML = "4";
}
}
function doLine() {
drawLine(10, 100, 100, 1);
}
function getMousePosition(evt) {
pos = new Array();
pos['x'] = evt ? evt.pageX : window.event.x;
pos['y'] = evt ? evt.pageY : window.event.y;
return pos;
}
function startPaint(evt) {
doPainting = true;
mousePosition = getMousePosition(evt);
setPixel(mousePosition['x'], mousePosition['y']);
lastPixelX = mousePosition['x'];
lastPixelY = mousePosition['y'];
}
function doPaint(evt) {
if (doPainting == true) {
mousePosition = getMousePosition(evt);
setPixel(mousePosition['x'], mousePosition['y']);
drawLine(lastPixelX, lastPixelY, mousePosition['x'], mousePosition['y']);
lastPixelX = mousePosition['x'];
lastPixelY = mousePosition['y'];
}
}
function stopPaint() {
doPainting = false;
}
</script>
<body onload="doLine();" onmousedown="startPaint(event);" onmousemove="doPaint(event);" onmouseup="stopPaint();">
<div id="anz"></div>
</body>Wenn aber die Funktion doLine() aufgerufen wird zeichnet er die Linie Perfekt....
Was habe ich falsch gemacht?
Achso: Ich möchte es nicht mit Flash machen, sondern mit Javascript! http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm habe ich auch bereits gefunden, ich möchte es aber lieber über meine Span-Methode machen, da ich dann auch schon vorhandene Punkte anders färben kann......
Wäre sehr nett wenn ihr mir helfen würdet.
Zuletzt bearbeitet:
