Question

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

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

等

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

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

但是无论我如何尝试-似乎undo数组和shapes数组始终具有相同的值，这很奇怪，因为如果我将形状的状态记录在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上尝试用shapes的内容填充undoArr数组，它将什么也不做-因为undoArr总是包含与shapes相同的数据。

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

一个complete gist of the file is available here.

Answer 1

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

spread运算符（[...]）不会进行深层克隆，因此它复制的对象将包含引用。

Lodash具有出色的cloneDeep功能：https://lodash.com/docs/4.17.11#cloneDeep

或者您可以自己写一个。

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

1 个答案: