1

ユーザーがサイズを変更して移動できるフルスクリーンの背景として、GoogleマップAPIを使用しています。マップ上のテキストを、その背後の色の反転に動的に変更したいと考えています。視認性を向上させます。

したがって、ユーザーがたまたま 0x0000FF であった海を越えていた場合、テキストは 0xFFFF00 になります。誰かがすでにその関数を作成していない限り、テキストの背後にあるすべてのピクセルを取得するのは私にはおかしいようです。

これは存在しますか？

4

2 に答える 2

1

これが私がやったことです。テキストを強調するために透明な背景を使用しました。私はこれがあなたのために働くかもしれないと思います。

ここに画像の説明を入力

于 2013-07-07T12:57:25.913 に答える
1

HTML 5 でこれを行うことができます。

基本的に、HTML5 キャンバスを描画してから、マウスが移動したときやその他のイベントでマウスの位置を取得する必要があります。キャンバス上にいる場合、 を使用getImageData(x, y, width, height)して選択範囲の一部のピクセル データを取得します。

例えば：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var imgData=ctx.getImageData(10,10,50,50);

返されるデータ オブジェクトには、選択したピクセルごとに R、G、B、A の 4 つの値が含まれます。RGB はカラー チャネル、A はアルファ チャネル (可視性) です。

次のステップは、その値を RGB から Hex に変換することです。これは、単純なヘルパー関数で行うことができます。

function rgbToHex(r, g, b) {
    return ((r << 16) | (g << 8) | b).toString(16);
}

色を取得したので、反転色を取得するためのマッピングまたは関数を作成する必要があります。必要な効果に応じて、この関数を少し操作する必要があります。この種のことを行う 2 つのサイトを次に示します。ソースを表示してそれらの機能を確認し、必要に応じて変更することができます。

次に、JQuery を使用してテキストの色を設定できます。

于 2012-12-12T20:47:07.893 に答える