LoFiBeats・84分の作業用BGMを作成しました!

JUCEプログラミング、AffinTransformの関数について、ダイヤル画像の検証時の失敗

1_プログラミング

今回の記事は、誰かの役にたつかはわかりませんが、備忘録メインとなります。

失敗の記録だね〜

今回は、前回のダイヤル画像の検証時にいろいろと行ったことの備忘録です。AffinTransformクラスについては、検証を行うことで分かったことがありました。また、失敗の内容についてもできなかったことをメモしておき、今後、同じ考えになったときに、排除できるように備忘録していきたいと思います。

スポンサーリンク

AffinTransformクラスについて

rotatedとrotationの違い

アフィン変換で回転させようと思った時に、公式ドキュメントを見ていると、「rotated」と「rotation」があり、どっちを使ったらよいか、が理解できませんでした。C++の知識的な問題なのですが、「rotatin」は「static public」関数なので、「juce::AffineTransform::translation」としてインスタンスを生成していなくても使える関数になります。

アフィン変換などは、関数の途中でオブジェクト化せずに使いたいので、「juce::AffineTransform」として使いたいです。その時は、回転は「rotation」から始め、移動は「translation」から始めると使うことができます。

その後は普通の関数呼び出しで「.rotated」や「.translated」といった形で関数をつなげて利用することができます。

最終的に行き着いたダイヤル画像の回転はAffineTransformを1行で記載しています。

juce::AffineTransform::translation(-51, -51).rotated(angle).translated(51, 51)

ダイヤルの画像検証での失敗例

ダイヤルの画像検証での試行錯誤を記載しておきます。結構いろいろとやったので、失敗例をまとめておこうかと思いました。ご興味のある方のみご覧ください^^;

出来なかった例1

この時から、アフィン変換のクラスAffinTransformを使い始めました。最初はこんな風にやってうまくいきませんでした。

juce::Image knob_image = juce::ImageCache::getFromMemory(BinaryData::knob_png, BinaryData::knob_pngSize);
g.setOpacity(1.0f);
auto angle = rotaryStartAngle + sliderPos * (rotaryEndAngle - rotaryStartAngle);

//うまく動作しない例です。
juce::AffineTransform affine1;
affine1 = affine1.translated(-51.0f, -51.0f);
affine1 = affine1.rotation(angle);
affine1 = affine1.translated(51.0f, 51.0f);        
g.drawImageTransformed(knob_image,affine1);

この場合、画像が回ることには回るのですが、異常に画像が回転してもう収集がつきません 笑

affine1はオブジェクトなので、変数のように代入している点がそもそも間違っているという事態・・・^^;

出来なかった例2

次に考えたのが、矩形を回転させて、矩形に描画をするという方法です。graphicsクラスのdrawImage関数は矩形領域にフィットさせる形で画像を描画できるので、試してみました。

juce::Image knob_image = juce::ImageCache::getFromMemory(BinaryData::knob_png, BinaryData::knob_pngSize);
g.setOpacity(1.0f);
auto angle = rotaryStartAngle + sliderPos * (rotaryEndAngle - rotaryStartAngle);

//うまく動作しない例その2
juce::Rectangle<float> draw_rect(x,y,width,height);
g.drawImage(knob_image, draw_rect.transformedBy(juce::AffineTransform::translation(-width / 2, -height / 2).rotated(angle).translated(width / 2, height / 2)));

コンポーネントの領域に矩形のサイズが合わせられて矩形のサイズが変化しているので、矩形の回転は行われているようなのです。しかし、描画される画像はサイズが微妙に変化するだけで、うまくいきませんでした。

タイトルとURLをコピーしました