UIBezierPath из эскиза - PullRequest
       97

UIBezierPath из эскиза

1 голос
/ 23 апреля 2020

Экспортируйте этот массив точек из эскиза:

[
{
"type": "CurvePoint",
"cornerRadius": 0,
"curveFrom": {
"x": 0,
"y": 0.15833333333333344
},
"curveTo": {
"x": 0.6750000000000007,
"y": 1.265000000000001
},
"point": {
"x": 0,
"y": 0
},
"pointType": "Straight"
},
{
"type": "CurvePoint",
"cornerRadius": 0,
"curveFrom": {
"x": 1,
"y": 0.7625000000000005
},
"curveTo": {
"x": 1,
"y": 0.2374999999999997
},
"point": {
"x": 1,
"y": 0.5
},
"pointType": "Mirrored"
},
{
"type": "CurvePoint",
"cornerRadius": 0,
"curveFrom": {
"x": 0.6750000000000007,
"y": 1.265000000000001
},
"curveTo": {
"x": 0,
"y": 0.8250000000000007
},
"point": {
"x": 0,
"y": 1.0000000000000009
},
"pointType": "Straight"
}
]
"""

Данные макета:

let x = 0.0
let y = 0.0
let width = 20.0
let height = 100.0

Сгенерированный эскиз SVG:

<?xml version="1.0" encoding="UTF-8"?>
<svg width="21px" height="100px" viewBox="0 0 21 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 60.1 (88133) - https://sketch.com -->
    <title>Line</title>
    <desc>Created with Sketch.</desc>
    <g id="Set-2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="square">
        <g id="before-1" stroke="#979797">
            <path d="M0,0 C13.3333333,15.8333333 20,32.5 20,50 C20,67.5 13.3333333,84.1666667 0,100" id="Line"></path>
        </g>
    </g>
</svg>

Как воспроизвести это рисунок с UIBezierPath?

Я получил это, но не могу понять, как получить контрольные точки.

class Custom: UIView {
        override func draw(_ rect: CGRect) {
            super.draw(rect)
            guard let data = points.data(using: .utf8) else { return }
            guard let points = try? JSONDecoder().decode([CurvePoint].self, from: data) else { return }

            let shape = UIBezierPath()
            shape.move(to: CGPoint(x: 0, y: 0))
            shape.addCurve(to: CGPoint(x: 20, y: 50), controlPoint1: CGPoint(x: 13.33, y: 15.83), controlPoint2: CGPoint(x: 20, y: 32.5))
            shape.addCurve(to: CGPoint(x: 0, y: 100), controlPoint1: CGPoint(x: 20, y: 67.5), controlPoint2: CGPoint(x: 13.33, y: 84.17))

            for point in points {
                let absX = x + (point.point.x * width)
                let absY = y + (point.point.y * height)
                let absToX = x + (point.curveTo.x * width)
                let absToY = y + (point.curveTo.y * height)
                let absFromX = x + (point.curveFrom.x * width)
                let absFromY = y + (point.curveFrom.y * height)
                print(absX, absY, absFromX, absFromY, absToX, absToY)
            }

            shape.lineWidth = 1.0
            UIColor.blue.set()
            shape.stroke()
        }
    }

Печатные данные:

0.0 0.0 0.0 15.833333333333343 13.500000000000014 126.5000000000001
20.0 50.0 20.0 76.25000000000006 20.0 23.74999999999997
0.0 100.00000000000009 13.500000000000014 126.5000000000001 0.0 82.50000000000007

enter image description here enter image description here enter image description here

...