-1

ゲームの企画ツールを作っています。射程と毎秒ダメージが異なる 2 つの 2D 静止砲座を想像してみてください。これに似たスケールで、損傷に応じて異なる色でこれらの範囲を描画したいhttp://www.celtrio.com/support/documentation/coverazone/2.1.0/ui.viewmode.heatmapcolorscale.html

私はその部分を CSS ボーダー半径で動作させました。私の問題は、範囲が重なっている場合、重なっている領域に結合されたダメージが表示されないことです。

heatmap.js http://www.patrick-wied.at/static/heatmapjs/を見つけましたが、ポイントごとに異なる半径を設定することはできません。また、グラデーションをオフにする方法が見つかりません...これらの銃の最大射程でのダメージは、最小射程でも同じです。私はそれがヒートマップのポイントのようなものであることを理解していますが、私は何をグーグルで調べるべきかよくわかりません.

さまざまなレベルの不透明度を使用してさまざまな損傷を表すグレースケール画像を作成する PHP ソリューションについて考えました。次に、すべてのピクセルをループして、スケールに従って色を変更します。しかし、それは遅すぎるでしょう。ユーザーが画面上で銃をドラッグすると、可能な限りリアルタイムに更新する必要があります。

これを行うための非常に簡単な方法、CSS フィルターなどがあるかもしれませんが、何も見つかりません。何か案は?ありがとう!

4

2 に答える 2

1

heatmap.js のコードを見ると、次のように動作することがわかります。

  1. 透明から数パーセントの不透明までの放射状グラデーション (点の強度に応じて) を使用して、キャンバスに円をペイントします。
  2. そのグレースケール イメージをカラー マップします (各グレー値を 256 色の配列の 1 つに変換します)。

あなたの問題は同じ方法で解決できますが、ステップ1で一定の不透明度と可変半径の円をペイントします.

于 2013-06-06T13:24:48.777 に答える