试图在 p5js 中存储 'undo' 函数的数组值

Question

我在 p5js 中制作了一种绘图应用程序 - 我有一个名为 points 的多维数组，它由形状组成，形状点具有 x、y 坐标。所以：

shapes[0][0] = [10,10]
shapes[1][3] = [47,98]

等等

我有一个 mousePressed 函数。在鼠标按下的时候，在操作这些形状的点之前，我想将原始形状数组存储为undoArr。

然后，当用户拖动鼠标时，shapes 数组中的坐标会更新。如果用户随后决定撤消，我有一个函数 keyPressed，我希望它能够用 undoArr 中的值填充 shapes 数组。

但无论我尝试什么 - 撤消数组和形状数组似乎始终具有相同的值，这很奇怪，因为如果我在形状数组中记录坐标状态：

function mousePressed() {
  if (!isMousePressed){
    undoArr = [...shapes]; //define undoArr as the current shapes array
    console.log(shapes[0][0]); //outputs 10,41 (for example)

然后在 mouseReleased 上记录状态：

function handleMouseReleased(){
    console.log(shapes[0][0]); //outputs 69,122 (for example)

我可以验证它们在开始和结束时有不同的值。而且我可以从日志中验证 mousePressed 不是在不应该被意外触发的情况下以某种方式意外触发的，对于 mouseReleased 也是如此。

P5js 有一个绘图功能，它根据用户用鼠标拖动它们的位置不断重新定位 shapes 数组的点。在那个绘图函数中，我可以放置一个日志语句并验证它在 mousePressed 之后和 mouseReleased.

之前触发

但是，如果我尝试将 shapes 数组的值存储在 mousePressed 上，undoArr = [...shapes] 然后在 keyPressed 上尝试使用 undoArr 的内容填充 shapes 数组，它什么都不做——因为不知何故 undoArr 总是包含与 shapes 相同的数据。

我复制数组不正确吗？我试过而不是传播 undoArr = shapes.slice() 但这也没有用。我什至尝试先清空数组，但似乎没有任何效果。

一个complete gist of the file is available here.

Answer 1

我认为您在这里需要的是多维数组的深度克隆。看起来你只是在复制引用而不是值。

传播运算符 ([...]) 不进行深度克隆，因此它复制的对象将包含引用。

Lodash 有一个很棒的 cloneDeep 函数：https://lodash.com/docs/4.17.11#cloneDeep

或者您可以自己编写一个。

试图在 p5js 中存储 'undo' 函数的数组值

trying to store array values for an 'undo' function in p5js

javascript

arrays

processing

p5.js

undo