Übergeben ein Array zu Feed svg.js Polylinie Array-Methode löst einen Fehler

Question

Ich verwende svg.js 's Polyline-Array-Methode, um Linien von Werten zeichnen durch Speicherung der Cursor x, y-Koordinaten auf einer Seite.

Die Idee besteht darin, zuerst einen Benutzer die Seite durchsuchen und den Cursor bewegen und so Werte in das Array einspeisen, dann wird svg.js beim Klicken auf eine Schaltfläche Linien basierend auf der Bewegung des Cursors zeichnen.

Als this die Syntax folgen:

var polyline = draw.polyline([[0,0], [100,50], [50,100]]).fill('none').stroke({ width: 1 }) 

wenn ich manuell die Werte im Array wie in copy-paste:

var polyline = draw.polyline([[475,76], [475,76], [489,75], (...)]]).fill('none').stroke({ width: 1 }); 

svg.js wie erwartet funktioniert.

Wenn ich in eine Variable übergeben, sagt es mir dies:

svg.js:2632 Error: <polyline> attribute points: Expected number, "NaN,528 NaN,531 …". 

Dies ist mein Code:

// movement 
var array_cursor_movement = []; 
$(document).mousemove(function(e) { 
    var cursor_movement = "["+ e.pageX +","+ e.pageY +"]"; 
    array_cursor_movement.push(cursor_movement); 
    var cursor_movement = array_cursor_movement.join(', '); 
    console.log("movement:" + cursor_movement); 

    localStorage.setItem("cursor_movement_pos", JSON.stringify(array_cursor_movement)); 
}); 

// click for preview lines 
$(".preview--lines, .close--button").click(function(){ 
    $(".preview").toggleClass("show--hide"); 
    // draw lines 
    var retrievedData = localStorage.getItem("cursor_movement_pos"); 
    var array_cursor_movement_b = JSON.parse(retrievedData); 
    var cursor_movement = array_cursor_movement_b.join(', '); 
    cursor_movement = "["+cursor_movement+"]"; 
    console.log("preview:" + cursor_movement); 

    var width = window.innerWidth; 
    var height = window.innerHeight; 
    var draw = SVG('drawing').size(width, height); 
    var polyline = draw.polyline(cursor_movement).fill('none').stroke({ width: 1 }); 
}) 

Wer Erfahrung hat?

Danke, André

Answer 1

Wie ich bereits in den Kommentaren erwähnt: Stop Strings zu machen !! Pass einfach das Array!

// movement 
var array_cursor_movement = []; 
$(document).mousemove(function(e) { 
    // var cursor_movement = "["+ e.pageX +","+ e.pageY +"]"; // NO - stop making strings! 
    var cursor_movement = [ e.pageX, e.pageY ]; 

    array_cursor_movement.push(cursor_movement); 
    // var cursor_movement = array_cursor_movement.join(', '); // STOP 
    console.log("movement:", cursor_movement); 

    localStorage.setItem("cursor_movement_pos", JSON.stringify(array_cursor_movement)); 
}); 

// click for preview lines 
$(".preview--lines, .close--button").click(function(){ 
    $(".preview").toggleClass("show--hide"); 

    // draw lines 
    var retrievedData = localStorage.getItem("cursor_movement_pos"); 
    var array_cursor_movement_b = JSON.parse(retrievedData); 

    // var cursor_movement = array_cursor_movement_b.join(', '); // what did I say? 
    // cursor_movement = "["+cursor_movement+"]"; 
    // console.log("preview:", cursor_movement); 

    var width = window.innerWidth; 
    var height = window.innerHeight; 
    var draw = SVG('drawing').size(width, height); 

    // just pass the array and not the string 
    var polyline = draw.polyline(array_cursor_movement_b).fill('none').stroke({ width: 1 }); 
}) 

PS: Korrigierte Codepen: http://codepen.io/anon/pen/dMjgdO

// EDIT: Ich glaube, ich Dinge klarer machen: Wie gesagt, Sie sich die Syntax eine Polylinie zu erstellen, ist wie folgt:

var polyline = draw.polyline([[0,0], [100,50], [50,100]]).fill('none').stroke({ width: 1 }) 

Aber Sie haben versucht, dies stattdessen zu tun:

var polyline = draw.polyline("[[0,0], [100,50], [50,100]]").fill('none').stroke({ width: 1 }) 
          ^you notice the quotes here? 

So haben Sie nicht Übergeben Sie ein Array an die Funktion. Sie haben eine Zeichenfolge übergeben, die wie ein Array aussieht.

Beachten Sie, dass es eine andere Syntax ist eine Polylinie zu schaffen, das ist:

var polyline = draw.polyline('0,0 100,50 50,100').fill('none').stroke({ width: 1 }) 

Also eigentlich eine Zeichenkette passieren kann. Es ist nur eine Komma und Raum getrennte Liste. Aber tun Sie das nicht. Sie haben Ihr Array bereits erstellt. Du brauchst die Zeichenfolge nicht.