使用JavaScript选择圆上的点

Question

有没有办法使用JavaScript来选择轮子图像上的点，并保存0-360的点？

Answer 1

如果您知道圆的半径，则可以使用三角学来查找圆上的点：

var x = Math.cos(pointAngleInRadians) * radius;
var y = Math.sin(pointAngleInRadians) * radius;

如果圆圈以(10, 20)之类的点为中心，则需要将这些值添加到x和y以获得准确的坐标。

<小时/> 更新

文章Click image and get coordinates with JavaScript解释了当用户点击图片时如何调用函数，并让该函数找出坐标。

以下是一些高级笔记，说明如何使用它来计算出他们点击的角度（0 - 360度）：

• 了解每个圆的中心坐标和用户点击的坐标，您可以使用点之间的距离计算半径，计算方法如下：

• 然后你可以使用上面的trig方程来计算每个圆上的点的角度。

• 假设每个圆都有一个宽度，您可以计算每个轮胎外边缘和内边缘具有相同角度/半径的点的坐标。

• 将内/外边缘值与用户点击的点进行比较，以查看用户是否在轮胎的边界内点击了。对于x和y，圆圈的每一半都需要两个案例 - 例如，以下内容仅对180度xInner <= x <= xOuter有效，然后对剩余的180度xInner >= x >= xOuter有效。

• 在上一步之后，如果该点位于其中一个轮胎上，那么您将获得该角度。在存储之前，您可能需要将其从弧度转换为度数：

  

以度为单位的角度=以弧度表示的角度* 180 / Pi

Answer 2

通过反复试验（！）发现了一个可能已有数百年历史的绘制椭圆的捷径。

Pythagoras constant : √2

通过知道中心[x，y]和半径[x，y]（通常来自两次鼠标单击），基本上是将hypotenuse乘以1.41 constant Math.SQRT2您会得到圆周长上最接近的点。

出于某些iframe的原因，这在下面的 SO嵌入代码段中表现不佳，但是没有其他问题。

const pX = 150 // Center X
const pY = 55 // Center Y
let sX,sY

let n = document.createElementNS("http://www.w3.org/2000/svg", 'ellipse')

svg.addEventListener('mousemove', function(e){
  sX = e.pageX
  sY = e.pageY
  n.setAttribute("cx",pX)
  n.setAttribute("cy",pY)
    
  let rx = Math.hypot(pX - sX, pY - sY) * Math.SQRT2
  let ry = Math.abs((pY - sY))

  n.setAttribute("rx",rx)
  n.setAttribute("ry",ry)

  svg.appendChild(n)
  
})

<svg id="svg" width="100%" height="600"></svg>