html无限大画布,KonvaJS / HTML5画布无限循环tilemap。设定相机位置

我试图基于主“网格”创建无限循环的画布。在此处按比例缩小小提琴，使网格位于视口的中心。

在小提琴中，我的中心有彩色正方形的主网格，我希望它们在各个方向上都无限地平铺。显然，这实际上是不可能的，因此我想通过基于滚动方向重新绘制网格来给出无限的错觉。

最好的方法似乎是获取拖动方向，然后将摄影机重置到该点，以便图层在主画布视口下滚动，这意味着摄影机永远无法到达主视口画布的边缘。

我一直在为鼠标拖动添加一些事件侦听器：

var bMouseDown = false;

var oPreviousCoords = {

'x': 0,

'y': 0

}

var oDelta;

var oEndCoords;

var newLayerTop;

$(document).on('mousedown', function (oEvent) {

bMouseDown = true;

oPreviousCoords = {

'x': oEvent.pageX,

'y': oEvent.pageY

}

});

$(document).on('mouseup', function (oEvent) {

bMouseDown = false;

oPreviousCoords = {

'x': oEvent.pageX,

'y': oEvent.pageY

}

oEndCoords = oDelta

if(oEndCoords.y < -300){

if(newLayerTop){

newLayerTop.destroy();

}

layerCurentPosition = layer.position();

newLayerTop = layer.clone();

newLayerTop.position({

x: layerCurentPosition.x,

y: layerCurentPosition.y -1960

});

stage.add(newLayerTop)

stage.batchDraw();

}

});

$(document).on('mousemove', function (oEvent) {

if (!bMouseDown) {

return;

}

oDelta = {

'x': oPreviousCoords.x - oEvent.pageX,

'y': oPreviousCoords.y - oEvent.pageY

}

});

但是我无法可靠地算出每个方向的坐标，然后再算出如何重置相机位置。