【问题标题】:Find the points lying between Start and End Angle of an ARC.找到位于弧的开始角和结束角之间的点。
【发布时间】:2018-07-26 02:39:18
【问题描述】:

我正在尝试找到位于 ARC 扇区 A 内的点。我正在使用 D3 在 svg 和绘制点的圆圈中绘制弧线。当我用它们的开始角度或结束角度移动弧时,限制在弧内的点会改变一些属性,比如颜色或不透明度。

我正在做的是,我正在计算所有点 (X, Y) 与中心 (CX,CY) 的角度 (P_A) 并尝试检查点是否位于 ARC 手的角度之间,即开始角度 S_A 和结束角度 E_A。这是我使用的公式

P_A = atan(Y-CY,X-CX)*180.0/PI;

然后我正在检查:

if (P_A < E_A && P_A > S_A)
{
/// SAY Color of Points are changing.
}

下面给出了我用来在 D3 中生成 ARC 的代码

    var startAng = 20;
    var arcWidth = 1.5;

    var vis = Space.append("svg")
    var pi = Math.PI;

    var arc = d3.svg.arc()
      .innerRadius(0)
      .outerRadius(radiusC)
      .startAngle(S_A* (pi/180)) //converting from degs to radians
      .endAngle(E_A) //just radians

    vis.attr("width", "400").attr("height", "400") // Added height and width so arc is visible
      .append("path")
      .attr("d", arc)
      .attr("fill", "white")
      .style("stroke","black")
      .style("opacity",0.2)
      .attr("transform", "translate(200,200)");

但它无法正常工作.. 没有任何事情发生。

【问题讨论】:

  • 你的代码在哪里尝试修改某些点的属性?

标签: javascript d3.js math geometry


【解决方案1】:

对于角度方法,您应该使用 atan2 函数并考虑循环行为(当扇区包括 180 或 360 边界时)

坐标法:

制作矢量

s = (Cos(startangle), Sin(startangle))
e = (Cos(endangle), Sin(endangle))

为每个点制作矢量

 d = (p.x - center.x, p.y - center.y)

并使用叉积检查d 是否位于相对于s 的CCW(逆时针)和d 是否位于相对于e 的CW(顺时针)

 if (s.x * d.y - s.y * d.x >= 0)  && (e.x * d.y - e.y * d.x <= 0) 
     then point lies inside sector

【讨论】:

  • 为什么它只覆盖 PI 角,为什么不是整个 2*PI 形成一个圆圈。开始和结束角度在 X 轴或 Y 轴下方都可以正常工作,但不是 2*PI。当我们反转开始和结束角度的方向时,它也会改变行为......
  • 对于具有任意末端的大弧,您可以使用下一个方法:stackoverflow.com/questions/42728491
猜你喜欢
  • 1970-01-01
  • 2011-10-08
  • 1970-01-01
  • 1970-01-01
  • 2015-08-23
  • 2013-01-11
  • 2023-03-22
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多