2014年2月8日土曜日

oF フォントデータの読み込みとテキストの中央配置、スクロール



今回は、openFrameworksでTrue Type Fontデータを読み込んで中央に表示してみました。
ただ、それだけではつまらないので、
・文字が下から上にスクロールする
・スペースキーを押すとテキスト内容と色が変わる
という動作も盛り込んだため、文字を書いただけにしては若干コードが長くなっています。
なので、テキスト入力について重要な部分はハイライトしてあります。

テキスト内容が動的なのでsprintf関数を使いましたが、入力テキストが変化しない場合は
フォントのインスタンス名.getStringBoundingBox("表示する文字列", 先頭位置のx座標, 先頭位置のy座標)
で直接入力して大丈夫です。

テキストを中央に配置するために文字幅を取得するのがいくらやっても上手くいかず、苦戦したのですが、結局変なところに ; を間違えて打ち込んでいたのが原因でした。。。
なんというケアレスミス...気をつけよう...

さて、まずは画像の時と同じようにdataフォルダにフォントのttfファイルを入れます。

そして以下入力


#pragma once

#include "ofMain.h"

class testApp : public ofBaseApp{

 public:
  void setup();
  void update();
  void draw();

  void keyPressed(int key);
  void keyReleased(int key);
  void mouseMoved(int x, int y );
  void mouseDragged(int x, int y, int button);
  void mousePressed(int x, int y, int button);
  void mouseReleased(int x, int y, int button);
  void windowResized(int w, int h);
  void dragEvent(ofDragInfo dragInfo);
  void gotMessage(ofMessage msg);
  
    ofTrueTypeFont architxt; //True Type fontを取り扱うインスタンスを作成
    char text[255]; //テキストデータの変数の宣言
    int fontX; //フォントX軸の位置の宣言
    int fontY; //フォントY軸の位置の宣言
    int R;
    int G;
    int B;
    bool bSmooth;//キーを押したか判断用
    



    };

#include "testApp.h"

//--------------------------------------------------------------
void testApp::setup(){
    ofBackground(255, 255, 255);
    ofSetVerticalSync(true);//フレームレートの上限をモニタのリフレッシュレートに合わせる
    ofSetFrameRate(60);
    
    //フォントデータの読み込み
    architxt.loadFont("architxt.ttf",30);
    
    sprintf(text, "Good Morning");//配列textに文字データを代入
    
    float w = architxt.stringWidth(text); //テキストの幅を調べる
    float h = architxt.stringHeight(text);//テキストの高さを調べる
        
    //フォントの初期位置(中央配置)
    fontX = ofGetWidth()/2-w/2;
    fontY = ofGetHeight()/2-h/2;//下に配置
    
    //色の初期設定
    R=255;
    G=147;
    B=60;
}

//--------------------------------------------------------------
void testApp::update(){
   

    //フォントを左に移動
    fontY -= 1; //(fontY=fontY-1と同じ)
    
    float h = architxt.stringHeight(text);//テキストの高さを調べる
    
    //フォントの右端が画面上端からはみ出したら位置を下端に戻す
    if (fontY < -h) {
        fontY = ofGetHeight();
    }

}

//--------------------------------------------------------------
void testApp::draw(){
    

    ofSetColor(R, G, B);
    
    architxt.drawString(text, fontX, fontY);//(表示する文字列, 先頭位置のx座標, 先頭位置のy座標)
}

//--------------------------------------------------------------
void testApp::keyPressed(int key){
    if (key==32){//スペースのキーコード
  bSmooth = !bSmooth;
        if (bSmooth){
            R=12;
            G=38;
            B=124;
            ofSetColor(12, 38, 124);
            sprintf(text, "Good Night");
        }else{
            R=255;
            G=147;
            B=60;
            ofSetColor(255, 147, 60);
            sprintf(text, "Good Morning");
        }
 }


}


0 件のコメント:

コメントを投稿