javascript - 找到位于弧的开始角和结束角之间的点。
问题描述
我正在尝试找到位于 ARC 扇区 A 内的点。我正在使用 D3 在 svg 和绘制点的圆圈中绘制弧线。当我用它们的开始角度或结束角度移动弧时,限制在弧内的点会改变一些属性,比如颜色或不透明度。
我正在做的是,我正在计算所有点(X,Y)与中心(CX,CY)的角度(P_A),并试图检查点是否位于 ARC 手的角度之间,即 startAngle 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)");
但它不能正常工作..没有任何事情发生。
解决方案
对于角度方法,您应该使用atan2
函数并考虑循环行为(当扇区包括 180 或 360 边界时)
坐标法:
制作矢量图
s = (Cos(startangle), Sin(startangle))
e = (Cos(endangle), Sin(endangle))
为每个点制作矢量
d = (p.x - center.x, p.y - center.y)
并检查两者是否都位于相对于使用叉积d
的 CCW(逆时针)s
和d
位于 CW(顺时针)的位置e
if (s.x * d.y - s.y * d.x >= 0) && (e.x * d.y - e.y * d.x <= 0)
then point lies inside sector
推荐阅读
- java - 在 Android Studio 中膨胀类 EditText 时出错
- c++ - VIsual Studio:避免弹出控制台并将其集成到IDE中
- android - 从 Flutter 中的 BottomNavigationBar-sceeen 导航到子屏幕
- python - 为什么 select 语句没有从数据库表中选择所有行?它每次都忽略第一个条目
- java - ClassCastException - Customer 和 Customerservice 在加载器应用程序的未命名模块中?
- python - 职位描述句子的分类方法
- file-upload - Cyberduck CLI - 如何防止鸭子在上传到保管箱时要求授权
- azure - Azure 数据工厂 V2 - 输入和输出
- python - 在图像上使用像“一维卷积”这样的二维卷积?
- react-native - react-native run-android 从错误的文件夹启动 Metro 服务器