gpt4 book ai didi

canvas - D3.Geo.Circle with Canvas

转载 作者:行者123 更新时间:2023-12-04 02:49:59 25 4
gpt4 key购买 nike

我正在使用 D3 使用 Canvas 而不是 SVG 创建墨卡托投影。我已经掌握了土地的工作路径,但我无法弄清楚如何(如果可能的话)在特定的长/纬度位置添加 d3.geo.circle。

如果它是 SVG,我会使用类似的东西

var group = svg.append('g');
group.append('circle')
.attr('cx', coords[0])
.attr('cy', coords[1])
.attr('r', 10)
.style('fill', 'red');

但我无法弄清楚如何将其转换为 Canvas ,而且我没有找到太多使用 Canvas 而不是 SVG 的 D3 资源。

有什么建议吗?

最佳答案

您只需使用 canvas arc 命令手动创建它:

var coords = [50, 50];
var r = 10;

ctx.beginPath();
// Make an arc from 0 to Math.PI*2, aka a full circle
ctx.arc(coords[0], coords[1], r, 0, Math.PI*2, false);
ctx.fillStyle = 'red';
ctx.fill();

实例:http://jsfiddle.net/9kmV3/


编辑:看来你的意思是在 Canvas 上通过适当的转换来表达纬度和经度,看看这个:

var coords = [47.61, -122.33];
var r = 5;

ctx.beginPath();
// Make an arc from 0 to Math.PI*2, aka a full circle

// X = Longitude
// Y = Latitude
// Negative latitude values go upwards, so we reverse the sign of latitude

ctx.arc(coords[1], -coords[0], r, 0, Math.PI*2, false);
ctx.fillStyle = 'red';
ctx.fill();

在 map 上放置西雅图的实例:http://jsfiddle.net/9kmV3/1/

关于canvas - D3.Geo.Circle with Canvas,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17979894/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com