Заполните изображение с помощью ImageMask Swift

Question

Я пытаюсь поиграть, как заполнить PNG, центр которого прозрачен цветом. Я сделал вам предварительный просмотр, чтобы визуализировать то, что я не в состоянии объяснить: D

«щита Икона» только инсульт. У них нет фона ни внутри, ни снаружи.

Я хочу, чтобы вызвать функцию как

func fillShield(percentage: CGFLoat) { 
    ... 
    //code needed to fill the shield 
} 

Как мне удается получить что-то подобное, что работа в стрижа?

Cheers, Никлас

Answer 1

Вместо PNG у вас есть исходный SVG (или вы можете получить один). Если это так, я предлагаю получить PaintCode, который возьмет этот SVG и даст вам код, чтобы нарисовать его с помощью кривых Безье - оттуда его очень легко также частично заполнить - вы можете использовать безье и прямоугольник в качестве маски.

Если нет, можете ли вы изменить png так, чтобы он не был прозрачным снаружи? Если это так, вам нужно только нарисовать зеленый прямоугольник внизу, и он будет отображаться.

Если вам нужна прозрачная внешняя сторона (чтобы наложить на фон), сделайте две копии PNG, одну с прозрачной внутри и одну с прозрачной наружной. Используйте первый, чтобы сделать изображение прогресса, а затем скопируйте альфа-канал из второго в результат.

CoreImage и CoreGraphics есть функции, которые вы должны сделать каждую часть - вот ссылка для понимания того, как добраться до пикселов (для копирования каналов):

http://www.raywenderlich.com/69855/image-processing-in-ios-part-1-raw-bitmap-modification

EDIT: Разработка. Вам нужны два изображений

1. Image 1 является щитом с белым непрозрачным снаружи и прозрачным на внутреннем

2. Image 2 щита с белыми непрозрачным на внутреннем и прозрачном на внешних

шаги:

1. рисовать зеленый прямоугольник с го е высота определяется по прогрессу, а нижняя часть установлена ​​на внутреннее дно экрана на изображение с использованием CoreGraphics

2. Нарисуйте изображение 1 поверх этого. Теперь у вас есть изображение со щитом, заполненным зеленым проходом и белым с внешней стороны.

3. Скопируйте альфа-канал изображения 2 на результат этапа 2. Теперь у вас есть изображение с прогрессом, заполненным и прозрачным снаружи.