Как сделать градиентный круговой путь в Swift - PullRequest
Новая
       44

Как сделать градиентный круговой путь в Swift

0 голосов
/ 16 января 2019

Я хочу создать градиентный круговой путь, как показано на следующем рисунке:

enter image description here

и у меня есть следующий код: 

    circularPath = UIBezierPath(arcCenter: .zero, radius: radius, startAngle: 0, endAngle: .pi * 2, clockwise: true)
    outerTrackShapeLayer = CAShapeLayer()
    outerTrackShapeLayer.path = circularPath.cgPath
    outerTrackShapeLayer.position = position
    outerTrackShapeLayer.strokeColor = outerTrackColor.cgColor
    outerTrackShapeLayer.fillColor = UIColor.clear.cgColor
    outerTrackShapeLayer.lineWidth = lineWidth
    outerTrackShapeLayer.strokeEnd = 1
    outerTrackShapeLayer.lineCap = CAShapeLayerLineCap.round
    outerTrackShapeLayer.transform = rotateTransformation
    addSublayer(outerTrackShapeLayer)

    innerTrackShapeLayer = CAShapeLayer()
    innerTrackShapeLayer.strokeColor = innerTrackColor.cgColor
    innerTrackShapeLayer.position = position
    innerTrackShapeLayer.strokeEnd = progress
    innerTrackShapeLayer.lineWidth = lineWidth
    innerTrackShapeLayer.lineCap = CAShapeLayerLineCap.round
    innerTrackShapeLayer.fillColor = UIColor.clear.cgColor
    innerTrackShapeLayer.path = circularPath.cgPath
    innerTrackShapeLayer.transform = rotateTransformation
    let gradient = CAGradientLayer()
    gradient.frame = circularPath.bounds
    gradient.colors = [UIColor.magenta.cgColor, UIColor.cyan.cgColor]
    gradient.position = innerTrackShapeLayer.position
    gradient.mask = innerTrackShapeLayer
    addSublayer(gradient)

но это не работает правильно, вы можете увидеть результат на следующем рисунке:

enter image description here

Буду признателен, если кто-нибудь поможет мне, спасибо.

1 Ответ

0 голосов
/ 21 января 2019

Похоже, что рамка слоя градиента установлена ​​равной рамке пути, которая не включает толщину обводки CAShapeLayer, поэтому она обрезается в квадрате.Я не могу видеть из кода, есть ли у вас круговой путь в подпредставлении, но если вы установите рамку градиента такой же, как в рамке подпредставления, которая должна сортировать обрезку, а также смещение представления прогресса на дорожке.

Надеюсь, это поможет.

...