如何在矩形的邊框上繪製點？

我打破我的脖子試圖解決這個問題... 該點應該位於鼠標指向的地方的邊界上。換句話說，在矩形邊界線和矩形中心與鼠標指針之間的一條線之間交叉。不知何故，我需要使用三角形，因爲矩形可能會旋轉。下面的代碼（在處理）讓我畫點，但僅在南邊界...如何在矩形的邊框上繪製點？

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(); 
}

來源

2014-03-04 mtx

好這裏是將要涉及到給你想要的點的位置的數學。

圖以供參考：

Problem Diagram

爲了找到Green點，我們需要做的是找到找到的高度和假想矩形（參見圖像）的寬度，其標記爲Adj和Opp，並將這些值添加到Center點。

如果你還記得SOH CAH TOA，我們將利用TOA：

Tan(Theta) = Opposite/Adjacent

可以重新安排：

Opposite = Tan(Theta) * Adjacent

所以我們需要先找到Adjacent (Adj)和Theta。圖

諮詢，Adj顯然是Orange和Center之間y的區別：

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 。

Rerfering回SOH CAH TOACAH：

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

我們已經知道，Adj = Rect.Height/2從早期的，所以我們只需要找到Hyp。爲了找到Hyp我們可以使用distance formula它說：

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安德魯斯指出，將有四個不同的情況下這個問題，這對應於矩形的四個不同的側面，你的繪圖點可能落在：

要確定象限，他首先需要矩形的中心與任何角落之間的角度 - 因此，atan（高度/寬度）。這將使給出半角（如果綠色位於角上，則爲中心至綠色）。然後 atan（mouse.y/mouse.x）將提供從矩形中心到鼠標光標的線的角度（因爲在他的代碼中，鼠標位於相對於矩形中心的位置）。

來源

2014-03-04 18:42:38 Tyler

+1令人敬畏的圖表。請注意，如果鼠標位於矩形的左側，則響應可能會有所不同，因此該分段與西牆而不是南牆相交......他將不得不弄清楚他正在爲完全一般回答。 –

是的，這是一個很好的觀點。同樣對於OP：我現在只是測試了這個，希望我能記得HighSchool的所有東西:) – Tyler

要確定象限，他首先需要矩形中心與任何角落之間的角度 - 因此，atan（height /寬度）。這將產生半角（如果綠色位於角落，則爲中心至綠色）。然後atan（mouse.y/mouse.x）將提供從矩形中心到鼠標光標的線的角度（因爲在他的代碼中，鼠標相對於矩形的中心而定位）。最後，您的解決方案有四種變體，每個象限一個變體。 –

OK！我設法解決了邊界問題。 this link

下處理草圖和可用的代碼我用ATAN2（）函數來計算mouseTheta然後在需要用象限玩：

// north 
     borderPoint = new PVector(tan(mouseTheta-HALF_PI)*r, -r); 
// east 
     if(mouseTheta > TWO_PI-QUARTER_PI || mouseTheta < QUARTER_PI) 
     borderPoint = new PVector(r, tan(mouseTheta)*r); 
// south 
     if(mouseTheta >= QUARTER_PI && mouseTheta < QUARTER_PI+HALF_PI) 
     borderPoint = new PVector(-tan(mouseTheta-HALF_PI)*r, r); 
// west 
     if(mouseTheta >= HALF_PI+QUARTER_PI && mouseTheta < PI+QUARTER_PI) 
     borderPoint = new PVector(-r,-tan(mouseTheta)*r);

相貌醜陋，但工程...謝謝！

來源

2014-03-05 23:01:20 mtx

如何在矩形的邊框上繪製點？

回答

相關問題