看不到我在画什么，但我可以检查控制台以查看它是否正常工作，它也会上传到数据库

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

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