Realtime lijnen tekenen met JavaScript - Softwareontwikkeling

vrijdag 23 oktober 2009 12:34

Acties:

0 Henk 'm!

Topicstarter

Voor een opdracht wil ik in de browser een lijn kunnen trekken, zoals je dat ook kan in mspaint en andere tekentools. Niks spannends dus. Ik wil die lijn realtime renderen, maar dat gaat niet zoals ik dat wil. Bij kleine lijntjes van 1 tot 2cm gaat het perfect, maar bij grotere lijnen gaat het haperen.

Ik heb wat rond gegoogled naar andere oplossing en ik kwam op deze site uit:

http://draw.labs.autodesk.com/ADDraw/draw.html

In die tool kan ik lijnen trekken zo lang als ik wil, de browser kan het prima bijhouden. Aangezien het niet in alle browsers werkt (IE6+, FF1.5+ supported) denk ik dat ze gebruik maken van een speciale techniek. Wie heeft de oplossing?

vrijdag 23 oktober 2009 12:59

Acties:

0 Henk 'm!

André

Analytics dude

Ik moet direct denken aan Pellepaint, maar ik weet zo niet of die nog online is?

/edit:
In het topic daarover staan allemaal maar oude links, de enige die werkt is deze:
http://www.xs4all.nl/~peterned/got/claypaint/

[ Voor 46% gewijzigd door André op 23-10-2009 13:03 ]

vrijdag 23 oktober 2009 13:03

Acties:

0 Henk 'm!

Willem

Pellepaint was vlakjes, geen lijnen. Dus veel klikken=lijn.
Mijn eerste reactie bij het lezen van je post was overigens

vrijdag 23 oktober 2009 13:10

Acties:

0 Henk 'm!

T i M

Topicstarter

Ik heb Litha-Paint gevonden, die maakt gebruik van de wz_jsgraphics library. Daar heb ik ook mee gespeeld, maar daarmee kwam ik niet tot het gewenste resultaat. Poging 2 dus.

vrijdag 23 oktober 2009 13:30

Acties:

0 Henk 'm!

crisp

Devver

Pixelated

In CrispyPaint had ik wel linedraw-support, maar ook dat is uiteindelijk pixel-based...

Intentionally left blank

vrijdag 23 oktober 2009 13:46

Acties:

0 Henk 'm!

T i M

Topicstarter

Ik heb nu de volgende code. Ik heb een drag & drop scriptje aangepast, zodat ik lijnen kan trekken. Zou iemand even mee willen kijken. Het benodigde .js bestand kan je hier vinden: http://www.walterzorn.com/scripts/wz_jsgraphics.zip

Litha-Paint maakt gebruik van dezelfde library en daar kan ik de "lijn trek tool" wel smooth gebruiken. Waarschijnlijk is de manier waarop ik het wil gebruiken niet de juiste manier

.

HTML:

<html>

<head>
<script type="text/javascript" src="wz_jsgraphics.js"></script>

</head>

<body>
<div id="myCanvas" style="border: 1px solid black;height:1000px;width:100%;">

</div>


</body>
<script>
    dragAbleObject("myCanvas");
    function dragAbleObject(id) {
        var element = document.getElementById(id);
        var that = this;
        var e;
        var target;
        var _startX = 0;
        var _startY = 0;
        var _oldZIndex;
        var _dragElement;
        
        this.parseIntiger = function(int) {
            int = (!isNaN(int)) ? 0 : parseFloat(int);
            
            return int;
        }
        
        element.onmousedown = function(e)
        {
            e = (window.event == null) ? e : window.event;
            target = (e.target != null) ? e.target : e.srcElement;          
    
            _startX = e.clientX;        
            _startY = e.clientY;
            _dragElement = true;
            document.onmousemove = that.onMouseMove;
        }
        
        document.onmouseup = function() {
            _dragElement = false;
        }
        
        this.onMouseMove = function(e)  {
            if (_dragElement) {
                e = (window.event == null) ? e : window.event;
            
                _mkLin(_startX, _startY,  e.clientX,  e.clientY);
            
                document.getElementById("myCanvas").innerHTML = htm;    
                htm = "";
            }
        }
    }


color = "#000000";


</script>

</html>

[ Voor 13% gewijzigd door T i M op 23-10-2009 13:49 ]

vrijdag 23 oktober 2009 13:49

Acties:

0 Henk 'm!

Joen

willem169 schreef op vrijdag 23 oktober 2009 @ 13:03:
Pellepaint was vlakjes, geen lijnen. Dus veel klikken=lijn.
Mijn eerste reactie bij het lezen van je post was overigens

Hij is inderdaad wel vet

vrijdag 23 oktober 2009 14:11

Acties:

0 Henk 'm!

.oisyn

Moderator Devschuur®

Demotivational Speaker

T i M schreef op vrijdag 23 oktober 2009 @ 12:34:
http://draw.labs.autodesk.com/ADDraw/draw.html

In die tool kan ik lijnen trekken zo lang als ik wil, de browser kan het prima bijhouden. Aangezien het niet in alle browsers werkt (IE6+, FF1.5+ supported) denk ik dat ze gebruik maken van een speciale techniek. Wie heeft de oplossing?

Een DOM inspector had natuurlijk al wat meer informatie geboden. In Chrome gebruiken ze <svg>. In IE blijkbaar een proprietary <line> tag.

