Source Viewer

        
@page "/gradation"
@using System.Text.RegularExpressions

<h1 style="@titleStyle">グラデーション</h1>
<p style="font-size:small">
このページはASP.NET Core Blazor Server Sideを使用して作成されています。<br/>
コードは全てJavascriptではなく、C#で記述します。(C#からJavascript呼出しも可)<br/>
イベント発生時はビルトインのJavascriptがSingalRを用いてサーバーに通知,<br/>
サーバーでの処理後、SignalRを用いてブラウザに結果が通知されます。<br/>
ブラウザ側のJavascript(blazorのビルトイン)が結果を元にDOMの変更部分のみを再描画します。<br/>
例えば、上の&lt;h1&gt;タグはソース上では以下のように定義されており、実際にはその下のように変換されます。<br/>
(@@titleStyleはtitleStyleというC#の変数値に置き換えられる)
<pre>
	&lt;h1 style="@@titleStyle"&gt;グラデーション&lt;/h1&gt;
	&dArr;
    @{
        string ttl = Regex.Replace(titleStyle,"([#][0-9,a-f]{6})","<span style='color:red;font-weight:bold'>$1</span>");
    }
	&lt;h1 style="@((MarkupString)@ttl)","&gt;グラデーション&lt;/h1&gt;
</pre>
<br/>
<a href="/ShowCode?FileName=Gradation.razor.src&Return=gradation">ソース</a>
</p>

<br/>
<span style="font-weight:bold">Linear Gradient</span>
<div style="@BgStyle">
    <div style="display:table-cell;vertical-align:middle;text-align:center">
        Gradation:&nbsp;
        <!-- カラーピッカーのイベントは指定変数へ値を設定し、スタイル文字列の変更を行う -->
        <input type="color" oninput="@((Action<ChangeEventArgs>)((e)=>setGradationColor(e,out fromColor)))" value="@fromColor"/>
        &nbsp;～&nbsp;
        <input type="color" oninput="@((Action<ChangeEventArgs>)((e)=>setGradationColor(e,out toColor)))" value="@toColor"/><br/>
        &uArr;<br/>
        カラーピッカーからも色を変更できます。
    </div>
</div>
<br/>
角度：<input type="range" min="0" max="180" value="@Degree" oninput="@((Action<ChangeEventArgs>)((e)=>{Degree=Convert.ToInt32(e.Value);setGradation();}))"/>&nbsp;<span>@Degree</span>&deg;
<br/>
<br/>
<span style="font-weight:bold">Radial Gradient</span>
<div style="@circleStyle">
</div>
開始位置(X)：<input type="range" min="0" max="100" value="@startX"
    oninput="@((Action<ChangeEventArgs>)(e=>{startX=Convert.ToInt32(e.Value);setGradation();}))" />&nbsp;<span>@startX</span>px<br/>
開始位置(Y)：<input type="range" min="0" max="100" value="@startY"
     oninput="@((Action<ChangeEventArgs>)(e=>{startY=Convert.ToInt32(e.Value);setGradation();}))" />&nbsp;<span>@startY</span>px<br/>
開始色開始位置:<input type="range" min="5" max="80" value="@fColorStart"
    oninput="@((Action<ChangeEventArgs>)(e=>{fColorStart=Convert.ToInt32(e.Value);setGradation();}))"/>&nbsp;<span>@fColorStart</span>px<br/>
終了色開始位置:<input type="range" min="@fColorStart" max="80" value="@tColorStart"
    oninput="@((Action<ChangeEventArgs>)(e=>{tColorStart=Convert.ToInt32(e.Value);setGradation();}))"/>&nbsp;<span>@tColorStart</span>px&nbsp;&nbsp;
<button class="btn btn-primary" @onclick="btnResetClick">リセット</button>
<br/>
<button class="btn btn-primary" @onclick="btnGradationClick">Change Color</button>&nbsp;&lArr;ランダムに色と角度を生成します


@code {　// ここにC#コードを記述
    // インスタンス変数
    private string BgStyle;     // DIVのバックグラウンドスタイル
    private string fromColor;   // グラデーション開始色
    private string toColor;     // グラデーション終了色
    private int Degree;         // グラデーション角度
    private string titleStyle;  // H1のスタイル
    private string circleStyle;
    private int startX;
    private int startY;
    private int fColorStart;
    private int tColorStart;
    
    // DIVバックグラウンドスタイルのベース
    const string BGSTYLEBASE = @"display:table;border-style:solid;border-color:black;
        border-width:1px;width:350px;height:200px;border-radius:10px;
        box-shadow: 2px 2px 4px gray;
        background: linear-gradient({2}deg, {0}, {1})";

    // DIV(Circle)バックグラウンドスタイルのベース
    const string CIRCLESTYLEBASE = @"width:100px;height:100px;border-radius:50px;
        background:radial-gradient(circle farthest-corner at {2}px {3}px,#ffffff,{0} {4}px,{1} {5}px)";
    // H1スタイルのベース
    const string titleStyleBase = @"font-weight:bold;
        background: linear-gradient({0},{1});
        -webkit-text-fill-color: transparent;-webkit-background-clip: text;";
    //
    //  初期化終了時イベントハンドラ
    //
    protected override void OnInitialized() {
        fromColor = "#808080";
        toColor = "#ffffff";
        Degree = 180;
        setInitialValuese();
        setGradation();
    }
    //
    //  ボタンクリック時イベントハンドラ
    //
    protected void btnGradationClick() {

        // ランダムに開始色と終了色，角度を生成する
        Random rnd = new Random();

        int r = rnd.Next(256);
        int g = rnd.Next(256);
        int b = rnd.Next(256);

        fromColor = $"#{r.ToString("x2")}{g.ToString("x2")}{b.ToString("x2")}";

        r = rnd.Next(256);
        g = rnd.Next(256);
        b = rnd.Next(256);

        toColor = $"#{r.ToString("x2")}{g.ToString("x2")}{b.ToString("x2")}";

        Degree = rnd.Next(180);

        // スタイル文字列を変更する
        setGradation();
    }
    //
    // input type="color"の値変更時の処理
    //
    private void setGradationColor(ChangeEventArgs e, out string color) {
        // コントロールの値を指定変数に設定
        color = e.Value.ToString();
        setGradation();
    }
    private void setGradation() {
        // スタイル文字列を変更
        BgStyle = string.Format(BGSTYLEBASE,fromColor,toColor,Degree);
        titleStyle = string.Format(titleStyleBase,fromColor,toColor);
        circleStyle = string.Format(CIRCLESTYLEBASE,fromColor,toColor,startX,startY,fColorStart,tColorStart);
    }
    //
    //  リセットボタンクリック時処理
    //
    private void btnResetClick() {
        setInitialValuese();
        setGradation();
    }
    //
    //  ラディアルグラデーションのパラメータ初期化
    //
    private void setInitialValuese() {
        fColorStart = 10;
        tColorStart = 70;
        startX = 40;
        startY = 30;
    }
}
Source Viewer-Gradation.razor.src
