Hinzufügen von Bildern zu einem CAShapeLayer Swift 3

Question

Ich versuche, ein Tortendiagramm mit einem Segment-Array und einem Bild in der Mitte jeder Scheibe zu zeichnen, ich habe das Tortendiagramm gezeichnet, kann aber kein Bild zum Cashapelayer hinzufügen . Ich habe auf den folgenden Beitrag Swift: Add image to CAShapeLayer verwiesen, aber es hat mein Problem nicht gelöst.

Das habe ich ausprobiert.

override func draw(_ rect: CGRect) { 
     //let context = UIGraphicsGetCurrentContext() 
     let radius = min(frame.size.width,frame.size.height) * 0.5; 
     let viewCenter = CGPoint(x: frame.size.width * 0.5, y: frame.size.height * 0.5) 
     let valueCount = segments.reduce(0){ $0 + $1.value} 
     var startAngle = -CGFloat(M_PI/2) 

     for segment in segments { 
      let endAngle = startAngle + CGFloat(M_PI * 2) * (segment.value)/valueCount 

      /*context?.move(to: CGPoint(x: viewCenter.x, y: viewCenter.y)) 
      context?.setFillColor(segment.color.cgColor) 
      context?.setStrokeColor(UIColor.black.cgColor) 
      context?.setLineWidth(3.0) 
      context?.addArc(center: viewCenter, radius: radius, startAngle: startAngle, endAngle: endAngle, clockwise: false) 
      context?.fillPath()*/ 

      let pieSliceLayer = CAShapeLayer() 
      let slicePath = UIBezierPath(arcCenter: viewCenter, radius: radius, startAngle: startAngle, endAngle: endAngle, clockwise: false) 
      pieSliceLayer.path = slicePath.cgPath 
      pieSliceLayer.fillColor = segment.color.cgColor 
      self.layer.addSublayer(pieSliceLayer) 

      let halfAngle = startAngle + (endAngle - startAngle) * 0.5; 
      let imagePositionValue = CGFloat(0.67) 
      let segmentCenter = CGPoint(x:viewCenter.x+radius*imagePositionValue*cos(halfAngle),y:viewCenter.y+radius*imagePositionValue*sin(halfAngle)) 

      //If image is associated , add the image to the section 
      let imageLayer = CAShapeLayer() 
      let image = UIImage(named: segment.imageName) 
      imageLayer.contents = image?.ciImage 
      imageLayer.frame = CGRect(x: segmentCenter.x - 20, y: segmentCenter.y - 20, width: 20, height: 20) 
      self.layer.addSublayer(imageLayer) 
      startAngle = endAngle 

     } 
    } 

habe ich versucht, etwas Ähnliches in Objective-C und es funktioniert gut,

CALayer *imageLayer = (CALayer *)[[pieLayer sublayers] objectAtIndex:0]; 
    //Adding image 
    CALayer *layer = [CALayer layer]; 
    layer.backgroundColor = [[UIColor clearColor] CGColor]; 
    layer.bounds = CGRectMake(imageLayer.bounds.origin.x +20 , 
            imageLayer.bounds.origin.y + 20, 15, 15); 
    NSString *imageName = [NSString stringWithString:[[self.goalSettingsModel objectAtIndex:value] valueForKeyPath:@"imageName"]]; 
    layer.contents = (id)[UIImage imageNamed:imageName].CGImage; 
    [imageLayer addSublayer:layer]; 
    [imageLayer setNeedsDisplay]; 

Ich bin nicht sicher, ob ich für die CALayer alle Einstellungen übersehen haben.

Answer 1

Nachdem die Position Attribut für die Schicht Einstellung wurde das Bild richtig auf die Formebene hinzugefügt,

let imageLayer = CALayer() 
     imageLayer.backgroundColor = UIColor.clear.cgColor 
     imageLayer.bounds = CGRect(x: centerPoint.x, y: centerPoint.y , width: 15, height: 15) 
     imageLayer.position = CGPoint(x:centerPoint.x ,y:centerPoint.y) 
      imageLayer.contents = UIImage(named:segment.imageName)?.cgImage 
     self.layer.addSublayer(pieSliceLayer) 
     self.layer.addSublayer(imageLayer) 

Answer 2

Ein paar Dinge:

Zuerst müssen Sie nur die Formebene zu aktualisieren, wenn die Grafik, die Änderungen (Call setNeedsDisplay) oder wenn Sie ein Layout ändern (viewDidLayoutSubviews). Sie müssen drawRect nicht implementieren, es sei denn, Sie zeichnen tatsächlich. Das Layersystem weiß, wie die Formebene gerendert und bei Bedarf gerendert wird.

Zweitens ist CAShapeLayer für Formen. Es gibt tatsächlich eine ganze Reihe von CALayers, die alle verschiedene Dinge zeichnen: https://www.raywenderlich.com/90919/great-calayer-tour-tech-talk-video. Im Falle eines einfachen alten Bildes tun Sie einfach, was Ihr Objective-C-Code tut, und verwenden Sie eine separate CALayer, um das Bild anstelle von CAShapeLayer zu halten. Fügen Sie Ihre Bildschicht als Unterschicht oberhalb oder hinter Ihrer Diagrammform-Ebene hinzu, abhängig von Ihren bevorzugten Z-Ordnern.