0

マウスの位置を追跡するために情報カードが必要なアプリケーションがあります。

次のコードを使用しました。

stage.addEventListener("tick", fl_CustomMouseCursor.bind(this));

function fl_CustomMouseCursor() {

    this.NameTag.x = stage.mouseX;
    this.NameTag.y = stage.mouseY;

}

Firefox では完全に動作しますが、Chrome と Safari ではマウスがキャンバス上で 0,0 から離れるほど、NameTag とマウスの間の距離が大きくなります (2 倍)。

コメントをお待ちしております。

4

1 に答える 1

3

この問題は Firefox だけでなく Chrome でも見られます。ブラウザの問題ではないと思います。

問題は、ステージ自体がスケーリングされていることです。これは、座標がその値で乗算されることを意味します。ステージ座標で使用することで回避できますglobalToLocal。これにより、それらは exportRoot (this関数内) の座標空間に移動します。こちら で同様の質問に回答しましたが、これは Animate のレスポンシブ レイアウト サポートが原因でした。

変更された関数は次のとおりです。

function fl_CustomMouseCursor() {
    var p = this.globalToLocal(stage.mouseX, stage.mouseY);
    this.NameTag.x = p.x;
    this.NameTag.y = p.y;
}

また、「stagemousemove」イベント (ステージ上のマウス移動イベントでのみ発生) と、on()(とりわけ) 関数バインディングを実行できるメソッドを使用して、コードをクリーンアップすることもできます。

stage.on("stagemousemove", function(event) {
    var p = this.globalToLocal(stage.mouseX, stage.mouseY);
    this.NameTag.x = p.x;
    this.NameTag.y = p.y;
}, this);

乾杯、

于 2016-11-26T15:04:45.693 に答える