0

私はOpenframeworksを使用してReactivision用に開発しています.ofImage(画面のどこにでも配置できます)を円の周りに配置し、特定の角度で回転させる必要があります。これに役立つ画像を含めます。

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

ご覧のとおり、x 軸と y 軸は 0,0 から 1,1 に移動し、画面の中央に円があり (中心は 0.5,0.5 に配置されています)、半径は 0.42 です (したがって、画面いっぱいにしないでください）。

最終的に、ユーザーは ofImage (この場合は赤いスマイリー) を画面の位置 0.2,0.2 に配置します。幅と高さはどちらも 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² + …);

したがって、2次元の場合は次のようになります

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)² )

回転は、円 C から P への方向とそれに垂直な T から構成される回転行列 R によって記述できます。So Big fat 編集: 方向の正規化:

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 |

RTy == Dx に従い、Tx を評価する回転行列

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

それで

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

大きな太った編集: マトリックスの最後の列に間違ったコンポーネントを使用しました。D.{xy}ではなくU.{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 を使用してこのマトリックスをロードし、スプライトを配置できます。

于 2011-03-13T16:55:25.060 に答える