Как добавить закругленный угол в пользовательский прямоугольник UIBezierPath?

Мне удалось создать закругленные углы, но у меня возникли проблемы с первым закругленным углом (справа внизу)

Вопрос:

  • Можно ли добавить метод (addArcWithCenter) перед методом (moveToPoint)?
  • Как я могу избавиться от прямой линии в начале прямоугольника (внизу справа)?

вот мой код для пользовательского прямоугольника и скриншот:

let path = UIBezierPath()
path.moveToPoint(CGPoint(x: 300, y: 0))
path.addArcWithCenter(CGPoint(x: 300-10, y: 50), radius: 10 , startAngle: 0 , endAngle: CGFloat(M_PI/2)  , clockwise: true) //1st rounded corner
path.addArcWithCenter(CGPoint(x: 200, y: 50), radius:10, startAngle: CGFloat(2 * M_PI / 3), endAngle:CGFloat(M_PI) , clockwise: true)// 2rd rounded corner
path.addArcWithCenter(CGPoint(x: 200, y: 10), radius:10, startAngle: CGFloat(M_PI), endAngle:CGFloat(3 * M_PI / 2), clockwise: true)// 3rd rounded corner
// little triangle at the bottom
path.addLineToPoint(CGPoint(x:240 , y:0))
path.addLineToPoint(CGPoint(x: 245, y: -10))
path.addLineToPoint(CGPoint(x:250, y: 0))
path.addArcWithCenter(CGPoint(x: 290, y: 10), radius: 10, startAngle: CGFloat(3 * M_PI / 2), endAngle: CGFloat(2 * M_PI ), clockwise: true)
path.closePath()

введите описание изображения здесь

12 голосов | спросил AziCode 4 J000000Saturday15 2015, 00:57:15

3 ответа


0

Не важно, я действительно нашел решение.

Вместо того, чтобы начинать код с прямой линии:

path.moveToPoint(CGPoint(x: 300, y: 0))

Вместо этого я начинаю с дуги (справа вверху):

path.addArcWithCenter(CGPoint(x: 300-10, y: 50), radius: 10 , startAngle: 0 , endAngle: CGFloat(M_PI/2)  , clockwise: true) //1st rounded corner

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

path.closePath()  

Вот код и скриншот:

let path = UIBezierPath()
path.addArcWithCenter(CGPoint(x: 300-10, y: 50), radius: 10 , startAngle: 0 , endAngle: CGFloat(M_PI/2)  , clockwise: true) //1st rounded corner
path.addArcWithCenter(CGPoint(x: 200, y: 50), radius:10, startAngle: CGFloat(2 * M_PI / 3), endAngle:CGFloat(M_PI) , clockwise: true)// 2rd rounded corner
path.addArcWithCenter(CGPoint(x: 200, y: 10), radius:10, startAngle: CGFloat(M_PI), endAngle:CGFloat(3 * M_PI / 2), clockwise: true)// 3rd rounded corner
// little triangle
path.addLineToPoint(CGPoint(x:240 , y:0))
path.addLineToPoint(CGPoint(x: 245, y: -10))
path.addLineToPoint(CGPoint(x:250, y: 0))
path.addArcWithCenter(CGPoint(x: 290, y: 10), radius: 10, startAngle: CGFloat(3 * M_PI / 2), endAngle: CGFloat(2 * M_PI ), clockwise: true)
path.addLineToPoint(CGPoint(x:300 , y:50))
path.closePath()

введите описание изображения здесь

ответил AziCode 6 J000000Monday15 2015, 10:30:30
0

Я думаю, что ты делаешь слишком сложно. UIBezierPath дает вам UIBezierPath(roundedRect:), так почему бы не использовать его? Обведите прямоугольник с закругленными углами; сотрите место, где вы собираетесь поставить маленький треугольник; добавить треугольник; заполните составной путь; и погладить недостающие две стороны треугольника. Вот так (это просто какой-то код, который я случайно обнаружил - вы должны изменить числа, чтобы они соответствовали вашей форме, конечно):

let con = UIGraphicsGetCurrentContext()
CGContextTranslateCTM(con, 10, 10)
UIColor.blueColor().setStroke()
UIColor.blueColor().colorWithAlphaComponent(0.4).setFill()
let p = UIBezierPath(roundedRect: CGRectMake(0,0,250,180), cornerRadius: 10)
p.stroke()
CGContextClearRect(con, CGRectMake(20,170,10,11))
let pts = [
    CGPointMake(20,180), CGPointMake(20,200),
    CGPointMake(20,200), CGPointMake(30,180)
]
p.moveToPoint(pts[0])
p.addLineToPoint(pts[1])
p.addLineToPoint(pts[3])
p.fill()
CGContextStrokeLineSegments(con, pts, 4)

введите описание изображения здесь

ответил matt 4 J000000Saturday15 2015, 06:29:09
0

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

Итак. Вместо добавления линии к x, y вы добавляете линию к x-радиусу y. Затем добавьте дугу. Затем следующая строка начинается с x, y + радиус.

ответил Fogmeister 4 J000000Saturday15 2015, 01:33:51

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132