如何在矩形的边框上绘制一个点？

Question

我正在试图解决这个问题......这个点应该位于鼠标指向的地方的边界上.换句话说,在矩形边界线与矩形中心和鼠标指针之间的线之间交叉.我需要以某种方式使用三角函数,因为矩形可能会旋转.下面的代码(处理中)使我能够绘制点,但只能在南边界...

int size = 200;

void setup() {
  size(1200,500);
  smooth();
  ellipseMode(CENTER);
  rectMode(CENTER);

}

void draw() {
  background(255);
  noFill();

  PVector center = new PVector(width/2,height/2);
  PVector mouse = new PVector(mouseX, mouseY);

  float mouseDistance = PVector.dist(center,mouse);

  mouse.sub(center); // mouse coordinates relative to center point

  float t = atan2(mouse.y, mouse.x);

  float borderDistance = (size/2) / sin(t); 
  float bx = cos(t) * borderDistance;
  float by = sin(t) * borderDistance;

  pushMatrix();
    translate(center.x, center.y);
    strokeWeight(5);
    stroke(255,0,0);
    point(0,0);
    point(mouse.x, mouse.y);
    point(cos(t)*size/2, sin(t)*size/2);
    point(bx,by);
    strokeWeight(1);
    stroke(0);
    ellipse(0, 0, size, size);
    rect(0,0, size, size);
    stroke(0,255,0);
    line(0, 0, mouse.x, mouse.y);
  popMatrix();
}

Answer 1

好的,这里的数学将为您提供所需点的位置.

参考图:

为了找到这Green一点,我们需要做的就是找到虚构矩形的高度和宽度(见图),分别标记为Adj和Opp,并将这些值添加到该Center点.

如果你还记得SOH CAH TOA,我们将利用TOA:

Tan(Theta) = Opposite / Adjacent 

可以重新安排:

Opposite = Tan(Theta) * Adjacent

所以我们需要先找到Adjacent (Adj)并且Theta.

咨询的图,Adj显然是在差异y之间Orange和Center:

Adj = Orange.y - Center.y

但我们不知道Orange？好吧,Orange等于Center加上矩形高度的一半:

Orange = (Center.x, Center.y + Rect.Height/2)

将值Orange重新计入我们的Adj计算中:

Adj = Center.y + Rect.Height/2 - Center.y
Adj = Rect.Height/2

接下来我们需要找到Theta.

重新回到SOH CAH TOA CAH:

Cos(Theta) = Adjacent / Hypotenuse
Theta = acos(Adjacent / Hypotenuse)  //Inverse cosine

我们已经知道Adj = Rect.Height/2从早些时候开始,所以我们只需要找到Hyp.要找到Hyp我们可以使用距离公式,其中说:

d = sqrt((x2 - x1)^2 + (y2 - y1)^2)

在我们的情况下:

Hyp = sqrt((Center.x - Mouse.x)^2 + (Center.y - Mouse.y)^2) 

所以现在我们拥有了我们需要的一切Theta:

Theta = acos(Adj / Hyp)  //Inverse cosine

最后,我们有我们需要的Opp:

Opp = Tan(Theta) * Adjacent

这意味着我们拥有回答您问题所需的一切:

Green = (Center.x + Opp, Center.y + Adj)

笔记:

• 这是使用学位的"纸上数学".许多编程语言处理弧度而不是度数,因此您可能需要进行一些转换.

• 正如@Jerry Andrews指出的那样,这个问题将有四种不同的情况,它们对应于绘图点可能落在矩形的四个不同边:

为了确定象限,他首先需要矩形中心和任何角之间的角度 - 因此,atan(高度/宽度).这将给出半角(中心到绿色,如果绿色在角落).然后atan(mouse.y/mouse.x)将提供从矩形中心到鼠标光标的线的角度(因为在他的代码中,鼠标相对于矩形的中心定位).