2014-07-23 201 views
2

好的傢伙這裏是場景,在這張圖片中有一個盒子,裏面有一個圓圈。現在,您可以看到,在圓圈頂部和框的四個角上有四個點。這些點實際上是橢圓形的。通過點,我們可以重塑圖像。現在我想要做的就是圍繞其中心添加旋轉,即旋轉圓圈和框。旋轉的問題在於圓點位於圓的頂部,同時旋轉它們的位置需要保持並且其他角點指向。任何投入如何做到這一點?旋轉一個圓形的方形,在圓頂上有圓點

Conceptual Diagram

+0

你可以使用CSS3 [轉型](http://www.w3schools.com/css /css3_transitions.asp)和一個rotate [transform](http://www.w3schools.com/cssref/css3_pr_transform.asp)。 –

+0

你能指出我在某個方向嗎?我不知道該怎麼做。 – user3132179

+0

[This should help。](http://www.w3schools.com/js/js_htmldom_css.asp) –

回答

3

您可以使用rotate()的轉換應用於座標矩陣。

,如:

void setup() { 
    size(300, 300); 
    rectMode(CENTER); 
    ellipseMode(CENTER); 
} 
void draw() { 
    background(255); 

    //using frame count to rotate 
    float a = radians(frameCount%360); 

    // move coordinates so you can draw at origin 
    // rotates always use origin as axis 
    translate(width/2, height/2); 

    //clockWise 
    rotate(a); 
    //counterClockWise 
// rotate(-a); 
    noFill(); 
    rect(0, 0, 100, 100); 
    ellipse(0, 0, 100, 100); 

    ellipse(-50, 0, 4, 4); 
    ellipse(0, -50, 4, 4); 
    ellipse(-50, -50, 4, 4); 
    ellipse(0, 50, 4, 4); 
    ellipse(50, 0, 4, 4); 
    ellipse(-50, 50, 4, 4); 
    ellipse(50, 50, 4, 4); 
    fill(255, 0, 0); 
    ellipse(50, -50, 4, 4); 
} 

有二維轉換這個驚人的教程:

http://processing.org/tutorials/transform2d/

+0

但上述代碼中的旋轉既不是順時針也不是逆時針。它正確地遵循鼠標 – user3132179

+0

現在它;)(代碼編輯上面)。這僅僅是一個關於如何使用旋轉的例子,目前還不清楚你是否需要它來繼續旋轉......檢查出來 –