[英]Can't see what I am drawing, but I can check console to see it's working, also it uploads to database
Okay, if I have drawing.push(currentPath);
好的,如果我有drawing.push(currentPath);
under function startPath
then I can draw, and see the mouse X and Y in the console, also I can save my drawing, but I can't see what I am drawing, its all black.在function startPath
下,然后我可以绘制,在控制台中看到鼠标 X 和 Y,我也可以保存我的绘图,但我看不到我在画什么,全黑。 but if I change drawing.push(currentPath);
但如果我改变drawing.push(currentPath);
to drawing.push(currentPath.items);
到drawing.push(currentPath.items);
then I can see what I am drawing, but I can't save it to database because of array of nests.然后我可以看到我正在绘制的内容,但由于嵌套数组,我无法将其保存到数据库中。
Why I have so many nested array issues?为什么我有这么多嵌套数组问题? Even when trying to add option to change color?即使尝试添加更改颜色的选项?
(Still learning p5.js and firestore, kinda new here, Sorry for being so annoying) I am using p5.js and firebase(firestore). (还在学习 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);
}
}
The list of items is not drawing[i]
.项目列表不是drawing[i]
。 drawing[i]
is a dictionary. drawing[i]
是一本字典。 The property .items
of the dictionary contains the list of points.字典的属性.items
包含点列表。
Traverse drawing[i].items
when you draw the shape, to solve the issue:绘制形状时遍历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();
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.