javascript - 是什么导致我的 Canvas 绘图在某些值(2^15,一个)处中断和跳过?

标签 javascript canvas matrix easeljs

我正在使用 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)该问题。容器变换矩阵中的唯一变化是 txty 递增 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/

相关文章:

javascript - 错误 : Cannot find module 'ansi-styles' in AngularJS with Yeoman generator

html - Canvas 元素中的线条粗细

c - 如何更改此 C 代码以预取一些数据?

Java-像素数组不从另一个类渲染另一个类

r - 如何更改 R 中的矩阵列类型

matlab - 通过从每列可能不同的行中删除一个条目来删除矩阵中的一行

javascript - 单页应用javascript不卸载会不会导致内存问题

javascript - 刷新页面返回 [object CSSStyleDeclaration]

javascript - jQuery Carousel 插件与 WowSlider 类似且更轻

HTML5 Canvas 旋转图像