1

最近我有一个任务是在我自己的网站上用 Google Maps API 画圆圈。复杂性是圆的中心代表一个“信号发射器”，我需要使圆透明，每个像素的不透明度代表确切位置的信号强度。

我的基本想法是扩展 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 元素（被广泛支持）。

这是用于定位画布元素并绘制透明度逐渐变化的圆圈的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 回答