html5 kineticjs dessine plusieurs lignes

Question

Comme trouvé ici: KineticJs - lignes de dessin avec la souris

Kineticjs fonctionne très bien pour dessiner des lignes, des formes et des traînées. L'exemple actuel redessinait toujours la même ligne, je me demande comment dessiner plusieurs lignes (plus modifiables) sur la scène afin d'exporter le tirage au sort comme image.

Answer 1

Vous pouvez créer une nouvelle ligne et l'ajouter au calque sur MouseDown.

        stage.on("mousedown", function(){
            if (moving){
                moving = false;layer.draw();
            } else {
                var mousePos = stage.getMousePosition();
                //CHANGED - Create new line
                line = new Kinetic.Line({
                    points: [0, 0, 50, 50],
                    stroke: "red"
                });
                //CHANGED - Add line to layer
                layer.add(line);
                //start point and end point are the same
                line.getPoints()[0].x = mousePos.x;
                line.getPoints()[0].y = mousePos.y;
                line.getPoints()[1].x = mousePos.x;
                line.getPoints()[1].y = mousePos.y;

                moving = true;    
                layer.drawScene();            
            }

        });

Vérifiez la démonstration: http://jsfiddle.net/qtsgn/