#ios #swift #uiimageview #uibezierpath #cashapelayer
#iOS #swift #uiimageview #uibezierpath #cashapelayer
Вопрос:
В настоящее время у меня есть представление изображения, которое содержит круглое изображение.
Я настроил это так:
profileImageView.layer.cornerRadius = self.profileImageView.frame.size.width / 2
profileImageView.clipsToBounds = true
Я пытаюсь нарисовать дугу вокруг круга, используя UIBezierPath, и я хотел бы передать радиус изображения для параметра radius.
let circlePath = UIBezierPath(arcCenter: CGPoint(x: profileImageView.frame.size.width/2, y: profileImageView.frame.size.height/2), radius: IMG_VIEW_RADIUS, startAngle: CGFloat(0), endAngle:CGFloat(M_PI * 2), clockwise: true)
Как бы я это сделал?
Комментарии:
1. разве вы не можете использовать границу просмотра изображения
2. Я уже настроил это, но я хотел бы также создать дугу, которая перекрывает границу
3. Просто хак — почему бы не создать другой вид изображения, прозрачный для этого, и просто добавить его границу. Укажите вторую высоту ширины изображения, уменьшенную на 1 от первой, и добавьте поверх первого изображения
4. ооооо, звучит неплохо. Я собираюсь попробовать это
5. Другой способ размещен в качестве ответа
Ответ №1:
Swift 3.0
Другой способ
Я только что добавил изображение, подобное этому
let imageView = UIImageView(frame: CGRect(x: 100, y: 100, width: 200, height: 200))
imageView.backgroundColor = UIColor.green
imageView.layer.cornerRadius = imageView.frame.size.width / 2
imageView.clipsToBounds = true
self.view.addSubview(imageView)
Выполнение кругового пути Безье
let circlePath = UIBezierPath(arcCenter: CGPoint(x: imageView.frame.size.width/2,y: imageView.frame.size.height/2), radius: CGFloat((imageView.frame.size.width/2) - 3.5), startAngle: CGFloat(0), endAngle:CGFloat(M_PI * 2), clockwise: true)
let shapeLayer = CAShapeLayer()
shapeLayer.path = circlePath.cgPath
//fill color
shapeLayer.fillColor = UIColor.clear.cgColor
//stroke color
shapeLayer.strokeColor = UIColor.white.cgColor
//line width
shapeLayer.lineWidth = 2.0
//finally adding the shapeLayer to imageView's layer
imageView.layer.addSublayer(shapeLayer)
Теперь создаем внешнюю границу, используя ту же концепцию
let outerCirclePath = UIBezierPath(arcCenter: CGPoint(x: imageView.frame.size.width/2,y: imageView.frame.size.height/2), radius: CGFloat(imageView.frame.size.width/2 ), startAngle: CGFloat(0), endAngle:CGFloat(M_PI * 2), clockwise: true)
let outerLayer = CAShapeLayer()
outerLayer.path = outerCirclePath.cgPath
//fill color
outerLayer.fillColor = UIColor.clear.cgColor
//stroke color
outerLayer.strokeColor = UIColor.blue.cgColor
//line width
outerLayer.lineWidth = 15.0
imageView.layer.addSublayer(outerLayer)
Теперь измените zPosition
слой формы, созданный для внутреннего слоя, поскольку его радиус меньше, чем у внешнего слоя, и его следует добавить сверху, чтобы он был виден
shapeLayer.zPosition = 2
Вам нужно немного изменить радиус первого внутреннего слоя. В моем случае я просто вычел радиус с 3.5
Комментарии:
1. Потрясающе, вы случайно не знаете, есть ли у меня способ добавить этот слой поверх границы?
2. @FaisalSyed Хорошо, я собираюсь изменить код в соответствии с вашими требованиями через 2 минуты
3. @FaisalSyed Проверьте сейчас. Вам нужно один раз немного изменить значения радиуса для внутреннего слоя, а также обязательно изменить
zPosition
добавленный внутренний слой, т. е.shapeLayer
в вашем случае, иначе он не будет отображаться4. не знаю, почему это было отклонено ранее, если кто-нибудь проголосует против, пожалуйста, прокомментируйте также, что не так, чтобы можно было сделать предположительное улучшение
Ответ №2:
просто используйте ширину границы и цвет границы
profileImageView?.layer.cornerRadius = 5.0
profileImageView?.layer.borderColor = UIColor.white.cgColor
Комментарии:
1. Я пытаюсь добавить дугу в пределах моей границы. Добавленная таким образом граница скроет дугу