我正在使用 EaselJS 开发基于 2d 画布的应用程序，用户可以通过拖动背景在 xy 平面上无限移动。想想谷歌地图，除了背景是重复的瓷砖。
运动的代码非常简单，看起来像这样：
// container - the createjs.Container being panned
// background - a createjs.Shape child of container, on which the
// background is drawn
background.onPress = function(evt) {
var x = evt.stageX, y = evt.stageY;
evt.onMouseMove = function(evt) {
// the canvas is positioned in the center of the window, so the apparent
// movement works by changing the registration point of the container in
// the opposite direction.
container.regX -= evt.stageX - x;
container.regY -= evt.stageY - y;
x = evt.stageX;
y = evt.stageY;
stage.update();
};
evt.onMouseUp = function(evt) {
// Here the background would be redrawn based on the new container coords.
// However the issue occurs even before the mouse is released.
background.redraw();
stage.update();
};
};
所有工作都按预期工作，直到任一轴上达到 32678px (2^15)。在不同的浏览器中发生的事情是不同的，但它首先发生的点是相同的。
在 Firefox 中，它会突然移动一大块像素 (~100) 而不是 1。然后它会在 65538 (2^16+2) 处再次发生，之后可能会更多，但我没有亲眼目睹。在故障点之后，阻力将继续顺利，如预期的那样，但保持移动。
在 Chrome 中，效果更加显着。绘图中断并导致在 32768 处的页面上重复出现约 100 像素宽的背景“条纹”，并且在重绘时不会自行纠正。
奇怪的是，EaselJS 中的数字并没有反映这个问题。容器变换矩阵的唯一变化是txorty递增 1。其他矩阵没有变化。似乎EaselJS的所有数字都是正确的。
任何人都可以阐明这个问题吗？
编辑：
我通过使用计算的 regX/regY 重绘容器的某些部分来解决这个问题，而不是尝试在画布上转换非常大的 regX/regY 坐标。