UIBezierPath shape positioning

Question

Created Nov ’23

Replies 0

Boosts 0

Participants 1

The following function creates a hexagon shape but as I collect the six pieces of the shape to plot into SVG co-ordinates, the x/y data is not positioning them correctly:

        var positionX: CGFloat = 0
        var positionY: CGFloat = 0
        
        if isFirstShape == true {   // ENSURE USER SATISFACTION WITH ONE SHAPE PLACED WHERE FINGER TAPS
            positionX = touchLocation.x
            positionY = touchLocation.y
        } else {
            positionX = CGFloat.random(in: touchLocation.x - 200...touchLocation.x + 200)
            positionY = CGFloat.random(in: touchLocation.y - 200...touchLocation.y + 200)
        }
        
        let randomLength: CGFloat   = CGFloat.random(in: 100...150)
        let randomColour: UIColor   = getRandomColor(withProbabilities: colorProbabilities)
        let rectangle   : CGRect    = CGRect(x: positionX, y: positionY, width: randomLength, height: randomLength)
        let cornerRadius: CGFloat   = 10.0          // ROUNDING CORNER VALUE
        var angle       : CGFloat   = CGFloat(0.5)  // ROTATE HEXAGON 90º
        let sides       : Int       = 6

        let path = UIBezierPath()
        
        var svgPathData = "M" // SVG : PATH DATA (START)
        
        let theta   : CGFloat = CGFloat(2.0 * Double.pi) / CGFloat(sides)
        let radius  : CGFloat = (rectangle.width + cornerRadius - (cos(theta) * cornerRadius)) / 2.0
        let center  : CGPoint = CGPoint(x: rectangle.origin.x + rectangle.width / 2.0,
                                        y: rectangle.origin.y + rectangle.width / 2.0)
        
        // DETERMINE STARTING POINT FOR DRAWING ROUNDED CORNERS
        let corner  : CGPoint = CGPoint(x: center.x + (radius - cornerRadius) * cos(angle),
                                        y: center.y + (radius - cornerRadius) * sin(angle))
        
        // MOVE PATH TO NEW POSITION ACCOUNTING FOR THE ROUNDED CORNER ANGLE
        path.move(to: CGPoint(x: corner.x + cornerRadius * cos(angle + theta),
                              y: corner.y + cornerRadius * sin(angle + theta)))
        
        // SVG : POSITIONING DATA
        svgPathData += " \(corner.x) \(corner.y)"

        
        for _ in 0..<sides {
            
            angle += theta
            
            // POINT ON THE CIRCUMFERENCE OF THE CIRCLE : DETERMINED BY THE ANGLE
            let corner  = CGPoint(x: center.x + (radius - cornerRadius) * cos(angle),
                                  y: center.y + (radius - cornerRadius) * sin(angle))

            // ONE OF SIX POINTS : DETERMINED BY RADIUS AND ANGLE
            let tip     = CGPoint(x: center.x + radius * cos(angle),
                                  y: center.y + radius * sin(angle))
            
            let start   = CGPoint(x: corner.x + cornerRadius * cos(angle - theta),
                                  y: corner.y + cornerRadius * sin(angle - theta))
            
            let end     = CGPoint(x: corner.x + cornerRadius * cos(angle + theta),
                                  y: corner.y + cornerRadius * sin(angle + theta))

            path.addLine(to: start)
            
            // CONTROL POINT : INFLUENCE THE SHAPE / DIRECTION OF CURVE
            path.addQuadCurve(to: end, controlPoint: tip)
            
            svgPathData += " \(corner.x) \(corner.y)"   // SVG : POSITIONING DATA
        }
        
        path.close()

        let bounds = path.bounds
        
        // MOVE POINTS IN RELATION TO ORIGINAL RECTANGLE DATA
        let transform = CGAffineTransform(translationX: -bounds.origin.x + rectangle.origin.x / 2.0,
                                          y: -bounds.origin.y + rectangle.origin.y / 2.0)
        path.apply(transform)

        // CREATE UIView WITH CAShapeLayer
        let hexagon          = UIView(frame: rectangle)
        let shapeLayer       = CAShapeLayer()
        shapeLayer.path      = path.cgPath
        shapeLayer.fillColor = randomColour.cgColor
        
        hexagon.layer.addSublayer(shapeLayer)
        
        
        // SVG : COLOUR DATA
        let randomColourRGBA = getRGBAComponents(randomColour)
        let randomColourSVG = toSVGString(red   : randomColourRGBA.red,
                                          green : randomColourRGBA.green,
                                          blue  : randomColourRGBA.blue,
                                          alpha : randomColourRGBA.alpha)

        // SVG : PATH DATA (END)
        svgPathData += " Z"
        let pathElement = "<path d=\"\(svgPathData)\" fill=\"\(randomColourSVG)\" /> \n"
        svgPathStrings.append(pathElement)
        addSubview(hexagon)

I tried but it just distorted the corners:

let centerX = (corner.x + tip.x + start.x + end.x) / 4.0
let centerY = (corner.y + tip.y + start.y + end.y) / 4.0

Boost