Image in CAShapeLayer do not fit in Swift

Question

I made a Circle shape by UIBezierPath and then make it to a CAShapeLayer that can be dragged. In addition, I added a PNG Image (30px, 30px) to my xcode project. I added the PNG Image to the CAShapeLayer, but everytime I move it 'cuts' and some parts of the ball can not be seen:

This is the PNG Image:

This is my code so far:

class ViewController: UIViewController, UIGestureRecognizerDelegate {

var shapeLayer2 = CAShapeLayer()
var circlePath2 = UIBezierPath()

override func viewDidLoad() {
        super.viewDidLoad()

let angleEarth: Double = 0
        let angleEarthAfterCalculate: CGFloat = CGFloat(angleEarth*M_PI/180) - CGFloat(M_PI/2)
        let earthX = midViewX + cos(angleEarthAfterCalculate)*100
        let earthY = midViewY + sin(angleEarthAfterCalculate)*100
        circlePath2 = UIBezierPath(arcCenter: CGPoint(x: earthX,y: earthY), radius: CGFloat(10), startAngle: CGFloat(0), endAngle:CGFloat(M_PI * 2), clockwise: true)
        shapeLayer2.path = circlePath2.CGPath
        shapeLayer2.fillColor = UIColor.blueColor().CGColor
        shapeLayer2.strokeColor = UIColor.clearColor().CGColor
        shapeLayer2.lineWidth = 7
        view.layer.addSublayer(shapeLayer2)
let dragBall = UIPanGestureRecognizer(target: self, action:#selector(ViewController.dragBall(_:)))
        view.addGestureRecognizer(dragBall)

let image = UIImage(named: "rrr.png")
            if let realImage = image {
            let color = UIColor(patternImage: image!)
            shapeLayer2.fillColor = color.CGColor
            shapeLayer4.fillColor = color.CGColor
}

 @IBAction func dragBall(recognizer: UIPanGestureRecognizer) {
            let point = recognizer.locationInView(self.view)
            let earthX = Double(point.x)
            let earthY = Double(point.y)
            let midViewXDouble = Double(midViewX)
            let midViewYDouble = Double(midViewY)
            let angleX = (earthX - midViewXDouble)
            let angleY = (earthY - midViewYDouble)
            angle = atan2(angleY, angleX)
            let earthX2 = midViewXDouble + cos(angle)*100
            let earthY2 = midViewYDouble + sin(angle)*100
            circlePath2 = UIBezierPath(arcCenter: CGPoint(x: earthX2,y: earthY2), radius: CGFloat(10), startAngle: CGFloat(0), endAngle:CGFloat(M_PI * 2), clockwise: true)
            shapeLayer2.path = circlePath2.CGPath
}

Shortcut: I can't fit the PNG Image to the CAShapeLayer without getting the result in the gif.

Have you tried this http://stackoverflow.com/questions/29279474/swift-add-image-to-cashapelayer?rq=1 ? — Umair Afzal, Jun 08 '16 at 10:00
@UmairAfzal Yes, the first example of his answer is in my code, the second doesn't work — Eliko, Jun 08 '16 at 10:01
and this one ? http://stackoverflow.com/questions/13272512/add-uiimage-in-calayer?lq=1 — Umair Afzal, Jun 08 '16 at 10:07
Yea I tried, it didn't work. I probably tried everything on Google — Eliko, Jun 08 '16 at 10:08
My guess is that the bounds/frame of the layer is off. It's size seems to be the whole size of your big circle bounds and that's why you see "black parts", it just made a pattern with you image. — Larme, Jun 08 '16 at 10:22
What are your desire results of adding the image to the CAShapeLayer? — Peter Hornsby, Jun 08 '16 at 11:05
@Eliko, the gif shows your current problem right? If everything was working correctly what would we see? — Peter Hornsby, Jun 08 '16 at 11:09
@fragilecat You would see the PNG Image when I move it, instead of some white cuts — Eliko, Jun 08 '16 at 11:13
Ok then you should resize your image to the same size as the CAShapeLayer bounds. If you look at the documentation for UIColor(patternImage) it informs you that the image will be tiled to cover the given area. — Peter Hornsby, Jun 08 '16 at 11:15

Image in CAShapeLayer do not fit in Swift

0 Answers0