看不到我在畫什么，但我可以檢查控制台以查看它是否正常工作，它也會上傳到數據庫

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();
        }
    }
}