ofPath

ofPathクラスは、一点のパス、又は複数点から成るパスを定義します。複数点から成るパスをひとつのベクターデータオブジェクトとして連結させて、画面への描画、パスの操作、サブパスの操作等が行えます。 ofPolylineに比べて複雑な図形を扱う事に優れ、またofPolyline, ofSubPathのインスタンスに比べて入り組んだ親子関係を持った線や図形の管理を簡単に行う事が出来ます。ofPathは、デフォルトでofSubPathインスタンスを使用します。パスを閉じる時、自動的に新しいパスを追加します。

for( int i = 0; i < 5; i++) {
    path.arc( i * 50 + 20, i * 50 + 20, i * 40 + 10, i * 40 + 10, 0, 360); // creates a new ofSubPath
    path.close();
}

ofPolylineのインスタンスを使用するには、POLYLINESモードをセットします。

path.setMode(POLYLINES);

ofPath methods

ofPath()

ofPath::ofPath()

新しいofPathクラスのインスタンスを生成します。

clear()

void ofPath::clear()

ofPathのインスタンスから、全てのサブパスを消去します。

newSubPath()

void ofPath::newSubPath()

ofPolylineか、ofSubPathどちらかの任意の新しいインスタンスを生成します。 ofSubPathへの呼び出し後に追加された全てのパスは、新しいサブパスが生成された時に完成します。 close() メソッドを呼ぶと、自動的に newSubPath() が呼び出されます。 既に閉じられているパスへはポイントの追加を行いません。

close()

void ofPath::close()

現在のサブパスを閉じ、newSubPath() を呼んで ofPolyline, ofSubPath どちらか任意の新しいサブパスを生成します。 既に閉じられているパスへはポイントの追加を行いません。

lineTo(...)

void ofPath::lineTo(const ofPoint &p)

現在の描画位置から、p の位置までの直線を描画します。

lineTo(...)

void ofPath::lineTo(float x, float y)

現在の描画位置から、x, y の位置までの直線を描画します。

lineTo(...)

void ofPath::lineTo(float x, float y, float z)

現在の描画位置から、x, y, z の位置までの直線を描画します。

moveTo(...)

void ofPath::moveTo(const ofPoint &p)

p の位置へ、描画位置を移動します。 lineTo(), curveTo() 等を連続して呼んだ場合、描画位置 p から、新しい描画位置へ移動します。

moveTo(...)

void ofPath::moveTo(float x, float y, float z=0)

p の位置へ、描画位置を移動します。 lineTo(), curveTo() 等を連続して呼んだ場合、描画位置 x, y, z から、新しい描画位置へ移動します。

curveTo(...)

void ofPath::curveTo(const ofPoint &p)

現在の描画位置から p への曲線を描画します。

curveTo(...)

void ofPath::curveTo(float x, float y)

現在の描画位置から x, y への曲線を描画します。 マウス座標位置に小さなバラ曲線(正葉曲線)を描画するサンプルコード:

float scale = ofDist(mouseX, mouseY, px, py);

for( float theta = 0; theta < TWO_PI; theta += 0.1) 
{
    float r =  cos(theta * (scale/6)) * scale; 
    path.curveTo(mouseX + r * cos(theta), mouseY + r * sin(theta));
}

px = mouseX;
py = mouseY;

curveTo(...)

void ofPath::curveTo(float x, float y, float z)

現在の描画位置から x, y、z への曲線を描画します。

bezierTo(...)

void ofPath::bezierTo(const ofPoint &cp1, const ofPoint &cp2, const ofPoint &p)

現在の描画位置から p へ、ofPoint cp1, cp2のコントロールポイントを使った三次ベジェ曲線を描画します。 サンプルコード:

line.addVertex(ofPoint(200, 400));
line.bezierTo(100, 100, 800, 100, 700, 400);

このコードの実行結果: polyline bezier 黄色の点がコントロールポイントです。

bezierTo(...)

void ofPath::bezierTo(float cx1, float cy1, float cx2, float cy2, float x, float y)

現在の描画位置から x, y へ、座標cx1, cy1, 座標cx2, cy2 のコントロールポイントを使った三次ベジェ曲線を描画します。

bezierTo(...)

void ofPath::bezierTo(float cx1, float cy1, float cz1, float cx2, float cy2, float cz2, float x, float y, float z)

現在の描画位置から x, y, z へ、座標cx1, cy1, cz1, 座標cx2, cy2, cz2 のコントロールポイントを使った三次ベジェ曲線を描画します。


