1

最近、GoogleMapsAPIを使用して自分のWebサイトに円を描くというタスクがありました。複雑さは、円の中心が「信号送信機」を表していることです。各ピクセルの不透明度が正確な位置の信号強度を再設定して、円を透明にする必要があります。

私の基本的な考え方は、Google Map APIの「オーバーレイ」を拡張することなので、JavaScriptで記述しなければならないと思います。

重要なのは、不透明度を徐々に変化させて（内側を強く、外側を明るく）円を描くことです。理想的には、各ピクセルの不透明度を指定できます。

私はCSS3、SVG、VML、さらにはjqueryやAJAXのようなアプローチを探していましたが、これをどのようにアーカイブするかについてはまだわかりません。

よろしくお願いします！

4

2 に答える 2

1

不透明度をそのレベルで制御したい場合は、すべてのピクセルを手動で設定する必要があるようです。私はこのようなものを使用します：

var centerX = 100 // Center X coordinate of the circle.
var centerY = 100 // Center Y coordinate of the circle.
var radius = 25 // Radius of circle.
//(var diameter = 2 * radius // Diameter of circle)

for(x = -radius; x < radius; x++){
    for(y = -radius; y < radius; y++){
        var hypotenuse = Math.sqrt((x * x) + (y * y)); // Line from point (x,y) to the center of the circle.
        if(hypotenuse < radius){ // If the point falls within the circle
            var opacity = hypotenuse / radius; // Should return a value between 0 and 1
            drawPointAt(x + centerX, y + centerY, colour, opacity); // You'll have to look up what function to use here, yourself.
        }
    }
}

これは、円を返すこのコードの小さな例です。

于 2012-11-27T07:54:25.883 に答える
0

ここで私は解決策を得ました。HTML5（広くサポートされている）のCanvas要素を利用しています。

これは、canvas要素を見つけて、透明度を徐々に変えながら円を描くためのjavascriptコードです。重要なのは「グラデーション」を使うことです。

//get a reference to the canvas
var ctx = $('#canvas')[0].getContext("2d");


//draw a circle
gradient = ctx.createRadialGradient(200, 200, 0, 200, 200, 200);
gradient.addColorStop("0", "blue");
gradient.addColorStop("1.0", "transparent");
ctx.fillStyle = gradient;

//ctx.beginPath();
ctx.arc(200, 200, 200, 0, Math.PI*2, true); 
//ctx.closePath();
ctx.fill();
于 2012-11-29T06:49:30.697 に答える