8

2.0 Beta に更新されたときに Web が採用した Apple 風のデザインのように、画像に光沢効果をプログラムで作成したいと思います。

基本的にこれ：

アイコンの例 http://nhc.hcmuns.googlepages.com/web2_icons.jpg

さて、ここで 2 つのアプローチが見られます。光沢効果のあるアルファ チャネルを持つ 1 つの画像を作成し、入力と光沢アルファ アイコンを組み合わせてこれを作成します。

2 番目の方法: コードで Alpha Gloss Image を作成し、それを入力グラフィックとマージします。

私は 2 番目の解決策を好みますが、私はあまりグラフィックスを得意とせず、そのような効果を作成するためのアルゴリズムが何と呼ばれているのかわかりません。私が実際にここで見ているものについて、誰かが私にいくつかの指針*を与えることができますか? 名前のある「光沢アルゴリズム」はありますか? それとも .net の実装が既にありますか?

*いいえ、それらのタイプのポインターではありません。

4

3 に答える 3

17

ありがとう、デヴィン！これがあなたの提案を実装するための私のC＃コードです。それはかなりうまくいきます。これをコミュニティ所有のWiki投稿に変えてください。誰かがコードを追加したい場合は、これを自由に編集してください。

例

（例では、以下のコードとは異なるアルファと露出の値を使用しています）

Image img = Image.FromFile("rss-icon.jpg");
pictureBox1.Image = AddCircularGloss(img, 30,25,255,255,255);

public static Image AddCircularGloss(Image inputImage, int exposurePercentage, int transparency, int fillColorR, int fillColorG, int fillColorB)
{
    Bitmap outputImage = new Bitmap(inputImage);
    using (Graphics g = Graphics.FromImage(outputImage))
    {
        using (Pen p = new Pen(Color.FromArgb(transparency, fillColorR, fillColorG, fillColorB)))
        {
            // Looks jaggy otherwise
            g.SmoothingMode = SmoothingMode.HighQuality;
            g.CompositingQuality = CompositingQuality.HighQuality;
            int x, y;

            // 3 * Height looks best
            int diameter = outputImage.Height * 3;
            double imgPercent = (double)outputImage.Height / 100;
            x = 0 - outputImage.Width;

            // How many percent of the image to expose
            y = (0 - diameter) + (int)(imgPercent * exposurePercentage);
            g.FillEllipse(p.Brush, x, y, diameter, diameter);
        }
    }
    return outputImage;
}

（ジョンの提案の後で変更されました。ビットマップを破棄することはできませんが、これは関数の呼び出し元が行う必要があります）

于 2008-09-21T00:19:14.930 に答える
8

その効果を図で説明できます。

  1. アイコンの約 3 倍のサイズの画像を作成します。

  2. この画像内で、(アイコンの高さ) < 半径 < 2*(アイコンの高さ) の円を作成します。

  3. 10% のアルファ ブレンド/透明度 (白まで) で円を塗りつぶします。

  4. その円の画像をアイコンと同じサイズの新しい画像に切り抜きます。円の中心は表示領域の外側の中心にありますが、小さい画像の高さの 1/2 だけ上にあります。

このイメージを元のアイコンに重ね合わせると、効果はほぼ上記のアイコンのようになります。あなたがそれに熱心であれば、imagemagickで実行できるはずです。または、使用したい言語に応じて、グラフィックAPIのいずれかを使用できます。上記の手順から、プログラムで行うのは簡単です。

于 2008-09-20T23:34:25.913 に答える
3

C＃コードへの応答...全体として、イメージングを開始する上で良い仕事です。私は過去にいくつかのアプリで同様のことをしなければなりませんでした。

ただし、アドバイスの1つは、.NETのすべてのグラフィックスオブジェクトがWindowsGDI+プリミティブに基づいていることです。つまり、これらのオブジェクトは、ファイルハンドルやデータベース接続のように、メモリ以外のリソースをクリーンアップするために適切に破棄する必要があります。それを正しくサポートするために、コードを少し微調整する必要があります。

すべてのGDI+オブジェクトは、IDisposableインターフェイスを実装し、usingステートメントで機能するようにします。次のようにコードを書き直すことを検討してください。

// Experiment with this value
int exposurePercentage = 40;

using (Image img = Image.FromFile("rss-icon.jpg"))
{
    using (Graphics g = Graphics.FromImage(img))
    {    
        // First Number = Alpha, Experiment with this value.
        using (Pen p = new Pen(Color.FromArgb(75, 255, 255, 255)))
        {
            // Looks jaggy otherwise
            g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.AntiAlias;

            int x, y;

            // 3 * Height looks best
            int diameter = img.Height * 3;
            double imgPercent = (double)img.Height / 100;
            x = 0 - img.Width;

            // How many percent of the image to expose
            y = (0 - diameter) + (int)(imgPercent * exposurePercentage);

            g.FillEllipse(p.Brush, x, y, diameter, diameter);

            pictureBox1.Image = img;
        }
    }
}

（私のサンプルのほとんどとは異なり、これをコンパイルしてテストする機会がなかったことを覚えておいてください...これは、完成品としてではなく、リソースリークがないことを確認するためのコードを構造化するサンプルとしての意味がありますとにかくそれを抽象化/構造化するためのより良い方法があるでしょう。そしてそうすることを強く検討してください-将来これらの機能を必要とするプロジェクトで参照できるグラフィックライブラリDLLにこれを投げてください！）

于 2008-09-21T10:17:17.473 に答える