Javascript 为迷你地图夹持带有圆形的箭头

我目前正在为一个游戏制作一个迷你地图，在这个游戏中，屏幕上和屏幕下都有不同的重要物品。当我第一次通过渲染到纹理上的辅助摄影机创建迷你地图并在屏幕上以微型显示器显示时，它是矩形的。我能够确保当重要项目离开地图视图时，一个指向目标的箭头出现并保持在地图边缘。它基本上是将箭头的x&y位置夹紧到相机视图宽度和长度的一半（带有一些合适的边距空间）

无论如何。现在，我正在尝试使迷你地图呈圆形，虽然我有适当的渲染遮罩来保证迷你地图的形状，但我很难将箭头夹持到新迷你地图的形状。在矩形迷你地图中，箭头在夹紧时停留在角上，但显然，圆没有角

我想固定箭头的x&y位置与圆的半径（屏幕/小地图高度的一半）有关，但由于我在数学方面有点弱，我恳请您提供一些帮助。如何将箭头夹紧到新圆形的边缘

我现时的守则如下：

let {width: canvasWidth, height: canvasHeight} = cc.Canvas.instance.node,  // 960, 640
targetScreenPoint = cc.Camera.main.getWorldToScreenPoint(this.targetNode.position)

// other code for rotation of arrow, etc...

// FIXME: clamp the the edge of the minimap mask which is circular
// This is the old clamping code for a rectangle shape.

let arrowPoint = targetScreenPoint;
arrowPoint.x = utils.clamp(arrowPoint.x, (-canvasWidth / 2) + this.arrowMargin,
                                          (canvasWidth / 2) - this.arrowMargin);
arrowPoint.y = utils.clamp(arrowPoint.y, (-canvasHeight / 2) + this.arrowMargin,
                                         (canvasHeight /2) - this.arrowMargin);
            
this.node.position = cc.v2(arrowPoint.x, arrowPoint.y);

---

我可能还应该注意到，所有的迷你地图符号和箭头技术上都在屏幕上，但只有通过消隐遮罩显示在辅助摄像头上。。。你知道，以防万一，这会有所帮助。

对于其他想做同样事情的人，我基本上规范化了箭头指向目标节点的方向，并将其乘以图像遮罩的半径（具有适当的边距空间）

因为玩家节点和面具的中心在原点，所以我只得到了玩家的差异。（640/2）是直径，当然不应该硬编码，但现在是meh。感谢那些评论我并让我朝着正确的方向思考的人

let direction = this.targetNode.position.sub(this.playerNode.position).normalize();
let arrowPos = direction.mul((640/2) - this.arrowMargin);
this.node.position = arrowPos;

---

还记得学校的毕达哥拉斯定理吗？直角三角形的长边的长度与其他两个三角形有关。具体来说，Sqrt（长度斜边）=Sqrt（长度最短^2+长度中间^2）。。。这有帮助吗？另一种方法是在向量乘以地图半径之前对其进行规格化。这就是如何将2d向量的端点以随机方向放置在圆的圆周上。思考-圆周是一组向量的末端，这些向量都是从中心开始的，长度等于半径。提到直角三角形@enhzflep的关键是要认识到圆上的所有点都可以用它来表示，其中斜边是圆的半径。也许更简单的方法是，圆（原点0,0）的方程是x^2+y^2=半径^2。因此，通过一些巧妙的几何操作，你可以计算出你的圆形小地图覆盖的区域。或者更简单一点，计算出你的标记从小地图中心的x/y偏移量（

abs（marker.x-mapcenter.x）

），看看标记半径是否是