openframeworks_疊圖概念_視訊相框功能
這次我們要來學習實踐一個相框疊加到視訊畫面上的功能
實際上
在 oF 中 我們是想像成 像似圖層一層一層疊蓋的做法
首先 我們在 oF的底圖上進行webcam draw的 設置
要開啟視訊需使用我們的
ofVideoGrabber 這個 類
內部構造
class ofVideoGrabber : public ofBaseVideoGrabber,public ofBaseVideoDraws{
public :
ofVideoGrabber();
virtual ~ofVideoGrabber();
vector<ofVideoDevice> listDevices() const;
bool isFrameNew() const;
void update();
void close();
bool setup(int w, int h){return setup(w,h,true);}
bool setup(int w, int h, bool bTexture);
OF_DEPRECATED_MSG("Use setup instead",bool initGrabber(int w, int h){return setup(w,h);})
OF_DEPRECATED_MSG("Use setup instead",bool initGrabber(int w, int h, bool bTexture));
bool setPixelFormat(ofPixelFormat pixelFormat);
ofPixelFormat getPixelFormat() const;
void videoSettings();
ofPixels& getPixels();
const ofPixels& getPixels() const;
OF_DEPRECATED_MSG("Use getPixels() instead", ofPixels& getPixelsRef());
OF_DEPRECATED_MSG("Use getPixels() instead", const ofPixels& getPixelsRef() const);
ofTexture & getTexture();
const ofTexture & getTexture() const;
OF_DEPRECATED_MSG("Use getTexture",ofTexture & getTextureReference());
OF_DEPRECATED_MSG("Use getTexture",const ofTexture & getTextureReference() const);
vector<ofTexture> & getTexturePlanes();
const vector<ofTexture> & getTexturePlanes() const;
void setVerbose(bool bTalkToMe);
void setDeviceID(int _deviceID);
void setDesiredFrameRate(int framerate);
void setUseTexture(bool bUse);
bool isUsingTexture() const;
void draw(float x, float y, float w, float h) const;
void draw(float x, float y) const;
using ofBaseDraws::draw;
void bind() const;
void unbind() const;
//the anchor is the point the image is drawn around.
//this can be useful if you want to rotate an image around a particular point.
void setAnchorPercent(float xPct, float yPct); //set the anchor as a percentage of the image width/height ( 0.0-1.0 range )
void setAnchorPoint(float x, float y); //set the anchor point in pixels
void resetAnchor(); //resets the anchor to (0, 0)
float getHeight() const;
float getWidth() const;
bool isInitialized() const;
void setGrabber(shared_ptr<ofBaseVideoGrabber> newGrabber);
shared_ptr<ofBaseVideoGrabber> getGrabber();
const shared_ptr<ofBaseVideoGrabber> getGrabber() const;
template<typename GrabberType>
shared_ptr<GrabberType> getGrabber(){
return dynamic_pointer_cast<GrabberType>(getGrabber());
}
template<typename GrabberType>
const shared_ptr<GrabberType> getGrabber() const{
return dynamic_pointer_cast<GrabberType>(getGrabber());
}
private:
vector<ofTexture> tex;
bool bUseTexture;
shared_ptr<ofBaseVideoGrabber> grabber;
int requestedDeviceID;
mutable ofPixelFormat internalPixelFormat;
int desiredFramerate;
};
緊接著再開啟好了你的攝影機後
我們進行前框的圖載入
這裡我們找一張 .png 包含 alpha 通道 的圖檔 作為 相框
https://www.google.com.tw/imgres?imgurl=http%3A%2F%2Fimage67.360doc.com%2FDownloadImg%2F2013%2F12%2F1717%2F37546178_10.png&imgrefurl=http%3A%2F%2Fwww.360doc.com%2Fcontent%2F13%2F1217%2F17%2F8055236_337925614.shtml&docid=wzySTVVF-Nv97M&tbnid=ujnHNV1xjRasaM%3A&w=750&h=566&ved=0ahUKEwiZzuSTvMLOAhWHlZQKHRy5DTUQMwgcKAAwAA&iact=mrc&uact=8&biw=1366&bih=705
ofImage frame_border //用來載入 相框圖
程式碼部分
ofApp.h
#pragma once
#include "ofMain.h"
class ofApp : 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 mouseEntered(int x, int y);
void mouseExited(int x, int y);
void windowResized(int w, int h);
void dragEvent(ofDragInfo dragInfo);
void gotMessage(ofMessage msg);
ofVideoGrabber cam;
ofImage frame_border;
//background_img ;//相框
};
ofApp.cpp
#include "ofApp.h"
//--------------------------------------------------------------
void ofApp::setup(){
frame_border.load("C:/img_res/border.png");
//background_img.load("C:/img_res/outer_space.jpg");
cam.setup(600, 450); //設置 camera 寬,高
}
//--------------------------------------------------------------
void ofApp::update(){
cam.update();// camera 更新
}
//--------------------------------------------------------------
void ofApp::draw(){
ofClear(0);//清除成黑色
//正常寫法
//ofRectangle viewport = ofGetCurrentViewport(); /*ofGetCurrentViewport() Get the position and size of the current viewport
Returns: A rectangle describing the viewport */
//懶的時候就用 auto
auto viewport = ofGetCurrentViewport(); //底圖
//auto 看函式回傳捨麼就是捨麼
//回傳一個ofRectangle
//可以印出x ,y width , height
//寫法1.
//background_img.draw(viewport); // 先畫背景
cam.getTexture().draw(viewport);
frame_border.getTexture().draw(viewport);//再壓前框
//寫法2.
//frame_border.draw(viewport);
//寫法3.
//frame_border.draw(0,0);
}
//--------------------------------------------------------------
void ofApp::keyPressed(int key){
}
//--------------------------------------------------------------
void ofApp::keyReleased(int key){
}
//--------------------------------------------------------------
void ofApp::mouseMoved(int x, int y ){
}
//--------------------------------------------------------------
void ofApp::mouseDragged(int x, int y, int button){
}
//--------------------------------------------------------------
void ofApp::mousePressed(int x, int y, int button){
}
//--------------------------------------------------------------
void ofApp::mouseReleased(int x, int y, int button){
}
//--------------------------------------------------------------
void ofApp::mouseEntered(int x, int y){
}
//--------------------------------------------------------------
void ofApp::mouseExited(int x, int y){
}
//--------------------------------------------------------------
void ofApp::windowResized(int w, int h){
}
//--------------------------------------------------------------
void ofApp::gotMessage(ofMessage msg){
}
//--------------------------------------------------------------
void ofApp::dragEvent(ofDragInfo dragInfo){
}
留言
張貼留言