Lc ey:如何从点计算角度 (ey canvas)

我想得到一个简单的解决方案来计算线的角度(如时钟的指针)。

我有 2 点:

cX, cY - the center of the line.
eX, eY - the end of the line.
The result is angle (0 <= a < 360).

哪个函数能够提供这个值?

136

你想要的反正切:

dy = ey - cy
dx = ex - cx
theta = arctan(dy/dx)
theta *= 180/pi // rads to degs

呃,请注意,上面显然不是编译 Javascript 代码。您必须查看arctangent函数的文档。

编辑:使用Math.atan2(y,x)将为您处理所有特殊情况和额外逻辑:

function angle(cx, cy, ex, ey) {
  var dy = ey - cy;
  var dx = ex - cx;
  var theta = Math.atan2(dy, dx); // range (-PI, PI]
  theta *= 180 / Math.PI; // rads to degs, range (-180, 180]
  //if (theta < 0) theta = 360 + theta; // range [0, 360)
  return theta;
}
23

Christian's answer的可运行版本。

function angle(cx, cy, ex, ey) {
  var dy = ey - cy;
  var dx = ex - cx;
  var theta = Math.atan2(dy, dx); // range (-PI, PI]
  theta *= 180 / Math.PI; // rads to degs, range (-180, 180]
  return theta;
}
function angle360(cx, cy, ex, ey) {
  var theta = angle(cx, cy, ex, ey); // range (-180, 180]
  if (theta < 0) theta = 360 + theta; // range [0, 360)
  return theta;
}
show("right", 0, 0, 1, 0);
show("top right", 0, 0, 1, 1);
show("top", 0, 0, 0, 1);
show("top left", 0, 0, -1, 1);
show("left", 0, 0, -1, 0);
show("bottom left", 0, 0, -1, -1);
show("bottom", 0, 0, 0, -1);
show("bottom right", 0, 0, 1, -1);
// IGNORE BELOW HERE (all presentational stuff)
table {
  border-collapse: collapse;
}
table, th, td {
  border: 1px solid black;
  padding: 2px 4px;
}
tr > td:not(:first-child) {
  text-align: center;
}
tfoot {
  font-style: italic;
}
<table>
  <thead>
    <tr><th>Direction*</th><th>Start</th><th>End</th><th>Angle</th><th>Angle 360</th></tr>
  </thead>
  <tfoot>
     <tr><td colspan="5">* Cartesian coordinate system<br>positive x pointing right, and positive y pointing up.</td>
  </tfoot>
  <tbody id="angles">
  </tbody>
</table>
<script>
function show(label, cx, cy, ex, ey) {
  var row = "<tr>";
  row += "<td>" + label + "</td>";
  row += "<td>" + [cx, cy] + "</td>";
  row += "<td>" + [ex, ey] + "</td>";
  row += "<td>" + angle(cx, cy, ex, ey) + "</td>";
  row += "<td>" + angle360(cx, cy, ex, ey) + "</td>";
  row += "</tr>";
  document.getElementById("angles").innerHTML += row;
}
</script>
17

如果您正在使用 canvas,您会注意到(如果您还没有)canvas 使用顺时针旋转(MDN)y轴翻转。为了获得一致的结果,您需要调整angle功能。

不时地,我需要编写这个函数,每次我需要查找它,因为我从来没有得到计算的底部。

虽然建议的解决方案有效,但它们没有考虑画布坐标系。检查以下演示:

Calculate angle from points-JSFiddle
function angle(originX, originY, targetX, targetY) {
    var dx = originX - targetX;
    var dy = originY - targetY;
    // var theta = Math.atan2(dy, dx);  // [0, Ⲡ] then [-Ⲡ, 0]; clockwise; 0° = west
    // theta *= 180 / Math.PI;          // [0, 180] then [-180, 0]; clockwise; 0° = west
    // if (theta < 0) theta += 360;     // [0, 360]; clockwise; 0° = west
    // var theta = Math.atan2(-dy, dx); // [0, Ⲡ] then [-Ⲡ, 0]; anticlockwise; 0° = west
    // theta *= 180 / Math.PI;          // [0, 180] then [-180, 0]; anticlockwise; 0° = west
    // if (theta < 0) theta += 360;     // [0, 360]; anticlockwise; 0° = west
    // var theta = Math.atan2(dy, -dx); // [0, Ⲡ] then [-Ⲡ, 0]; anticlockwise; 0° = east
    // theta *= 180 / Math.PI;          // [0, 180] then [-180, 0]; anticlockwise; 0° = east
    // if (theta < 0) theta += 360;     // [0, 360]; anticlockwise; 0° = east
    var theta = Math.atan2(-dy, -dx); // [0, Ⲡ] then [-Ⲡ, 0]; clockwise; 0° = east
    theta *= 180 / Math.PI;           // [0, 180] then [-180, 0]; clockwise; 0° = east
    if (theta < 0) theta += 360;      // [0, 360]; clockwise; 0° = east
    return theta;
}
1

