2017-10-13 2 views
0

업데이트 02 작업 솔루션을 가지고 ... 내가 다른 UIView의에 마스크로 UIBezierPath의 스트로크를 사용하는 것을 시도하고있다마스크의 UIView - 스트로크 만

. 많은 예가 있지만, 모두 채우기를 사용하여보기를 자릅니다.

경로의 스트로크 만 사용하려하지만 올바르게 표시되지 않습니다. 위의 코드는이 작업을 수행,

let bezierPath = UIBezierPath() 
bezierPath.move(to: CGPoint(x: 0, y: 0)) 
bezierPath.addLine(to: CGPoint(x: 100, y: 100)) 
bezierPath.addLine(to: CGPoint(x: 200, y: 50)) 
bezierPath.addLine(to: CGPoint(x: 300, y: 100)) 
bezierPath.lineWidth = 5.0 
bezierPath.stroke() 

let gradient = Gradient(frame: self.bounds) 
let mask = CAShapeLayer() 

mask.path = bezierPath.cgPath 
gradient.layer.mask = mask 

self.addSubview(gradient) 

을하지만 : 아래

내가 현재 스위프트 3.X에있는 것입니다. 나는 마스크 스트로크를 사용하는 경우에만 찾고 있어요 ...이 코드는 현재이 Desired outcome

는 (더 많은 포인트를 가지고 원하는 결과 ..입니다

Currently doing..

을하고있는 것입니다 이 컴 스냅 샷에서)

나는 더 좋은 방법이 있을지도 모르고, 어떤 생각이나 대안을 생각할 수 있습니다!


--update 01--

내 최신하지만, 마스크 밖으로 모든 :

let bezierPath = UIBezierPath() 
bezierPath.move(to: CGPoint(x: 0, y: 0)) 
bezierPath.addLine(to: CGPoint(x: 100, y: 100)) 
bezierPath.addLine(to: CGPoint(x: 200, y: 50)) 
bezierPath.addLine(to: CGPoint(x: 300, y: 100)) 
bezierPath.lineWidth = 5.0 
bezierPath.stroke() 

let gradient = Gradient(frame: self.bounds) 

UIGraphicsBeginImageContext(CGSize(width: gradient.bounds.width, height: gradient.bounds.height)) 
let context : CGContext = UIGraphicsGetCurrentContext()! 
context.addPath(bezierPath.cgPath) 

let image = UIGraphicsGetImageFromCurrentImageContext() 
gradient.layer.mask?.contents = image?.cgImage 

그리고 .. 가지고 갑자기 CAShapeLayer 그것을 알아 내려고 후 :

let mask = CAShapeLayer() 
mask.fillColor = UIColor.black.cgColor 
mask.strokeColor = UIColor.black.cgColor 
mask.fillRule = kCAFillModeBoth 
mask.path = bezierPath.cgPath 
gradient.layer.mask = mask 
self.addSubview(gradient) 

--update 02 - 워킹 솔루션 - 모든 사람의 도움을

감사합니다!

let bezierPath = UIBezierPath() 
bezierPath.move(to: CGPoint(x: 0, y: 0)) 
bezierPath.addLine(to: CGPoint(x: 100, y: 300)) 
bezierPath.addLine(to: CGPoint(x: 200, y: 50)) 
bezierPath.addLine(to: CGPoint(x: 300, y: 200)) 
bezierPath.addLine(to: CGPoint(x: 400, y: 100)) 
bezierPath.addLine(to: CGPoint(x: 500, y: 200)) 

let gradient = Gradient(frame: self.bounds) // subclass of UIView 

let mask = CAShapeLayer() 
mask.fillColor = nil 
mask.strokeColor = UIColor.black.cgColor 
mask.path = bezierPath.cgPath 
mask.lineWidth = 5.0 
gradient.layer.mask = mask 

self.addSubview(gradient) 

은 그리고, 결과는 I가 원하는 하였다 무엇 :

Expected Result

+0

코드를 사용하는 위치를 말하지 않습니다. –

+0

UIView의 하위 클래스에 캡슐화 – August

+2

스트로크 된 패스를 UIImage로 렌더링 한 다음 UIImage를 마스크로 사용해야 할 수도 있습니다. – ekscrypto

답변

3

UIBezierPathlineWidth, lineCapStyle, lineJoinStylemiterLimit을 포함하여 단지 문제의 경로를 쓰다듬어 몇 가지 속성을 가지고 있습니다.

CGPath에는 이러한 특성이 없습니다.

따라서 mask.path = bezierPath.cgPath을 설정하면 bezierPath에 설정 한 획 속성 중 아무 것도 넘지 않습니다. UIBezierPath에서 CGPath 만 추출했으며 다른 속성은 모두 추출하지 않았습니다.

임의의 경로 개체가 아닌 CAShapeLayer에 획 맞춤 속성을 설정해야합니다. 따라서 :

mask.path = bezierPath.cgPath 
mask.lineWidth = 5 
또한 기본 획 색상이 전혀 뇌졸중을 의미 전무이기 때문에, 스트로크 색상을 설정해야

: 그렇지 때문에,

mask.strokeColor = UIColor.white.cgColor 

을 그리고 모양 레이어에서 경로를 채우려면 채우기 색을 nil로 설정해야합니다.

mask.fillColor = nil 
+0

도와 주셔서 감사합니다. 이것은 트릭을했습니다 ... 나는 작업 솔루션으로 내 질문을 업데이트 할 것입니다. – August

1

용액을 마스크로하여 얻어진 이미지를 사용하여, 화상에 bezierPath을 그릴 수있다. 코드의 문제는 컨텍스트에 베 지어 패스를 추가하는 동안 결코 stroke()를 사용하지 않는다는 것입니다. 이미지에 경로 배열을 그릴 수있는이 신속한 기능을 소개하고자합니다. Create an UIImage from Uibezierpath Array in Swift

이미지 렌더링을 UIImageView에 표시하여 올바르게 확인할 수 있습니다. 확인한 후에 마스크로 사용하는 것이 더 쉬워야합니다. iOS layer mask from UIImage/CGImage?

건배!

+0

도움 주셔서 감사합니다, 남자 .. 이미지의 경로를 렌더링 할 수 있었지만 마스킹 주위에서 머리를 감쌀 수 없었습니다. 멋진 아이디어와 링크! – August

관련 문제