Question

我想以编程方式在Image上创建一个光泽效果，就像Web在更新到2.0 Beta时采用的Apple设计一样。

基本上就是这样：

example icons http://nhc.hcmuns.googlepages.com/web2_icons.jpg

现在，我在这里看到两种方法：我创建一个具有光泽效果的Alpha通道的图像，然后我只是将输入和光泽alpha图标组合起来创建它。

第二种方法：在代码中创建Alpha Gloss Image，然后将其与输入图形合并。

我更喜欢第二种解决方案，但我不是一个图形人，我不知道算法是什么来创造这样的效果。有人可以给我一些指示*我实际上在这里看到的是什么吗？有没有一个名字的“光泽算法”？或者甚至是.net实现了吗？

*不，不是those type指针。

Answer 1

谢谢你，德文！这是我的C＃代码，用于实现您的建议。它的效果非常好。将此转换为社区拥有的Wiki帖子，如果有人喜欢添加一些代码，请随时编辑。

example

（示例使用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，但这必须由函数的调用者来完成）

Answer 2

我可以用图形术语来解释这种效果。

创建一个大约图标大小3 *的图像。
在此图片中，创建一个圆圈，其中（图标的高度）＆lt;半径＆lt; 2 *（图标的高度）。
用10％的alpha混合/透明度（白色）填充圆圈。
将圆形图像裁剪成与图标大小相同的新图像，其中圆的中心位于查看区域之外的中心，但向上移动较小图像的高度的1/2。

如果您将此图像叠加到原始图标上，效果应该与上面的图标大致相同。如果你热衷于imagemagick它应该是可行的，或者你可以选择其中一个图形API，具体取决于你想要使用的语言。从上面的步骤可以直接以编程方式进行。

Answer 3

响应C＃代码...总体而言，做好成像的工作做得很好。我过去不得不对我的一些应用程序做类似的事情。

然而，有一条建议：.NET中的所有图形对象都基于Windows GDI +原语。这意味着这些对象需要正确处理以清理其非内存资源，就像文件句柄或数据库连接一样。您需要稍微调整一下代码才能正确支持。

所有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中，您可以在将来需要这些功能的任何项目中引用它！）

创建闪亮的图形/光泽效果

3 个答案: