我正在使用 EaselJS 开发一个基于 2d Canvas 的应用程序,用户可以通过拖动背景在 xy 平面上无限移动。想想谷歌地图,除了背景是一个重复的图 block 。
移动的代码非常简单,看起来像这样:
// 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();
};
};
所有工作均按预期直到在任一轴上达到 32678 像素 (2^15)。在不同的浏览器中发生的情况不同,但它首先发生的点是相同的。
在 Firefox 中,它会突然移动一大块像素 (~100) 而不是 1。然后它会再次发生在 65538 (2^16+2),也许在那之后更多,但我还没有亲眼目睹.在故障点之后,阻力将如预期的那样平稳地继续,但仍会发生偏移。
在 Chrome 中,效果更为显着。绘图中断并导致在 32768 处的页面上重复出现约 100 像素宽的背景“条纹”,并且在重绘时不会自行纠正。
奇怪的是,EaselJS 中的数字并未反射(reflect)该问题。容器变换矩阵中的唯一变化是 tx
或 ty
递增 1。其他矩阵没有变化。 似乎好像 EaselJS 得到了所有正确的数字。
谁能阐明这个问题?
编辑:
我通过使用计算的 regX/regY 重新绘制容器的部分来解决这个问题,而不是尝试在 Canvas 上转换非常大的 regX/regY 坐标。
最佳答案
这个问题可能是相关的
What is the maximum size for an HTML canvas?
据我所知,浏览器使用 short int
来存储 Canvas 大小,其中 32,767 是最大可能值。
可能与您的问题相关的链接,
关于javascript - 是什么导致我的 Canvas 绘图在某些值(2^15,一个)处中断和跳过?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13667404/