float cx = ofGetWidth()/2;
float cy = 200;
float step = TWO_PI / 60;
for (float i = 0.0; i < TWO_PI; i+=step) {

    if(i == 0.0) {
        line.addVertex(cx + (400*cos(i)), cy+400, 400 * sin(i));
    } else {
        line.bezierTo( cx - (200*cos(i)), cy-100, 400 * sin(i), 
                       cx + (200*cos(i)), cy+600, 400 * sin(i), 
                       cx + (400*cos(i)), cy+400, 400 * sin(i));
    }
}

quadBezierTo(...)

void ofPath::quadBezierTo(const ofPoint &cp1, const ofPoint &cp2, const ofPoint &p)

現在の描画位置から、開始位置 cp1, コントロールポイント cp2, 終了位置 p の二次ベジェ曲線を3D空間に描画します。 polyline curves

quadBezierTo(...)

void ofPath::quadBezierTo(float cx1, float cy1, float cx2, float cy2, float x, float y)

現在の描画位置から、開始位置座標cx1, cy1, コントロールポイント座標 cx2, cy2, 終了位置座標 x, y の二次ベジェ曲線を2D空間に描画します。

quadBezierTo(...)

void ofPath::quadBezierTo(float cx1, float cy1, float cz1, float cx2, float cy2, float cz2, float x, float y, float z)

現在の描画位置から、開始位置座標cx1, cy1, cz1 コントロールポイント座標 cx2, cy2, cz2 終了位置座標 x, y, z の二次ベジェ曲線を3D空間に描画します。

arc(...)

void ofPath::arc(const ofPoint &centre, float radiusX, float radiusY, float angleBegin, float angleEnd)

centre の位置に円弧を描画します。radiusX, radiusY の半径と、円弧開始アングル、円弧終了アングルを指定出来ます。 座標 100, 100 の位置に半径50pxの円弧を描くサンプルコード:

path.arc( 100, 100, 50, 50, 0, 360);

angleEnd は angleBegin より大きい数字である必要があります。 例えば、0, 180 はOKです。180, 0 は正しくありません。

arc(...)

void ofPath::arc(float x, float y, float radiusX, float radiusY, float angleBegin, float angleEnd)

座標 x, y の位置に円弧を描画します。radiusX, radiusY の半径と、円弧開始アングル、円弧終了アングルを指定出来ます。 座標 300, 300 の位置に半径200pxの円弧を描くサンプルコード:

path.moveTo(300, 300);
path.arc( 300, 300, 200, 200, 0, 271); // note 271, not 270 for precision

ofPath arc

angleEnd は angleBegin より大きい数字である必要があります。 例えば、0, 180 はOKです。180, 0 は正しくありません。

arc(...)

void ofPath::arc(float x, float y, float z, float radiusX, float radiusY, float angleBegin, float angleEnd)

座標 x, y, z の位置に円弧を描画します。radiusX, radiusY の半径と、円弧開始アングル、円弧終了アングルを指定出来ます。

setPolyWindingMode(...)

void ofPath::setPolyWindingMode(ofPolyWindingMode mode)

サブパス内各ポイントの繋がり方を指定します。 OpenGLは凸ポリゴンのみをレンダリング出来ます。それ以外(凹ポリゴン等)はテセレーションしてからでなければ描画が出来ません。 もしofPathのインスタンスがfilledであれば、この処理は自動的に行われます。 指定可能なオプションは以下の通りです。

OF_POLY_WINDING_ODD OF_POLY_WINDING_NONZERO OF_POLY_WINDING_POSITIVE OF_POLY_WINDING_NEGATIVE OF_POLY_WINDING_ABS_GEQ_TWO

ofPath winding modes

サンプルコード:

void testApp::setup(){

    path.lineTo(0, 400);
    path.lineTo(400, 400);
    path.lineTo(400, 0);
    path.lineTo(0, 0); // outer
    path.close();
    path.moveTo(100, 100);
    path.lineTo(100, 300);
    path.lineTo(300, 300);
    path.lineTo(300, 100); 
    path.lineTo(100, 100); // inner 1
    path.close();
    path.moveTo(250, 150);
    path.lineTo(150, 150);
    path.lineTo(150, 250);
    path.lineTo(250, 250); 
    path.lineTo(250, 150); // inner 2 (backwards)

    path2.lineTo(0, 400);
    path2.lineTo(400, 400);
    path2.lineTo(400, 0);
    path2.lineTo(0, 0); // outer
    path2.close();
    path2.moveTo(100, 100);
    path2.lineTo(300, 100);
    path2.lineTo(300, 300);
    path2.lineTo(100, 300); 
    path2.lineTo(100, 100); // inner 1
    path2.close();
    path2.moveTo(150, 150);
    path2.lineTo(250, 150);
    path2.lineTo(250, 250);
    path2.lineTo(150, 250); 
    path2.lineTo(150, 150); // inner 2 (fwds)

}

