我正在使用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,旋转中心在其左上角(通常)。
我需要做的就是带着那个笑脸,将它放在圆上,放在最近的位置(如果变得更容易,它可以跟随半径),然后可以旋转它,使其面向中心的圈子。
我还需要找到距Image轴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();
}
而且,我需要根据每个笑脸旋转鼻子的位置。您认为哪种方法最好?非常感谢
最佳答案
像通常一样,您不需要三角函数。假设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来描述,旋转矩阵R由从圆C到P的方向和垂直于圆C的方向组成。如此大的脂肪编辑:标准化方向:
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
是旋转矩阵,它遵循T.y == D.x并评估T.xT.x = -P.y + C.y = -D.y
所以
| -D.y D.x |
R = | |
| D.x D.y |
大胖编辑:我为矩阵的最后一列使用了错误的组件。是U. {x,y},而不是D. {x.y}。不好意思!
我们可以将其放入一个完整的变换矩阵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放置该精灵来加载此矩阵。