无法看到我正在绘制的内容，但是我可以检查控制台以查看其是否正常运行，并且它还可以上传到数据库中

Question

[好吧，如果我在drawing.push(currentPath);下有function startPath，那么我可以绘图，并在控制台中看到鼠标X和Y，也可以保存我的绘图，但看不到我正在绘图的内容，全部黑色。但是，如果我将drawing.push(currentPath);更改为drawing.push(currentPath.items);，则可以看到正在绘制的内容，但是由于嵌套数组的原因，无法将其保存到数据库中。

1. 我在这里有什么选择？
2. 如何使此代码更好？
3. 如何查看正在绘制的内容而不在嵌套中数组？（因为firebase不允许使用。）

为什么我有这么多的嵌套数组问题？即使试图添加选项来更改颜色？

（（仍在学习p5.js和firestore，在这里有点新，对不起，真烦人）我正在使用p5.js和firebase（firestore）。

// Get a reference to the database service
//var database = firebase.database();

var drawing = [];
var currentPath = { items:[] };
var isDrawing = false;

function setup() {
    canvas = createCanvas(400,400);
    canvas.mousePressed(startPath);
    canvas.mouseReleased(endPath);
    canvas.parent('canvas');

    var saveButton = select('#saveButton');
    saveButton.mousePressed(saveDrawing);
}

function startPath() {
    isDrawing = true;
    currentPath = { items:[] }
    drawing.push(currentPath);
}

function endPath() {
    isDrawing = false;
}

function draw() {
    background(0);

    if (isDrawing){
        var point = {
            x: mouseX,
            y: mouseY
        }
    currentPath.items.push(point);
    }

    stroke(255);
    strokeWeight(7);
    noFill();
    for (var i = 0; i < drawing.length; i++) {
        var path = drawing[i];
        beginShape();
        for (var k = 0; k < path.length; k++) {
            vertex(path[k].x, path[k].y)
        }
        endShape();
    }
}

function saveDrawing(){
    db.collection('joonistused').add({
        drawing: drawing
    });
    var result = ref.push(data, dataSent);
    console.log(result.key)

    function dataSent(status) {
        console.log(status);
    }
}

Answer 1

项目列表不是drawing[i]。 drawing[i]是字典。字典的属性.items包含点列表。

绘制图形时遍历drawing[i].items，以解决问题：

function draw() {

    // [...]

    for (var i = 0; i < drawing.length; i++) {

        var path = drawing[i].items; // <-----

        beginShape();
        for (var k = 0; k < path.length; k++) {
            vertex(path[k].x, path[k].y)
        }
        endShape();
    }
}