void testApp::draw(){

    ofTranslate(40,40);
    path.draw();
    ofTranslate(410, 0);
    path2.draw();

}

void testApp::keyPressed(int key){

    mode++;
    if( mode > 4 ) mode = 0;

    path.setPolyWindingMode((ofPolyWindingMode) mode);
    path2.setPolyWindingMode((ofPolyWindingMode) mode);

}

non zeroとpositiveでは、挙動が違う事が確認出来ます。

ofPath winding

setFilled(...)

void ofPath::setFilled(bool hasFill)

パスがワイヤーフレームとして描画されるか、塗りつぶして描画されるかを指定します。

setStrokeWidth(...)

void ofPath::setStrokeWidth(float width)

描画線の幅を指定します。 ofPathがワイヤーフレームとして描画される場合以外の時に有効です。

setColor(...)

void ofPath::setColor(const ofColor &color)

パスの色を指定します。 パスがワイヤーフレームとして描画される場合の描画線色、塗りつぶしとして描画される場合の塗りつぶし色、両方に適用されます。 ofPathインスタンス内全てのサブパスに対して色指定が行われます。

setHexColor(...)

void ofPath::setHexColor(int hex)

パスの色を指定します。 パスがワイヤーフレームとして描画される場合の描画線色、塗りつぶしとして描画される場合の塗りつぶし色、両方に適用されます。 ofPathインスタンス内全てのサブパスに対して色指定が行われます。

setFillColor(...)

void ofPath::setFillColor(const ofColor &color)

パスの塗りつぶし色を指定します。 パスがワイヤーフレームとして描画される場合には、何も効果はありません。

setFillHexColor(...)

void ofPath::setFillHexColor(int hex)

パスの塗りつぶし色を指定します。 パスがワイヤーフレームとして描画される場合には、何も効果はありません。

setStrokeColor(...)

void ofPath::setStrokeColor(const ofColor &color)

パスの描画線色を指定します。 パスが塗りつぶしとして描画される場合には、何も効果はありません。

setStrokeHexColor(...)

void ofPath::setStrokeHexColor(int hex)

パスの描画線色を指定します。 パスが塗りつぶしとして描画される場合には、何も効果はありません。

getWindingMode()

ofPolyWindingMode ofPath::getWindingMode()

現在のpoly winding modeを返します。

isFilled()

bool ofPath::isFilled()

パスの塗りつぶしが有効か無効かを返します。

getFillColor()

ofColor ofPath::getFillColor()

ofPathが使用している塗り描画色を返します。

getStrokeColor()

ofColor ofPath::getStrokeColor()

ofPathが使用している線描画色を返します。

getStrokeWidth()

float ofPath::getStrokeWidth()

描画線の幅を返します。

hasOutline()

bool ofPath::hasOutline()

draw(...)

void ofPath::draw(float x, float y)

座標 x, y の位置にパスを描画します。 draw() メソッドを呼ぶと、同時にtessllate() も呼ばれます。

draw()

void ofPath::draw()

座標 0, 0 の位置にパスを描画します。 draw() メソッドを呼ぶと、同時にtessllate() も呼ばれます。

getSubPaths()

ofSubPath ofPath::getSubPaths()

ofSubPathインスタンスのベクターデータを返します。 ofPathインスタンス内でofPolylinesを使用している場合は、何も返しません。

getOutline()

ofPolyline ofPath::getOutline()

ofPathの外形をofPolylineで返します。

getTessellation()

ofMesh ofPath::getTessellation()

simplify(...)

void ofPath::simplify(float tolerance=0.3)

flagShapeChanged()

void ofPath::flagShapeChanged()

setMode(...)

void ofPath::setMode(Mode mode)

setCurveResolution(...)

void ofPath::setCurveResolution(int curveResolution)

getCurveResolution()

int ofPath::getCurveResolution()

setArcResolution(...)

void ofPath::setArcResolution(int res)

getArcResolution()

int ofPath::getArcResolution()

setUseShapeColor(...)

void ofPath::setUseShapeColor(bool useColor)

getUseShapeColor()

bool ofPath::getUseShapeColor()

tessellate()

void ofPath::tessellate()

translate(...)

void ofPath::translate(const ofPoint &p)

rotate(...)

void ofPath::rotate(float az, const ofVec3f &axis)

scale(...)

void ofPath::scale(float x, float y)

ofPathが保持しているofPolyline, ofSubPath のサイズを変更します。 この変更は、可逆ではありません。つまり、scale(0, 0) を実行するとパスデータは消失します。