获取两点或任何角度之间的角度的问题之一是您使用的参考。

在数学中,我们使用一个三角圆,原点在圆的右侧(x = 半径中的一个点,y = 0),并从 0 到 2PI 顺时针计数角度计数器。

在地理上,原点是 0 度的北方,我们从顺时针方向到 360 度。

的代码(在 C # 中)获取弧度的角度,然后转换为地理角度:

    public double GetAngle()
    {
        var a = Math.Atan2(YEnd - YStart, XEnd - XStart);
        if (a < 0) a += 2*Math.PI; //angle is now in radians
        a -= (Math.PI/2); //shift by 90deg
        //restore value in range 0-2pi instead of -pi/2-3pi/2
        if (a < 0) a += 2*Math.PI;
        if (a < 0) a += 2*Math.PI;
        a = Math.Abs((Math.PI*2) - a); //invert rotation
        a = a*180/Math.PI; //convert to deg
        return a;
    }

本站系公益性非盈利分享网址,本文来自用户投稿,不代表边看边学立场,如若转载,请注明出处

(422)
Python大小写转换:Python-忽略字母大小写
上一篇
Cvc是什么布料:cvc在XML架构(验证)上下文中是什么意思
下一篇

相关推荐

  • canvas 滚动:Unlock the Power of Canvas Scrolling to Transform Your

    Canvas滚动是指在Canvas画布上实现滚动效果的一种技术。它可以通过改变画布的位置来实现滚动,也可以通过改变画布的大小来实现滚动。…

    2023-08-04 03:44:28
    0 46 55
  • canvas画布:Unleash Your Creativity with Canvas!

    Canvas画布是一种HTML元素,它可以使用JavaScript在浏览器中绘制图形。它可以用于创建动态图像,绘制图表,创建游戏,创建动画等。…

    2023-07-20 11:21:15
    0 10 77
  • canvas验证码:解锁Canvas验证码的秘密

    实现实现Canvas验证码是一种基于HTML5 Canvas的图片验证码,它能够在浏览器中生成一个动态的图片,用于表单验证。Canvas验证码的原理是:在Canvas元素上绘制一些随机形状,比如线条、文字、图形等,并将这些形状叠加到一起,形成一个复杂的图像,然后将这个图像转换成图片,最后将图片显示在页面上,以供用户输入验证码。…

    2023-06-07 07:56:56
    0 39 86
  • js的canvas:Unlock the Power of Canvas to Create Amazing Visuals

    Canvas 是 HTML5 中新增的元素,它可以使用 JavaScript 在网页上绘制图形。它是一个画布,提供了一个灵活的方式来绘制图形,例如线条、曲线、圆形、矩形、图片等。…

    2023-03-02 14:17:22
    0 54 93
  • canvas橡皮擦:擦亮你的画布,发现新的可能!

    Canvas橡皮擦是一种用于擦除canvas上的图形的工具,它可以让用户在canvas上擦除不需要的图形,从而让用户能够重新绘制图形。下面是一段使用JavaScript实现Canvas橡皮擦的代码:…

    2023-03-16 09:22:13
    0 21 34
  • canvas 文档:使用 Canvas 创建动态图形

    Canvas 文档是 HTML5 中的一种新特性,它可以用来在浏览器中绘制图形。它使用 JavaScript 来实现,通过使用 canvas 元素,可以在网页上创建动画、图片、图表等多种多样的图形。…

    2023-08-31 02:27:03
    0 93 82
  • canvas类:如何使用Canvas类创建精美图形

    Canvas类是一个用于在HTML页面上绘制图形的JavaScript API,它可以用来创建动画,游戏,数据可视化等。它使用2D绘图上下文来绘制图形,并且可以向其中添加文本、图像、形状和其他图形元素。…

    2023-05-27 03:53:29
    0 16 59
  • canvas画折线图折线图显示了近期的发展趋势

    示例示例canvas画折线图的步骤如下:创建一个Canvas画布,设置宽高,并获取Canvas上下文对象;…

    2023-03-30 04:34:32
    0 84 87

发表评论

登录 后才能评论

评论列表(50条)