2017-02-10 7 views
0

といくつかの視覚的なバグがレイアウト:は、私は、以下の細胞とのUITableViewを持ってCALayerの

•UIViewの

••UIImageView

•••半透明オーバーレイのUIView UIImageViewのサブビューとして

「再生」ボタンとUILabelを模倣するアイコン表示もありますが、このバグには関係していないようです。私は、デバイスの回転上のパスを再作成するためのlayoutSubviewsでそれを呼んでいる

override func layoutSubviews() { 
     super.layoutSubviews() 

     createPath() 
    } 

    private func createPath() { 
     let padding = CGFloat(16) 
     let bottomLineLength = CGFloat(64) 
     let arcPadding = CGFloat(8) 

     let width = self.contentView.frame.width 
     let height = self.contentView.frame.height 

     if pathLayer != nil { 
      pathLayer?.removeFromSuperlayer() 
     } 

     pathLayer = CAShapeLayer() 

     let path = UIBezierPath() 

     path.move(to: CGPoint(x: padding + arcPadding, y: padding)) 
     path.addLine(to: CGPoint(x: width - padding - arcPadding, y: padding)) 

     // Top-Right arc 
     path.addArc(withCenter: CGPoint(x: width - padding - arcPadding, y: padding + arcPadding), 
        radius: arcPadding, 
        startAngle: CGFloat(3 * M_PI/2), 
        endAngle: CGFloat(M_PI * 2), 
        clockwise: true) 

     path.move(to: CGPoint(x: width - padding, y: padding + arcPadding)) 
     path.addLine(to: CGPoint(x: width - padding, y: height - padding - arcPadding)) 

     // Bottom-Right arc 
     path.addArc(withCenter: CGPoint(x: width - padding - arcPadding, y: height - padding - arcPadding), 
        radius: arcPadding, 
        startAngle: CGFloat(M_PI * 2), 
        endAngle: CGFloat(M_PI/2), 
        clockwise: true) 
     path.move(to: CGPoint(x: width - padding - arcPadding, y: height - padding)) 
     path.addLine(to: CGPoint(x: width - padding - bottomLineLength, y: height - padding)) 

     path.move(to: CGPoint(x: padding + bottomLineLength, y: height - padding)) 
     path.addLine(to: CGPoint(x: padding + arcPadding, y: height - padding)) 

     // Bottom-Left arc 
     path.addArc(withCenter: CGPoint(x: padding + arcPadding, y: height - padding - arcPadding), 
        radius: arcPadding, 
        startAngle: CGFloat(M_PI/2), 
        endAngle: CGFloat(M_PI), 
        clockwise: true) 

     path.move(to: CGPoint(x: padding, y: height - padding - arcPadding)) 
     path.addLine(to: CGPoint(x: padding, y: padding + arcPadding)) 

     // Top-Left arc 
     path.addArc(withCenter: CGPoint(x: padding + arcPadding, y: padding + arcPadding), 
        radius: arcPadding, 
        startAngle: CGFloat(M_PI), 
        endAngle: CGFloat(3 * M_PI/2), 
        clockwise: true) 

     pathLayer?.rasterizationScale = 2 * UIScreen.main.scale 
     pathLayer?.shouldRasterize = true 
     pathLayer?.strokeColor = UIColor(red: 0xFF/255, green: 0xFF/255, blue: 0xFF/255, alpha: 0.5).cgColor 
     pathLayer?.lineWidth = 2.0 
     pathLayer?.path = path.cgPath 

     contentView.layer.addSublayer(pathLayer!) 
    } 

そして、私は次のコードを持っています。

スクリーンショットを見ると、黒い部分があり、パスの近くに黒い「穴」があります。それらはすべて同じように見え、UIImageViewのイメージには必ず存在しません。

Screenshot

私はそれが私のCALayerに関連することだと思います。それを修正するには?

+0

あり各丸い四角形の内側の左端に沿って黒いくさび。ズームインすると表示されます。また、上、右、下の左端にウェッジがあります。 –

+0

@robmayoff私は彼が何を意味するのがうれしいです! – matt

答えて

2

あなたの問題は、これらの黒のウェッジです:

black wedges

根本的な原因は、CAShapeLayerのデフォルトfillColorが不透明黒であるということです。充填を避けるためにnilを、それを設定する:行わ

pathLayer?.fillColor = nil 

、私はあなたのパスを構築するための短い方法を示してみましょう:

let cgPath = CGMutablePath() 
let start = CGPoint(x: padding + bottomLineLength, y: height - padding) 
let blCorner = CGPoint(x: padding, y: height - padding) 
let tlCorner = CGPoint(x: padding, y: padding) 
let trCorner = CGPoint(x: width - padding, y: padding) 
let brCorner = CGPoint(x: width - padding, y: height - padding) 
let end = CGPoint(x: width - padding - bottomLineLength, y: height - padding) 

cgPath.move(to: start) 
cgPath.addArc(tangent1End: blCorner, tangent2End: tlCorner, radius: arcPadding) 
cgPath.addArc(tangent1End: tlCorner, tangent2End: trCorner, radius: arcPadding) 
cgPath.addArc(tangent1End: trCorner, tangent2End: brCorner, radius: arcPadding) 
cgPath.addArc(tangent1End: brCorner, tangent2End: end, radius: arcPadding) 
cgPath.addLine(to: end) 

shapeLayer.path = cgPath 

結果:

no wedges

関連する問題