0

我正在使用 Openframeworks 为 Reactivision 进行开发，我需要围绕一个圆圈放置一个 ofImage（可以放置在屏幕中的任何位置），并将其旋转一个特定的角度。我包括一张图片来帮助解决这个问题。

http://i.stack.imgur.com/WCyPu.png

如您所见，x 和 y 轴从 0,0 到 1,1，我在屏幕中间有一个圆（中心位于 0.5,0.5），半径为 0.42（所以它没有'不要填满屏幕）。

最终，用户在屏幕的 0.2,0.2 位置放置一个 ofImage（在本例中为红色笑脸）。它的宽度和高度都是 0.08，旋转中心在它的左上角（和往常一样）。

我需要做的是拿那个笑脸，把它放在圆圈周围，在最近的位置（如果它更容易转动，它可以跟随半径）它可以旋转它，所以它会面向中心的圈子。

我还需要在 ofImage 轴的 0.04 0.04 处找到笑脸“鼻子”，移动它并旋转它以保持笑脸鼻子而不是虚空中的一个点。最好的红色笑脸应该是绿色笑脸。

我的三角函数有点生疏，我最好的方法不起作用。我在构造函数中定义了它的最终位置，并在 draw() 步骤中旋转了精灵。

Smiley::Smiley(int _id, float x, float y)
{
    smileyImg.loadImage("smiley.png");

    float tangent = (0.5-x)/(0.5-y);
    //angle is a private float variable; 
    angle = atanf(tangent);
    //those 0.06 just lets me move the smiley a little over the circle itself
    x = 0.5+cos(angle)*(RADIUS+0.06);
    y = 0.5+sin(angle)*(RADIUS+0.06);
    float xNose = 0.5+cos(angle)*(RADIUS+0.06);
    float yNose = 0.5+sin(angle)*(RADIUS+0.06);
    angle = ofRadToDeg(angle);
    //pos and nose are Vector3 classes which hold three floats. Nothing too much important here
    pos.set(x, y, 0.0);
    nose.set(xNose, yNose, 0.0);
}

void Smiley::draw()
{
    ofPushMatrix();
    ofTranslate(pos.x,pos.y);
    ofRotateZ(angle);
    ofTranslate(-pos.x,-pos.y);
    ofSetColor(255,255,255);
    ofEnableAlphaBlending();
    smileyImg.draw(pos.x,pos.y,0.08,0.08);
    ofDisableAlphaBlending();
    ofPopMatrix();
}

有人可以帮我解决这个问题吗？真的提前谢谢了。

编辑：调整@datenwolf 解决方案后，我得到的位置是完美的，但是当我将旋转和平移（或只是平移）放入转换矩阵时，它会使笑脸消失。我很确定我对矩阵做错了：

Smiley::Smiley(int _id, float x, float y)
{
    smileyImg.loadImage("smiley.png");

    float distance = sqrt( pow((x - 0.46),2) + pow((y - 0.42),2));
    Vector3 director((x - 0.46)/ distance, (y - 0.42)/ distance, 0.0);
    pos.x = 0.46 + RADIUS * director.x;
    pos.y = 0.42 + RADIUS * director.y;

    float distanceNose = sqrt( pow((x - 0.46),2) + pow((y - 0.42),2));
    Vector3 noseDirector((x - 0.46)/ distanceNose, (y - 0.42)/ distanceNose, 0.0);
    nose.x = 0.46 + RADIUS * noseDirector.x;
    nose.y = 0.42 + RADIUS * noseDirector.y;

    /* matrix is a float matrix[16]. I think the indexing is ok, but even going from
    0 4 8 12... to 0 1 2 3..., it still doesn't work*/
    matrix[0] = -director.y; matrix[4] = director.x; matrix[8] = 0.0; matrix[12] = pos.x;
    matrix[1] = director.x; matrix[5] = director.y; matrix[9] = 0.0; matrix[13] = pos.y;
    matrix[2] = 0.0; matrix[6] = 0.0; matrix[10] = 1.0; matrix[14] = 0.0;
    matrix[3] = 0.0; matrix[7] = 0.0; matrix[11] = 0.0; matrix[15] = 1.0;
}

void Smiley::draw()
{
    ofPushMatrix();
    glLoadMatrixf(matrix);
    ofSetColor(255,255,255);
    ofEnableAlphaBlending();
    // Now that I have a transformation matrix that also transposes, I don't need to define the coordinates here, so I put 0.0,0.0
    noseImg.draw(0.0,0.0,0.08,0.08);
    ofDisableAlphaBlending();
    ofPopMatrix();
}

此外，我需要根据每个笑脸旋转鼻子位置。你认为哪种方式最好？非常感谢

4

1 回答 1

1

像往常一样，您不需要三角函数。设C为圆的中心、r半径和P用户点击的点。那么点击投影到圆上的位置U就是

U = C + r * (P - C)/|P - C|

在哪里

| A | = sqrt(A_x² + A_y² + …);

所以在二维的情况下你会得到

U.x = C.x + r * (P.x - C.x)/sqrt( (P.x - C.x)² + (P.y - C.y)² )
U.y = C.y + r * (P.y - C.y)/sqrt( (P.x - C.x)² + (P.y - C.y)² )

旋转可以用一个旋转矩阵 R 来描述，它由圆 C 到 P 的方向和与其垂线 T 组成。所以大胖编辑：规范化方向：

D = P - C = (P.x - C.x , P.y - C.y)/sqrt( (P.x - C.x)² + (P.y - C.y)² )
T = Z × D

U还要注意你可以写成D

U = C + r*D

用它来构造一个旋转矩阵

    | T.x D.x |
R = |         |
    | T.y D.y |

R作为一个旋转矩阵，它遵循 Ty == Dx 并评估 Tx

T.x = -P.y + C.y = -D.y

所以

    | -D.y D.x |
R = |          |
    |  D.x D.y |

大胖编辑：我为矩阵的最后一列使用了错误的组件。它是 U.{x,y}，而不是 D.{xy}。我的坏对不起！

我们可以把它放到一个完整的变换矩阵 M 中：

    | -D.y D.x   0 U.x |   | -D.y D.x   0 (C + r*D.x) |
M = |  D.x D.y   0 U.y | = |  D.x D.y   0 (C + r*D.y) |
    |    0   0   1   0 |   |    0   0   1      0      |
    |    0   0   0   1 |   |    0   0   0      1      |

您可以使用 glLoadMatrix 加载此矩阵以放置精灵。

于 2011-03-13T16:55:25.060 回答