| INDEX |

[as]破線描画

10月 3, 2007

先のベジェ曲線の破線描画に、直線の破線描画を加えて、moveTo、lineTo、curveToで破線を描画するものをまとめてみました。
moveTo、lineTo、curveToといってもGraphicsの拡張ではありませんが…。


サンプルでは、以下のようなスクリプトで破線を描画しています。 

//引きのoffsetは破線開始オフセット
function draw(offset:Number):void{
  //破線描画オブジェクト
  var g:DashLine = new DashLine( graphics, 6 );
  
  //ShapeData
  var dat:XML = <shape>
    <edge x0="334.35" y0="60.15" x1="338.1" y1="63" x2="341.6" y2="66.5" line="0" />
    <edge x0="341.6" y0="66.5" x1="345.1" y1="70" x2="348" y2="73.8" line="0" />
    ・・・Shapeの座標データ
    </shape>
  
  //描画
  graphics.clear();
  graphics.lineStyle( 2, 0xffffff, 1, false, "normal", "none" );
  
  var p0:Point = new Point( Number(dat.edge[0].@x0) , Number(dat.edge[0].@y0) );
  g.moveTo( p0.x, p0.y, offset );
  
  for each (var edge:XML in dat.edge ){
    var p1:Point = new Point( Number(edge.@x1) , Number(edge.@y1) );
    var p2:Point = new Point( Number(edge.@x2) , Number(edge.@y2) );
    if( edge.@line=="0" ){
      g.curveTo( p1.x, p1.y, p2.x, p2.y );
    }else{
      g.lineTo( p2.x, p2.y );
    }
  }
}

一応、Graphicsのノリで破線を描画できるようにしてみました。まだ最適化できそうなところも多分にありますが。

>> source

| INDEX |