LineクラスはEクラスを継承して作られています。 必要に応じてEクラスの情報も参照してください。
Lineは文字通り線を描くクラスですが、いくつかの事情(主にCANVASのAPIとの親和性)により複雑な図形描画も行えるため、少し複雑なクラスになっています。 単純な図形描画であれば、本クラスを使わずにShapeクラスやSpriteクラスを用いた方が扱いやすく、またパフォーマンスも高いでしょう。
複雑なクラスであるため、まずはサンプルを確認しておく事を推奨します。 また、ほとんどのメソッドはhtml5のcanvasに同様のメソッドがあるため、そちらを研究する事で本クラスも使えるようになるでしょう。
var line = new Line({x:0, y:0}, {x:100, y:100}, "red", 10); 開始点、終了点、色、線の太さを指定してインスタンスを生成します。終了点以降の第二引数は省略出来、Lineクラスで複雑な図形を描く場合これらは通常省略されます。
p:CommonOffset[];//各点を保存します。p[0]にはxとyに等しい値が格納されている必要があります fill:bool;//塗りつぶしを行うかどうか stroke:bool;//fillがtrueの場合、さらに周辺線も描くかどうか closePath:bool;//closePathを呼び出すかどうか
updateSize() { 全ての点の情報を基に、widthとheightを更新します。ver0.4現在、複雑な地形を指定した場合正しく計算出来ない不具合があることがわかっています。 --- setColor(color:any) { color:any; 線の色を指定します。fillを利用する場合、このメソッドではなくsetFillColorメソッドで塗りつぶし色を指定します。 戻り値はインスタンス自身であるため、メソッドチェーンで他の設定を続けて記述する事が出来ます。 --- getColor() { 現在の線の色を取得します。 --- setFillColor(color:any) { color:any; 塗りつぶし色を指定します。 戻り値はインスタンス自身であるため、メソッドチェーンで他の設定を続けて記述する事が出来ます。 --- getFillColor() { 塗りつぶし色を取得します。 --- setLineWidth(width:number) { width:number; 線の太さを指定します。 戻り値はインスタンス自身であるため、メソッドチェーンで他の設定を続けて記述する事が出来ます。 --- getLineWidth() { 現在の線の太さを取得します。 --- setLineCap(lineCap:string) { lineCap:string;//bevel, round, miter 線末端の形状を指定します。詳しくはhtml5 canvasの資料を確認してください。 戻り値はインスタンス自身であるため、メソッドチェーンで他の設定を続けて記述する事が出来ます。 --- getLineCap() { 線末端の形状を取得します。 --- setLineJoin(lineJoin:string) { lineJoin:string//butt, round, square 線の結合方式を指定します。詳しくはhtml5 canvasの資料を確認してください。 戻り値はインスタンス自身であるため、メソッドチェーンで他の設定を続けて記述する事が出来ます。 --- getLineJoin() { 線の結合方式を取得します。 --- setMiterLimit(miterLimit:number) { miterLimit:number マイター限界比率を指定します。詳しくはhtml5 canvasの資料を確認してください。 戻り値はインスタンス自身であるため、メソッドチェーンで他の設定を続けて記述する事が出来ます。 --- getMiterLimit() { マイター限界比率を取得します。 --- setFill(fill:bool, color:any, closePath?:bool, stroke?:bool) { fill:bool;//塗りつぶしをするかどうか color:any;//塗りつぶし色 closePath?:bool;//closePathフィールドに指定する値 stroke?:bool;//strokeフィールドに指定する値 本クラスの塗りつぶしに関する値を一括で設定します。 戻り値はインスタンス自身であるため、メソッドチェーンで他の設定を続けて記述する事が出来ます。 --- addLine(line:any, y?:number) { line:any; y?:number; 直線を追加します。 本メソッドは一つの引数の場合、第一引数はCommonOffsetになります。二つの引数の場合、第一引数はxで第二引数はyになります。 戻り値はインスタンス自身であるため、メソッドチェーンで他の設定を続けて記述する事が出来ます。 --- addQuadraticLine(cp:any, p?:any) { cp:any; p?:any; 二次ベジェ曲線を追加します。 本メソッドは一つの引数の場合、第一引数はQuadraticPointになります。二つの引数の場合、第一第二の引数はCommonOffsetになります。4つの引数の場合、canvasのquadraticCurveToと同じ並びで全てnumberになります。 戻り値はインスタンス自身であるため、メソッドチェーンで他の設定を続けて記述する事が出来ます。 --- addBezierLine(cp1:any, cp2?:any, p?:any) { cp1:any; cp2?:any; p?:any; 三次ベジェ曲線を追加します。 本メソッドは一つの引数の場合、第一引数はBezierPointになります。三つの引数の場合、全ての引数はCommonOffsetになります。六つの引数の場合、canvasのbezierCurveToと同じ並びで全てnumberになります。 戻り値はインスタンス自身であるため、メソッドチェーンで他の設定を続けて記述する事が出来ます。 --- addArc(p:any, p2:any, radius:any) { p:any; p2:any; radius:any; 本メソッドは一つの引数の場合、第一引数はArcPointになります。三つの引数の場合、第一第二の引数はCommonOffsetとなり、第三引数は半径を指定するためのnumberとなります。五つの引数の場合、canvasのarcToと同じ並びで全てnumberになります。 戻り値はインスタンス自身であるため、メソッドチェーンで他の設定を続けて記述する事が出来ます。 --- add() { 本メソッドは一つの引数が指定された場合、addLineを呼び出します。 二つの引数が指定された場合、addQuadraticLineを呼び出します。 三つの引数が指定された場合、addBezierLineを呼び出します。 それ以外の引数の場合は例外をスローします。 戻り値はインスタンス自身であるため、メソッドチェーンで他の設定を続けて記述する事が出来ます。 --- draw(area:Area, context:CanvasRenderingContext2D) { area:Area; context:CanvasRenderingContext2D; ---