0

このstackoverflowの回答（ここではライブデモ）で見つけたコードを使用して、キャンバスにパンとズームを実装しました。これはうまく機能しますが、問題があります。

私のページ全体がキャンバスなので、ブラウザのサイズが変更されると、キャンバスもサイズ変更されます。コードがないと、キャンバスが伸びてひどく見えます。ブラウザのサイズが変更されたときにキャンバスのサイズを変更するようにjQueryを設定すると、後で非常に奇妙なパンの問題が発生します。

更新する変数や、キャンバスのサイズが変更された後もパンとズームが機能し続けるように変数を適切に更新する方法がわかりません。

4

2 に答える 2

1

ねえ@Chrisこの質問は少し古いですが、私は同じ質問を自分で持っていて、これが私がしたことです:

window.addEventListener('resize', function() { 
    var transform = context.getTransform();
    context.setTranslate( transform.e, transform.f);
    context.setScale( transform.d, transform.d );
} , false);

@Phrogz の関数 trackTransforms(ctx) に、次の 2 つの関数を追加しました。

ctx.setTranslate = function( dx, dy ) {
    translate.call( ctx, dx, dy );
};
ctx.setScale = function(sx,sy) {
    scale.call( ctx, sx, sy );
};

キャンバスがリセットされ、すべてのコンテキストの変更が失われ、素晴らしいパン ズーム システムが作成されました。これは、変換に基づいてこれらの変更をやり直そうとするだけです。

于 2015-07-28T18:33:37.187 に答える