ユーザーが背景をドラッグしてxy平面上を無期限に移動できるEaselJSを使用して、2Dキャンバスベースのアプリに取り組んでいます。背景が繰り返しタイルであることを除いて、Google マップを考えてみてください。
動きのコードは非常に単純で、次のようになります。
// 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 では、1 ではなくピクセルの大きな塊 (~100) が突然シフトします。その後、65538 (2^16+2) で再び発生し、おそらくそれ以降になりますが、私はそれを目撃していません。トラブルポイントの後、ドラッグは予想通りスムーズに続きますが、シフトしたままです.
Chrome では、効果はより劇的です。描画が途切れて、32768 のページ全体で幅 100 ピクセルの背景の「ストライプ」が繰り返され、再描画時に修正されません。
奇妙なことに、EaselJS の数値はこの問題を反映していません。コンテナの変換行列の唯一の変更は、txortyが 1 ずつ増加することです。他の行列は変更されません。EaselJSはすべての数値を正しく取得しているようです。
誰でもこの問題に光を当てることができますか?
編集:
キャンバス上の非常に大きな regX/regY 座標を変換しようとするのではなく、計算された regX/regY を使用してコンテナーの一部を再描画することで、この問題を回避しました。