3

JSON データと CreateJS を使用して Canvas の演習を作成する大きなプロジェクトに取り組んでいます。HTML 5 の目的は、携帯電話用に別のアプリを使用する必要がなく、いつでも Web サイトを使用できるようにすることです。

すべて正常に動作しますが、モバイルではキャンバスがフルスクリーンに再スケーリングされます。これは、画面サイズをチェックすることによって行われ、モバイルに十分なほど小さい場合、キャンバスは次のコードによってスケーリングされます。

// browser viewport size
var w = window.innerWidth;
var h = window.innerHeight;

// stage dimensions
var ow = canvasWidth;
var oh = canvasHeight;

// keep aspect ratio
var scale = Math.min(w / ow, h / oh);
stage.scaleX = scale;
stage.scaleY = scale;

// adjust canvas size
stage.canvas.width = ow * scale;
stage.canvas.height = oh * scale;

これは、ボタンをクリックするだけでよいクイズなど、ほとんどの演習でうまく機能します。ただし、ドラッグ アンド ドロップの演習や、絵に色を付ける演習もあります。もちろん、これらは適切に機能するためにマウス座標に依存しています。問題は、キャンバスが拡大縮小されている場合、マウスの座標が ではないことです。そのため、アイテムをドラッグしたり描画しようとすると、オフセットが発生します。そのため、描画はクリックの左側に表示され、ドラッグ可能なオブジェクトをピックアップすると、クリックに正しく従いません。

コードを最初から作成していれば、座標を再計算する方法はかなり確信が持てますが、CreateJS によって計算されるため、どうすればよいかわかりません。

これは、この解決策が提案された場所で、約1 年前に誰かによって問題として報告されました。

トップレベルのコンテナを追加し、それにビットマップをアタッチしてスケーリングすることで、これを回避できました。

演習全体は、私がスケーリングしようとしたコンテナの中にありますが、役に立ちませんでした。また、作成された演習の一部 (メニュー、背景画像など) にスケールをパラメータとして送信しようとしましたが、すべてを一緒にスケールしないようにしました。しかし、これは大規模なプロジェクトであり、さまざまな演習やさまざまな部分をスケーリングする必要があるため、実装にはかなりの時間がかかり、実行可能な解決策であるかどうかはわかりません.

CreateJS でキャンバス サイズと共にマウス座標を再スケーリングする簡単な方法はありますか? ここSOで純粋なJavascriptの例を見つけましたが、特にCreateJSについては何もありません。

4

1 に答える 1

3

検索を続け、最終的にこれに 出くわしました。それはまさに私が探していたものでした。これで描いた座標を変更する必要がありました：

var coords = e.target.globalToLocal(e.stageX, e.stageY);

次に、以前のように e.stageX と e.stageY を直接使用する代わりに、 coords.xとcoords.yを使用できます。

于 2015-10-04T15:21:48.630 に答える