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

正如我在评论中已提到的：停止制作弦乐!!只需传递数组！

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

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

传递数组以提供svg.js的折线数组方法会引发错误

1 个答案: