Как мне отбросить две тени из UIImageView с символом SF в качестве изображения? - PullRequest
Новая
       48

Как мне отбросить две тени из UIImageView с символом SF в качестве изображения?

3 голосов
/ 01 февраля 2020

Я хочу отбросить тень внизу слева и внизу справа от моего изображения. Но я изо всех сил пытаюсь получить второе отбрасывание теней (layer2) ...

enter image description here

Я создал подкласс представления UIImage и использую это в IB: 

import UIKit

class ShadowImageView: UIImageView {

    var layer2 = CALayer()

    override func layoutSubviews() {
        super.layoutSubviews()

        self.layer2 = CALayer(layer: self.layer)

        self.clipsToBounds = false

        self.layer.shadowColor = UIColor.gray.cgColor
        self.layer.shadowOffset = CGSize(width: -16, height: 16)
        self.layer.shadowOpacity = 0.33
        self.layer.shadowRadius = 3
        self.layer.masksToBounds = false

        self.layer2.shadowColor = UIColor.gray.cgColor
        self.layer2.shadowOffset = CGSize(width: 16, height: 16)
        self.layer2.shadowOpacity = 0.33
        self.layer2.shadowRadius = 3
        self.layer2.masksToBounds = false

        self.layer.insertSublayer(self.layer2, at: 0)

        print("\(self.layer)\n")
        if let sublayers = self.layer.sublayers {
            for layer in sublayers {
                print("\(layer)\n")
            }
        }
    }
}

Собираюсь ли я в правильном направлении, чтобы скопировать слой и нанести на него новую тень, или я должен смотреть в другом направлении?

Ответы [ 2 ]

0 голосов
/ 03 февраля 2020

enter image description here

Исправлена ​​проблема с тенью. Я смог создать двойные тени, добавив 3 слоя на свой UIView. Самым дальним позади (первый подслой слоя вида) находится более темная тень, поверх которой находится более светлая тень, а сверху у меня есть одна с нормальным цветом.

I'm ' рисование изображений на слоях путем применения тени и цвета.

Изображение, которое я рисую, получено с помощью метода, подобного перечисленному ниже, но оно не генерируется из символов SFS. Я хотел бы сгенерировать его во время выполнения, чтобы в итоге я использовал простой метод использования символов для размещения элементов Neumorphi c в наших приложениях. Ручная генерация этих BezierPaths не очень приятна. 

static var shieldFill: UIBezierPath = {
    let bezierPath = UIBezierPath()
    bezierPath.move(to: CGPoint(x: 58.94, y: 115.53))
    bezierPath.addCurve(to: CGPoint(x: 62.84, y: 114.4), controlPoint1: CGPoint(x: 60.06, y: 115.53), controlPoint2: CGPoint(x: 61.57, y: 115.04))
    bezierPath.addCurve(to: CGPoint(x: 101.76, y: 74.46), controlPoint1: CGPoint(x: 91.5, y: 100.49), controlPoint2: CGPoint(x: 101.76, y: 91.89))
    bezierPath.addLine(to: CGPoint(x: 101.76, y: 39.94))
    bezierPath.addCurve(to: CGPoint(x: 92.04, y: 25.05), controlPoint1: CGPoint(x: 101.76, y: 31.84), controlPoint2: CGPoint(x: 99.41, y: 28.12))
    bezierPath.addCurve(to: CGPoint(x: 67.63, y: 16.85), controlPoint1: CGPoint(x: 87.89, y: 23.29), controlPoint2: CGPoint(x: 71.29, y: 17.97))
    bezierPath.addCurve(to: CGPoint(x: 58.94, y: 15.53), controlPoint1: CGPoint(x: 64.94, y: 16.11), controlPoint2: CGPoint(x: 61.52, y: 15.53))
    bezierPath.addCurve(to: CGPoint(x: 50.24, y: 16.85), controlPoint1: CGPoint(x: 56.35, y: 15.53), controlPoint2: CGPoint(x: 52.93, y: 16.11))
    bezierPath.addCurve(to: CGPoint(x: 25.83, y: 25.05), controlPoint1: CGPoint(x: 46.53, y: 17.97), controlPoint2: CGPoint(x: 29.93, y: 23.29))
    bezierPath.addCurve(to: CGPoint(x: 16.11, y: 39.94), controlPoint1: CGPoint(x: 18.46, y: 28.12), controlPoint2: CGPoint(x: 16.11, y: 31.84))
    bezierPath.addLine(to: CGPoint(x: 16.11, y: 74.46))
    bezierPath.addCurve(to: CGPoint(x: 55.03, y: 114.4), controlPoint1: CGPoint(x: 16.11, y: 91.89), controlPoint2: CGPoint(x: 26.46, y: 100.29))
    bezierPath.addCurve(to: CGPoint(x: 58.94, y: 115.53), controlPoint1: CGPoint(x: 56.3, y: 115.04), controlPoint2: CGPoint(x: 57.76, y: 115.53))
    bezierPath.close()

    return bezierPath
}()
0 голосов
/ 03 февраля 2020

Мне удалось получить это очень легко:

enter image description here

Кажется, вы ищете именно то, что вам нужно.

Двойная тень проистекает из того факта, что в графическом контексте теневое рисование является состоянием, применяемым к любому будущему рисунку. Таким образом, если вы установите тень контекста вниз и влево и нарисуете изображение символа, а затем установите тень контекста вниз и вправо и нарисуете изображение символа, вы получите двойная тень.

Это правда, что само изображение символа рисуется дважды, но это не обязательно меняет способ его отображения; если бы я не сказал вам, что я нарисовал бы это дважды, я не думаю, что вы знали бы.

...