javascript 如何移动绘制在圆周上的X，Y坐标的起点？

92vpleto 于 2023-01-24 发布在 Java

关注(0)|答案(3)|浏览(149)

我想在圆周长的左下部分（6点到9点）绘制一系列点。但是，渲染X，Y坐标的起点总是从3点开始。！https://dl.dropboxusercontent.com/u/55849501/plotting-xy.png
下面是我的代码的呈现部分：

var items = 5;
for(var i = 0; i < items; i++) {
    var x = 96 + 100 * Math.cos(0.665 * Math.PI * i / items);
    var y = 96 + 100 * Math.sin(0.665 * Math.PI * i / items);   
    $("#center").append("<div class='point' style='left:"+ x +"px;top:"+ y +"px'></div>");    
}

下面是运行中的代码的jsfidle：http://jsfiddle.net/jE26S/198/
总之：我希望渲染点从6点钟位置开始，而不是3点钟位置。

JavaScript

来源：https://stackoverflow.com/questions/25854459/how-do-i-move-the-starting-point-of-x-y-coordinates-plotted-on-a-circle-perimete

3条答案

按热度按时间

f0brbegy1#

你实际上是在两个theta值之间进行插值。在你的例子中，你想从Pi/2开始，到Pi结束。我冒昧地用这个插值范例重写了你的代码片段。另外，你可以用outerCircleRadius调整你想让点/项离圆多远。

var items = 5;
var startTheta = .5 * Math.PI;
var endTheta = 1 * Math.PI;
var outerCircleRadius = 112;
var cx = 90;
var cy = 90;
for(var i = 0; i < items; i++) {
    var theta = startTheta + (endTheta - startTheta) * i / (items - 1)
    var x = cx + outerCircleRadius * Math.cos(theta);
    var y = cy + outerCircleRadius * Math.sin(theta);   
    $("#center").append("<div class='point' style='left:"+ x +"px;top:"+ y +"px'></div>");    
}

赞(0）回复(0）举报 2023-01-24

zfciruhq2#

像这样？

var x = 86 + 100 * Math.cos(0.665 * Math.PI * (items-1+i-0.5) / items);
var y = 96 + 100 * Math.sin(0.665 * Math.PI * (items-1+i-0.5) / items);

赞(0）回复(0）举报 2023-01-24

t98cgbkg3#

除了循环中第一行的“items - 1”之外，理查德·舒尔茨答案中的所有内容。
这适用于任何数量的项目：

var items = 5;
var startTheta = .5 * Math.PI;
var endTheta = 1 * Math.PI;
var outerCircleRadius = 112;
var cx = 90;
var cy = 90;
for(var i = 0; i < items; i++) {
    var theta = startTheta + (endTheta - startTheta) * i / items
    var x = cx + outerCircleRadius * Math.cos(theta);
    var y = cy + outerCircleRadius * Math.sin(theta);   
    $("#center").append("<div class='point' style='left:"+ x +"px;top:"+ y +"px'></div>");    
}

赞(0）回复(0）举报 2023-01-24

我来回答

javascript 如何移动绘制在圆周上的X，Y坐标的起点？

3条答案

相关问题

热门标签

最新问答