lineDirectionプロパティとsetStartPointメソッド、setEndPointメソッドの関係性について

画面表示 - ブラシ

lineDirectionプロパティとsetStartPointメソッド、setEndPointメソッドの関係性について

直線スタイルのグラデーションを実装する際に、直線の描画方向を設定することができます。
対象オブジェクトの左上の頂点を（0,0）、右下の頂点を(1,1)と置いた座標軸の中で、開始座標、終了座標をそれぞれ設定することで描画方向が決まります。
直線の描画方向の設定方法は大きく分けて２種類あります。
※以下のサンプルではグラデーションの始点から終点までの距離において、始点に赤色を、
　中間点に緑色を、終点に青色を設定しています。

　①lineDirectionプロパティによる設定
　　lineDirectionプロパティは、直線描画方向の設定を簡略化するプロパティです。
　　このプロパティを設定することで、描画方向の開始座標と終了座標が自動的に決定されます。
　　全４種類の描画方向を設定することができます。

　②setLineStartPointメソッド、setLineStopPointメソッドによる設定
　　setLineStartPointメソッドで描画方向の開始座標を設定できます。
　　setLineStopPointメソッドで描画方向の終了座標を設定できます。
　　これらのメソッドを用いることで、任意の直線描画方向を設定することができます。

　＜lineDirectionプロパティとsetLineStartPointメソッド、setLineStopPointメソッドが
　　混在している場合＞
　　lineDirectionプロパティとsetLineStartPointメソッド、setLineStopPointメソッドは、どちらも
　　オブジェクト内の同じ領域を更新します。
　　これらが混在している場合には、スクリプト上で後に記述されたものに座標が上書き
　　されますので、併用される場合はご注意下さい。

【実行結果①】

【実行結果②】

【実行結果③】

【実行結果④】

【実行結果⑤】

Form form1 {
    x = 0;
    y = 0;
    width = 1059;
    height = 600;
 
    Gradient gd1(Gradient.LINE) {
        /* 直線描画方向を１に設定 */
        lineDirection = 1;
        
        /* Colorクラスの設定 */
        this.setColorPoint(0.0, "red");
        this.setColorPoint(0.5, "green");
        this.setColorPoint(1.0, "blue");
    }
 
    Gradient gd2(Gradient.LINE) {
        /* 直線描画方向を２に設定 */
        lineDirection = 2;
        
        /* Colorクラスの設定 */
        this.setColorPoint(0.0, "red");
        this.setColorPoint(0.5, "green");
        this.setColorPoint(1.0, "blue");
    }
 
    Gradient gd3(Gradient.LINE) {
        /* 直線描画方向を３に設定 */
        lineDirection = 3;
        
        /* Colorクラスの設定 */
        this.setColorPoint(0.0, "red");
        this.setColorPoint(0.5, "green");
        this.setColorPoint(1.0, "blue");
    }
 
    Gradient gd4(Gradient.LINE) {
        /* 直線描画方向を４に設定 */
        lineDirection = 4;
        
        /* Colorクラスの設定 */
        this.setColorPoint(0.0, "red");
        this.setColorPoint(0.5, "green");
        this.setColorPoint(1.0, "blue");
    }
 
    Gradient gd5(Gradient.LINE) {
        /* 直線描画方向を任意の値に設定 */
        this.setLineStartPoint(0.2,0.8);
        this.setLineStopPoint(0.7,1);
        
        /* Colorクラスの設定 */
        this.setColorPoint(0.0, "red");
        this.setColorPoint(0.5, "green");
        this.setColorPoint(1.0, "blue");
    }
 
 
    Label lb1 {
        x = 20;
        y = 29;
        width = 300;
        height = 200;
        value = "lineDirection=1";
        Font = new Font("Meiryo UI", 20, true);
        FgColor = "white";
        BgColor = new Brush(^.gd1);
    }
 
    Label lb2 {
        x = 380;
        y = 29;
        width = 300;
        height = 200;
        value = "lineDirection=2";
        Font = new Font("Meiryo UI", 20, true);
        FgColor = "white";  
        BgColor = new Brush(^.gd2);
    }
 
    Label lb3 {
        x = 19;
        y = 263;
        width = 300;
        height = 200;
        value = "lineDirection=3";
        Font = new Font("Meiryo UI", 20, true);
        FgColor = "white";  
        BgColor = new Brush(^.gd3);
    }
 
    Label lb4 {
        x = 382;
        y = 258;
        width = 300;
        height = 200;
        value = "lineDirection=4";
        Font = new Font("Meiryo UI", 20, true);
        FgColor = "white";  
        BgColor = new Brush(^.gd4);
    }
 
    Label lb5 {
        x = 728;
        y = 147;
        width = 300;
        height = 200;
        value = "setLineStartPoint(0.2,0.8)\nsetLineStopPoint(0.7,1)";
        Font = new Font("Meiryo UI", 15, true);
        FgColor = "white";  
        BgColor = new Brush(^.gd5);
    }
}


		Biz-Collections Bizの宝箱トップへ
		Biz/Browser DT・Biz/Designer DT TIPS集トップへ