我有一个canvas元素数组,每个元素都负责使用定义的函数与这些元素进行交互。
我这样做,虽然有问题。
每当我尝试通过socket.io传输当前单击的canvas元素时,似乎存在识别previousInfo变量的问题,该变量应该存储光标所在的信息。
示例:
canvas[i].onTouchStart = onTouchStartEventFunction;
canvas[i].onTouchMove = onTouchMoveEventFunction;
canvas[i].onTouchEnd = onTouchEndEventFunction;
这将创建canvas数组并将每个实例存储在数组中。
功能:
var onTouchStartEventFunction = function(info, index, count, event) {
draw(info.layerX, info.layerY, event.type, info.layerX, info.layerY, this);
socket.emit('touchevent', {
x: info.layerX,
y: info.layerY,
e: event.type,
px: info.layerX,
py: info.layerY,
idx: this
});
}
var onTouchMoveEventFunction = function(info, index, count, previousInfo, event) {
if(previousInfo === null)
{}
else {
document.getElementById("timer").innerHTML = "X: " + info.layerX + " Y: " + info.layerY + " pX:" + previousInfo.layerX + " pY:" + previousInfo.layerY;
draw(info.layerX, info.layerY, event.type, previousInfo.layerX, previousInfo.layerY, this);
socket.emit('touchevent', {
x: info.layerX,
y: info.layerY,
e: event.type,
px: previousInfo.layerX,
py: previousInfo.layerY,
idx: this
});
}
}
var onTouchEndEventFunction = function(info, index, count, event) {
draw(info.layerX, info.layerY, event.type, info.layerX, info.layerY, this);
socket.emit('touchevent', {
x: info.layerX,
y: info.layerY,
e: event.type,
px: info.layerX,
py: info.layerY,
idx: this
});
}
如果我没有通过套接字传递'idx:this',并且previousInfo按预期工作,那么一切正常。 但是,每当我开始使用'idx:this'时,pX和pY(previousInfo X和Y坐标)总是相同的,没有变化。
最糟糕的是,每个实例都会发生这种情况,无论我点击哪里,pX和pY点始终保持不变。
所以,鉴于此,有人能指出我做错了吗?
最好的问候
答案 0 :(得分:0)
似乎是我们的问题描述中缺少的东西,但我会尝试创建一个自我调用函数:
var onTouchEndEventFunction = function(info, index, count, event) {
draw(info.layerX, info.layerY, event.type, info.layerX, info.layerY, this);
(function (canvas) {
socket.emit('touchevent', {
x: info.layerX,
y: info.layerY,
e: event.type,
px: info.layerX,
py: info.layerY,
idx: canvas
});)(this);
}