[英]Adding objects to array inside object
The following is my data
object.以下是我的
data
对象。
data = {
user: loggedInUser,
shape: 4,
width: currentThickness,
color: currentColor,
start_x: canvasX,
start_y: canvasY,
end_x: -1,
end_y: -1,
path_data: []
};
I would like to add some data to path_data
.我想向
path_data
添加一些数据。
data.path_data.push({
x: canvasX,
y: canvasY
});
But this doesn't seem to add anything to path_data
.但这似乎没有向
path_data
添加任何path_data
。
What can I do to add objects to path_data
?我该怎么做才能将对象添加到
path_data
?
Edit: the complete code is given here编辑:这里给出了完整的代码
var canvas;
var ctx;
var canvasWidth = 490;
var canvasHeight = 220;
var currentThickness;
var currentColor;
var data;
var message;
var webSocket;
var loggedInUser = "user";
var mouseDown = false;
window.onload = function() {
$(document).mousedown(function() {
mouseDown = true;
});
$(document).mouseup(function() {
mouseDown = false;
});
canvas = document.getElementById("canvas");
currentColor = $('#selectColor option:selected').val();
currentThickness = parseInt($('#selectThickness option:selected').val());
var canvasX;
var canvasY;
if (canvas) {
ctx = canvas.getContext("2d");
ctx.lineWidth = currentThickness;
$(canvas)
.mousedown(function(e) {
prepareStartPointPath(e);
})
.mousemove(function(e) {
if (mouseDown != false) {
canvasX = e.pageX - canvas.offsetLeft;
canvasY = e.pageY - canvas.offsetTop;
ctx.lineTo(canvasX, canvasY);
ctx.lineWidth = currentThickness;
ctx.strokeStyle = currentColor;
ctx.stroke();
data.path_data.push({
x: canvasX,
y: canvasY
});
}
})
.mouseup(function(e) {
prepareEndPointPath(e);
})
.mouseleave(function(e) {
if (mouseDown) {
prepareEndPointPath(e);
}
})
.mouseenter(function(e) {
if (mouseDown) {
prepareStartPointPath();
}
});
}
$('#selectColor').change(function() {
currentColor = $('#selectColor option:selected').val();
});
$('#selectThickness').change(function() {
currentThickness = parseInt($('#selectThickness option:selected').val());
});
};
function prepareWebSocket() {
console.log("preparing web socket");
webSocket = new WebSocket("ws://192.168.99.70:2012");
webSocket.onopen = function(evt) {
onOpen(evt)
};
webSocket.onclose = function(evt) {
onClose(evt)
};
webSocket.onmessage = function(evt) {
onMessage(evt)
};
webSocket.onerror = function(evt) {
onError(evt)
};
}
function onOpen(evt) {
console.log("Open");
}
function onClose(evt) {
console.log("Close");
}
function onMessage(evt) {
console.log("received: " + evt.data);
re(JSON.parse(evt.data));
}
function onError(evt) {
console.log(evt.data);
}
function prepareStartPointPath(e) {
var canvasX;
var canvasY;
ctx.beginPath();
canvasX = e.pageX - canvas.offsetLeft;
canvasY = e.pageY - canvas.offsetTop;0
data = {
user: loggedInUser,
shape: 4,
width: currentThickness,
color: currentColor,
start_x: canvasX,
start_y: canvasY,
end_x: -1,
end_y: -1,
path_data: []
};
ctx.moveTo(canvasX, canvasY);
ctx.lineWidth = currentThickness;
ctx.strokeStyle = currentColor;
}
function prepareEndPointPath(e) {
var canvasX;
var canvasY;
ctx.closePath();
canvasX = e.pageX - canvas.offsetLeft;
canvasY = e.pageY - canvas.offsetTop;
data.end_x = canvasX;
data.end_y = canvasY;
console.log(JSON.stringify(data));
}
你可以这样做: data.path_data={x:"canvasX",y:"canvasY"};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.