Создание блестящего графического эффекта / эффекта блеска

Question

Я бы хотел программным образом создать эффект блеска на изображении, подобно дизайну, вдохновленному Apple, который был принят в Интернете при обновлении до версии 2.0 Beta.

По сути это:

пример значков http://nhc.hcmuns.googlepages.com/web2_icons.jpg

Теперь я вижу два подхода: я создаю одно изображение с альфа-каналом с эффектом блеска, а затем просто комбинирую ввод и значок альфа-блеска, чтобы создать это.

Второй подход: создать изображение альфа-блеска в коде, а затем объединить его с входным изображением.

Я бы предпочел второе решение, но я не очень увлекаюсь графикой и не знаю, как называется алгоритм для создания таких эффектов. Может ли кто-нибудь дать мне несколько советов * для того, что я на самом деле ищу здесь? есть ли у "блескового алгоритма" название? или даже реализация .net уже?

* Нет, не те типы указателей.

Answer 1

Спасибо, Девин! Вот мой код C # для реализации вашего предложения. Это работает довольно хорошо. Превращая это в вики-сообщение, принадлежащее сообществу, если кому-то нравится добавлять код, не стесняйтесь редактировать это.

(Пример использует значения альфа и экспозиции, отличные от приведенного ниже кода)

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

(Изменено после предложения Джона. Однако я не могу удалить растровое изображение, это должен сделать вызывающий функции)

Answer 2

Я могу объяснить этот эффект в графических терминах.

1. Создайте изображение размером примерно 3 * от размера иконки.

2. На этом изображении создайте круг, в котором (высота значка) <радиус <2 * (высота значка). </p>

3. Заполните круг альфа-смесью / прозрачностью (до белого цвета), скажем, 10%.

4. Обрежьте это изображение круга в новое изображение, равное размеру ваших значков, где центр круга находится за пределами области просмотра, но вверх на 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 графической библиотеки, на которую вы можете просто ссылаться в любом проекте, который нуждается в этих возможностях в будущем!)