时间戳

首页 > 解决方案 > 如何通过给定的 2 个点计算弧的“开始”和“结束”角度？

javascript - 如何通过给定的 2 个点计算弧的“开始”和“结束”角度？

问题描述

我一直在尝试arc使用 p5.js 在画布上绘制一个。我得到了起点和终点，我pythagoras使用这两个点计算的弦长，高度和宽度值也给出了。

为了绘制弧线，我需要使用以下函数； arc(x, y, w, h, start, stop, [mode], [detail])对于文档，请参阅此处

start&stop参数是指以弧度为单位指定的开始和停止角度。没有这些角度，我无法画出弧线，也无法用我得到的东西来计算它们。

我搜索了很多与我的问题类似的例子，但建议计算中心角，我也无法这样做。即使我能够计算中心角，我应该如何获得之后的开始和停止角度？

我在 GeoGebra 上绘制了一些示例插图； 初始给定的东西

终弧

标签： javascriptmathprocessingtrigonometryp5.js

解决方案

向量的角度可以通过 计算atan2()。

注意：

tan(alpha) = sin(alpha) / cos(alpha)

如果你有一个向量 ( x, y)，那么alpha向量相对于 x 轴的角度 ( ) 是：

alpha = atan2(y, x);

圆弧的start_angle与stop_angle，圆心为( cpt_x, cpt_y)，起点为( spt_x, spt_y)，终点为( ept_x, ept_y)，计算公式为：

start_angle = atan2(spt_y-cpt_y, spt_x-cpt_x);
stop_angle  = atan2(ept_y-cpt_y, ept_x-cpt_x);

请参阅示例，其中停止角度取决于鼠标位置：

var sketch = function( p ) {

p.setup = function() {
    let sketchCanvas = p.createCanvas(p.windowWidth, p.windowHeight);
    sketchCanvas.parent('p5js_canvas')
}

p.windowResized = function() {
    p.resizeCanvas(p.windowWidth, p.windowHeight);
}

p.draw = function() {

    let cpt        = new p5.Vector(p.width/2, p.height/2);
    let rad        = p.min(p.width/2, p.height/2) * 0.9;
    let stop_angle = p.atan2(p.mouseY-cpt.y, p.mouseX-cpt.x);

    p.background(192);
    p.stroke(255, 64, 64);
    p.strokeWeight(3);
    p.noFill();
    p.arc(cpt.x, cpt.y, rad*2, rad*2, 0, stop_angle);
}

};

var circle = new p5(sketch);
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>
<div id="p5js_canvas"></div>

推荐阅读