多角形のパスの向き

  • 2010 年 4月 9 日
  • kosuke

多角形を構成する座標がある時、その多角形を左回りに描いているか右回りに描いているかの判定方法を記録。やらんとしていることは3Dの陰面消去と同様ですが、たとえば数字の「8」のアウトラインデータには、外側輪郭のパスが一つと、内側の抜きのパスが2あって、パスデータが輪郭のものか抜きのものか判断したかった。イラレでいうところの複合パスを作った時のパスの方向の部分です。

この判断方法ですが検索して、すごくわかりやすいページを見つけましたので紹介させていただきます。

参考
閉図形の座標の配列が右回りか左回りか調べる方法 – 教えて!goo
多角形の面積,重心(図心),断面N次モーメントの公式と,向き (頂点列の回転方向) の判別方法

わー、こういう公式があるんですね。試してみて期待通りの結果が得られました。

//右回りの座標
var _pts1:Vector.<Point>	= Vector.<Point>( [
	new Point( -50, -50 ),
	new Point(  50, -50 ),
	new Point(  50,  50 ),
	new Point( -50,  50 )
] );
 
//左周りの座標
_pts2:Vector.<Point>	= Vector.<Point>( [
	new Point( -50, -50 ),
	new Point( -50,  50 ),
	new Point(  50,  50 ),
	new Point(  50, -50 )
] );
 
//符号付面積を返す
function getArea( pts:Vector.<Point> ):Number{
	var S:Number	= 0;
	for( var i:uint=0; i<pts.length; i++ ){
		var a:Point = pts[i];
		var b:Point = ( i<pts.length-1 ) ? pts[ i+1 ] : pts[0];
		S += a.x * b.y - a.y * b.x;
	}
	return S / 2;
}
 
//右回りの座標より取得
getArea( _pts1 );
 
//左回りの座標より取得
getArea( _pts2 );

プロットして確認したファイル:多角形のパスの向き

This movie requires Flash Player 10.0.0

この公式、こちら作品でパスデータから塗りに抜きを作るのに使いました。
OutlineClock

“多角形のパスの向き” に コメントはありません

コメントをどうぞ