将数组传递给 svg.js 的折线数组方法会引发错误

Question

我正在使用svg.js 的折线数组方法从通过将光标的 x,y 坐标存储在页面上记录的值绘制线条。

这个想法是首先让用户浏览页面并移动光标，然后将值输入数组，然后当单击按钮时，svg.js 将根据光标的移动绘制线条。

被this 遵循的语法：

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

如果我手动复制粘贴数组中的值，如下所示：

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

svg.js 按预期工作。

如果我传入一个变量，它会告诉我：

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

这是我的代码：

// 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 });
})

有人有经验吗？

谢谢， 安德烈

Answer 1

正如我在 cmets 中已经提到的：停止制作字符串！只需传递数组！

// 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：更正 Codepen：http://codepen.io/anon/pen/dMjgdO

// 编辑：我想我让事情更清楚： 正如您自己所说，创建折线的语法如下：

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

但您尝试这样做：

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

所以你没有将数组传递给函数。你传递了一个看起来像数组的字符串。

请注意，创建折线还有另一种语法：

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

所以你实际上可以传递一个字符串。它只是一个逗号和空格分隔的列表。但不要那样做。您已经创建了阵列。你不需要字符串。