色値変換ツールを使用します。

色値変換ツールを使用します。

HEX、RGB、BA、ARGB、HSL间の相互変换

最后更新 2023/07/04 22:49
沙漠尽头的狼
预计阅读 3 分钟
分类
Blazor
标签
.NET Blazor カラー変換

こんにちは、私は砂漠の果ての狼です。

前几天刚上线一个颜色值转换工具,当然这是借鉴的,可实现:

  1. HEX、RGB、RGBA、ARGB、HSL間の相互変換;
  2. HTMLとCSSのカラー仕様で定義されている147の色名(17の標準色と130のその他の色)を開発中に見つけるための非常に便利なCSSカラーテーブルを示しています。

この記事では、このツールを開発する際に、関連するJSコードとC#コードの翻訳と比較を簡単に列挙し、同様の開発参照をフォローアップしやすくします。

JS文件:点这

  1. カラー値HEX変換

提取HEX#9A3B34中R(Red)、G(Green)、B(Blue)的色值。

JSコードです

function parseHEX(val) {
    let color = new Color();
    try {
        let rgx = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
        let hex = val.replace(rgx, function (m, r, g, b) {
            return r + r + g + g + b + b;
        });
        let rgb = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
        color.r = parseInt(rgb[1], 16);
        color.g = parseInt(rgb[2], 16);
        color.b = parseInt(rgb[3], 16);
    } catch (e) {
        console.log(e)
    }
    return color;
}

C#のコード

public static Color? ParseHEX(string hexColor)
{
    hexColor = hexColor.TrimStart('#');

    Regex regex = new(@"^([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$");
    var match = regex.Match(hexColor);

    if (match?.Success == true)
    {
        int red = Convert.ToInt32(match.Groups[1].Value, 16);
        int green = Convert.ToInt32(match.Groups[2].Value, 16);
        int blue = Convert.ToInt32(match.Groups[3].Value, 16);

        return new Color(red, green, blue);
    }
    else
    {
        return null;
    }
}

2. カラー値RGBA変換

変換ロジックは基本的に同じです。

JSコードです

function parseRGBA(val) {
    let color = new Color();
    try {
        let rgba = /^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/.exec(val);
        color.r = parseInt(rgba[1]);
        color.g = parseInt(rgba[2]);
        color.b = parseInt(rgba[3]);
        color.a = parseFloat(rgba[4] || 1);
    } catch (e) {
        console.log(e)
    }
    return color;
}

C#のコード

public static Color? ParseRGBA(string color)
{
    Regex regex = new Regex(@"^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$");
    var match = regex.Match(color);

    if (match?.Success == true)
    {
        int r = int.Parse(match.Groups[1].Value);
        int g = int.Parse(match.Groups[2].Value);
        int b = int.Parse(match.Groups[3].Value);
        if (!double.TryParse(match.Groups[4].Value, out double a))
        {
            a = 1;
        }

        return new Color(r, g, b, a);
    }

    return null;
}

chatGPTを介して、JSコードをC#コードに簡単に翻訳することができ、Blazorツールを迅速に行うことができ、他のオンラインプログラミング言語翻訳サイトは理想的ではなく、より多くの状況が手動で変更する必要があります。

Keep Exploring

延伸阅读

更多文章
同分类 / 同标签 2024/11/06

なぜ私のブログはBlazorに戻るのか?

ブログサイトの開発は苦労し、MVC、Vue、Goなどの10近くのバージョンを試してきましたが、Blazorに戻り、静的SSRを使用して、速度が急上昇し、正常にオンラインになりました。

继续阅读
同分类 / 同标签 2024/02/29

Winformでもデータを表示できます。

winform開発の過程では、しばしばデータ表示機能を行う必要がありますが、以前はグリッドコントロールを使用していましたが、今日は例を通じて、Winform Blazorハイブリッドでant Design Blazorテーブルコンポーネントを使用してデータ表示を行う方法を紹介します。

继续阅读
同分类 / 同标签 2024/02/29

Winformのインターフェースも良く見えますか?

先日、winformでBlazorハイブリッドを使用することを紹介しましたが、Blazor UIを使用するとwinformプログラムがより良く見えるようになると述べました。次に、winform Blazorハイブリッドで描画する例を示したいと思います。

继续阅读
同分类 / 同标签 2024/01/07

“記事タイトルURLエイリアスジェネレータ”を公開

Code Factoryは、ウェブサイトツール、クロスプラットフォームのデスクトップおよびモバイルアプリケーションを提供するウェブマスターのための新しいオープンソースプロジェクトです。ウェブマスターは最終的により効率的で便利な体験を提供することを約束します。今日、ウェブマスターは記事タイトルURLエイリアスを簡単に作成し、SEOとユーザーエクスペリエンスを向上させるのに役立つ記事タイトルURLエイリアスジェネレータを導入しました。もっと実用的なツールを発見してください!

继续阅读