Give a man a game and he'll have fun for a day. Teach a man to make games and he'll never have fun again.

vrijdag 23 oktober 2009 14:15

Acties:

0 Henk 'm!

McVirusS

Je zou natuurlijk ook Flash kunnen gebruiken, die heeft gewoon een mooie drawing API. Maar goed dat was je vraag niet natuurlijk

.

Je zou het eventueel kunnen combineren met een PHP serverside techniek? En dan coördinaten teruggeven aan een script die daarvan dan een image maakt.

vrijdag 23 oktober 2009 14:33

Acties:

0 Henk 'm!

T i M

Topicstarter

McVirusS schreef op vrijdag 23 oktober 2009 @ 14:15:
Je zou natuurlijk ook Flash kunnen gebruiken, die heeft gewoon een mooie drawing API. Maar goed dat was je vraag niet natuurlijk .

Je zou het eventueel kunnen combineren met een PHP serverside techniek? En dan coördinaten teruggeven aan een script die daarvan dan een image maakt.

Dat is natuurlijk stukken trager dan hetgeen wat ik nu al heb

. Het is de bedoeling dat er in de webomgeving iets getekend kan worden en vervolgens bakt PHP er een image van.

vrijdag 23 oktober 2009 15:05

Acties:

0 Henk 'm!

Cartman!

Dan is Flash wellicht niet eens een gek idee, dan kun je vanuit Flash de raw png data naar PHP sturen en die direct opslaan, hoef je ook niet met coordinaten te klooien.

vrijdag 23 oktober 2009 15:14

Acties:

0 Henk 'm!

T i M

Topicstarter

Cartman! schreef op vrijdag 23 oktober 2009 @ 15:05:
Dan is Flash wellicht niet eens een gek idee, dan kun je vanuit Flash de raw png data naar PHP sturen en die direct opslaan, hoef je ook niet met coordinaten te klooien.

De bedoeling is om eerst een XML template te genereren van het plaatje, zodat je het plaatje weer kunt heropbouwen in javascript. Ook worden een aantal onderdelen dragable, en dat gaat niet meer lukken als je er meteen een png van bakt.

vrijdag 23 oktober 2009 19:29

Acties:

0 Henk 'm!

Cartman!

Dat klopt maar je kunt alsnog de vectordata van het tekenen opslaan in json of xml en dan kun je t ook wel weer opbouwen. Je zei net zelf alleen dat PHP er een image van bakt dus das ineens een andere requirement.

edit: ik denk ieder geval dat flash dat kan, kwestie van coordinaten opslaan zoals je dat in JS anders ook zou moeten doen.

[ Voor 22% gewijzigd door Cartman! op 23-10-2009 19:46 ]

zaterdag 24 oktober 2009 13:59

Acties:

0 Henk 'm!

Bozozo

Your ad here?

Vector graphics tekenen is waar Flash voor is gemaakt. In Javascript is het een crossbrowser nachtmerrie. Voor het opslaan van XML of het exporteren van een plaatje ben je in JavaScript totaal afhankelijk van communicatie met de server (AJAX) en dat kan ook gewoon in Flash (URLLoader class).

Ik raad je sterk af om veel tijd te investeren in het aanmodderen met JavaScript voor deze toepassing.

TabCinema : NiftySplit

zaterdag 24 oktober 2009 16:45

Acties:

0 Henk 'm!

XiniX88

En ik niet... De oplossing heet canvas, IE kan dit ook

Zelfs IE6 (IE5 heeft ook canvas)

http://caimansys.com/painter/

tadaa

Okey, je addraw werkt ook met een canvas element... Dus dat zou dan even goed moeten werken (misschien is de javascript niet altijd even compatible daar met oudere versies).

Vector tekenen kan inderdaad in 2 vormen: Flash of Javascript + Canvas (DUS niet alleen in Flash, zoals bovenstaande poster laat blijken). Flash heeft een addon nodig, Canvas heeft binnen IE een activeX element nodig (maar deze is altijd aanwezig). Met JQuery je javascript aanroepen, en je weet zeker dat het crossbrowser werkt.

[ Voor 73% gewijzigd door XiniX88 op 24-10-2009 16:51 ]

maandag 26 oktober 2009 21:31

Acties:

0 Henk 'm!

T i M

Topicstarter

XiniX88 schreef op zaterdag 24 oktober 2009 @ 16:45:
En ik niet... De oplossing heet canvas, IE kan dit ook Zelfs IE6 (IE5 heeft ook canvas)

http://caimansys.com/painter/

tadaa

Okey, je addraw werkt ook met een canvas element... Dus dat zou dan even goed moeten werken (misschien is de javascript niet altijd even compatible daar met oudere versies).

Vector tekenen kan inderdaad in 2 vormen: Flash of Javascript + Canvas (DUS niet alleen in Flash, zoals bovenstaande poster laat blijken). Flash heeft een addon nodig, Canvas heeft binnen IE een activeX element nodig (maar deze is altijd aanwezig). Met JQuery je javascript aanroepen, en je weet zeker dat het crossbrowser werkt.

Ik ga morgen weer verder met mijn project. Alvast een dikke merci voor het posten van bovenstaande link, daar kan ik wat mee!

Flash gebruiken heb ik overwogen, het probleem is dat ik daar geen kennis van heb. Als de Javascript optie achteraf voor problemen gaat zorgen dan kan ik alsnog zoeken naar alternatieven.