Dot-Net

創建閃亮的圖形/光澤效果

  • June 1, 2016

我想以程式方式在圖像上創建光澤效果,有點像 Web 在更新到 2.0 Beta 時採用的受 Apple 啟發的設計。

本質上是這樣的:

範例圖示 http://nhc.hcmuns.googlepages.com/web2_icons.jpg

現在,我在這裡看到了兩種方法:我創建了一個具有光澤效果的 Alpha 通道的圖像,然後我將輸入和光澤 Alpha 圖示組合起來創建它。

第二種方法:在程式碼中創建 Alpha Gloss Image,然後將其與輸入圖形合併。

我更喜歡第二種解決方案,但我不是一個圖形人,我不知道創建這種效果的算法是什麼。有人可以給我一些指示*我實際上在這裡尋找什麼嗎?有沒有名字的“光澤算法”?甚至已經實現了.net?

*不,不是那些類型的指針。

我可以用圖形術語來解釋這種效果。

  1. 創建一個大約 3* 圖示大小的圖像。
  2. 在此圖像中,創建一個圓圈,其中(圖示的高度)< 半徑 < 2*(圖示的高度)。
  3. 用 10% 的 alpha 混合/透明度(到白色)填充圓圈。
  4. 將該圓形圖像裁剪為與您的圖示大小相同的新圖像,其中圓形的中心位於查看區域之外,但向上是較小圖像高度的 1/2。

如果然後將此圖像疊加到原始圖示上,效果應該類似於上面的圖示。如果您熱衷於此,它應該可以使用 imagemagick,或者您可以根據要使用的語言選擇其中一種圖形 API。從上面的步驟來看,它應該很容易以程式方式進行。

謝謝你,德文!這是我的 C# 程式碼,用於實現您的建議。它工作得很好。將其變成社區擁有的 Wiki 文章,如果有人喜歡添加一些程式碼,請隨時編輯。

例子

(範例使用的 Alpha 和曝光值與下面的程式碼不同)

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;
}

(根據 John 的建議進行了更改。但我無法處理 Bitmap,這必須由函式的呼叫者完成)

引用自:https://stackoverflow.com/questions/109753