画像を扱う基礎的な方法をみてゆきます。

プロジェクト名は image とします。

以下、ofApp.hとofApp.cpp の違いに注意してください。

画像ファイルを読み込んで表示させる

ofImage オブジェクトを使うと、画像の読み込み、描画、保存を行うことができます。

まずはじめに ofApp.h ヘッダファイルに、 ofImage オブジェクトを追加します。

class ofApp : public ofBaseApp {
    public:
    ...略...
    
    ofImage img;
    float ml;    // 左の余白
    float mt;    // 上の余白
};

次に、画像を読み込みます。 .gif, .jpg, .png が読み込み可能みたいです。読み込みたい画像を bin/data/ に配置してください。

サンプルの画像ファイルはこちら。

MonaLisa.jpg

void ofApp::setup() {
    ml = 50;
    mt = 50;
    img.load("MonaLisa.jpg");    // 画像の読み込み
}

画像を描画します。 img.draw() の引数は画像左上の座標です。描画の幅と高さも指定できます。

void ofApp::draw() {
    img.draw(ml, mt);    // 画像を描画
    // img.draw(ml, mt, 300, 300);    // 画像を描画
}

画像の一部を切り取って表示させる

ofImage.drawSubsection() を使って、画像の一部を描画する例をみてゆきます。

class ofApp : public ofBaseApp {
    public:
    ...略...
    
    ofImage img;
    float ml;    // 左の余白
    float mt;    // 上の余白
};

void ofApp::draw() {
    ofSetColor(ofColor::white);
    img.draw(ml, mt);    // 画像を描画
    
    // 4つの長方形を描画
    ofNoFill();
    ofSetColor(ofColor::red);
    ofDrawRectangle(mouseX, mouseY, 100, 100);
    ofSetColor(ofColor::green);
    ofDrawRectangle(mouseX, mouseY, 50, 50);
    ofSetColor(ofColor::blue);
    ofDrawRectangle(mouseX + 25, mouseY + 25, 50, 50);
    ofSetColor(ofColor::magenta);
    ofDrawRectangle(mouseX - 25, mouseY - 25, 50, 50);
    
    // 長方形部分の画像を描画
    ofPushMatrix();
    ofTranslate(img.getWidth() + ml, mt);
    ofSetColor(ofColor::white);
    img.drawSubsection(0, 0, 100, 100, mouseX - ml, mouseY - mt);
    ofSetColor(ofColor::red);
    ofDrawRectangle(0, 0, 100, 100);
    
    ofSetColor(ofColor::white);
    img.drawSubsection(0, 100, 100, 100, mouseX - ml, mouseY - mt, 50, 50);
    ofSetColor(ofColor::green);
    ofDrawRectangle(0, 100, 100, 100);
    
    ofSetColor(ofColor::white);
    img.drawSubsection(0, 200, 100, 100, mouseX + 25 - ml, mouseY + 25 - mt, 50, 50);
    ofSetColor(ofColor::blue);
    ofDrawRectangle(0, 200, 100, 100);
    
    ofSetColor(ofColor::white);
    img.drawSubsection(0, 300, 100, 100, mouseX - 25 - ml, mouseY - 25 - mt, 50, 50);
    ofSetColor(ofColor::magenta);
    ofDrawRectangle(0, 300, 100, 100);
    
    ofPopMatrix();
}