Поместите границу вокруг частично прозрачного изображения, нарисованного на CGContext

У меня есть изображение с желтой вазой на переднем плане и прозрачным фоном:

Я рисую его в CGContext:

CGContextDrawImage(context, CGRectMake(0, 0, 100, 100), myImage.CGImage);

Я могу нарисовать тень вокруг него, используя следующую инструкцию перед CGContextDrawImage:

CGContextSetShadowWithColor(context, CGSizeMake(0,0), 5, [UIColor blueColor].CGColor);

Но я хочу поместить штрих вокруг изображения, чтобы он выглядел следующим образом:

Если я сделал это:

CGContextSetRGBStrokeColor(shadowContext, 0.0f, 0.0f, 1.0f, 1.0f);
CGContextSetLineWidth(shadowContext, 5);
CGContextStrokeRect(shadowContext, CGRectMake(0, 0, 100, 100));

Он (очевидно) рисует прямоугольную рамку вокруг всего iamge следующим образом:

Это не то, что мне нужно.

Но какой лучший способ сделать границу как в третьем изображении?

Обратите внимание, что в этом случае невозможно использовать UIImageView, поэтому использование свойств CALayer из UIImageView не применимо.

Ответы

Ответ 1

Один из способов сделать это - использовать оператор математической морфологии дилатации, чтобы "вырастить" альфа-канал изображения наружу, а затем использовать получающееся изображение в оттенках серого в качестве маски для имитации штриха. Заполняя расширенную маску, затем, рисуя основное изображение сверху, вы получаете эффект удара. Я создал демоверсию, демонстрирующую этот эффект, доступный в Github здесь: https://github.com/warrenm/Morphology (весь источник лицензирован MIT, если он окажется полезным для вас).

И вот снимок экрана в действии:

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

Ответ 2

Я попытался бы либо установить цвет штриха и ширину линии перед вашим вызовом CGContextDrawImage, либо настроить тень (непрозрачность, размытие и т.д.), чтобы она выглядела как обводка вокруг изображения. Дайте мне знать, если это сработает!