Làm cách nào để đặt đường viền gradient trên UIView?

Question

Rất dễ dàng để đặt đường viền đơn giản trên UIView. Bạn chỉ cần liên kết đến QuartzCore, nhập và sử dụng:

self.view.layer.borderColor = [UIColor redColor].CGColor; 
self.view.layer.borderWidth = 2.0f; 

Câu hỏi của tôi là ... Có cách nào để làm cho đường viền này sử dụng độ dốc không. Tôi biết làm thế nào để áp dụng một mặt nạ gradient cho toàn bộ khung nhìn, nhưng không chỉ để biên giới của nó. Tôi giả sử điều này có thể liên quan đến chế độ xem tùy chỉnh và vẽ CoreGraphics bên trong drawRect:, nhưng tôi không chắc chắn nên bắt đầu từ đâu.

Answer 1

Tôi không hoàn toàn chắc chắn về ý nghĩa của "gradient". Vì bạn đã nói bạn đã sử dụng đồ họa cốt lõi để áp dụng một gradient cho một hình dạng, sau đó tôi sẽ giả sử bạn có nghĩa là (và không phải là bóng tối câu trả lời trước đó là đề cập đến).

Bạn không thể áp dụng độ dốc cho đường viền. Tuy nhiên, bạn có thể tạo đường viền của riêng mình bằng cách sử dụng hình dạng tùy chỉnh. Cách dễ nhất để làm điều này là tạo hai đường dẫn, một đường dẫn bên ngoài và một đường dẫn bên trong. Để đơn giản vì lợi ích, chúng ta hãy giả định rằng con đường là một rect đơn giản (rect được đưa ra trong drawRect):

UIBezierPath *path = [UIBezierPath bezierPathWithRect:rect]; 

Con đường thứ hai sẽ là một con đường bên trong nhỏ hơn so với cái đầu tiên (đủ để tạo ra một biên giới) :

//To create a 1.0f borderWidth 
CGRect innerRect = rect; 
innerRect.origin.x += 1.0f; 
innerRect.origin.y += 1.0f; 
innerRect.size.width -= 2.0f; 
innerRect.size.height -= 2.0f; 
UIBezierPath *innerPath = [UIBezierPath bezierPathWithRect:innerRect]; 

Bây giờ, nối đường dẫn bên trong vào đường dẫn thông thường và đảm bảo đường dẫn sử dụng evenOddFillRule. EvenOddFillRule sẽ cho đồ họa lõi chỉ lấp đầy phần bên ngoài, để lại phần bên trong một mình. Oh, và bạn sẽ muốn quay vào đường dẫn:

[path appendPath:innerPath]; 
path.usesEvenOddFillRule = YES; 
[path addClip]; 

Nếu bạn áp dụng một gradient cho hình dạng này, nó sẽ điền bên ngoài đường dẫn bên trong và bên ngoài đường viền, làm cho đường viền có độ dốc.

CẬP NHẬT

Nếu bạn đang nhắm mục tiêu iOS 5.0 có thể có cách nào tốt hơn để làm điều này. Tôi đã phát hiện một hàm đường dẫn mới đáng chú ý có tên là CGPathCreateCopyByStrokingPath(). Xem liên kết để biết chi tiết, nhưng về cơ bản nó tạo ra một đường dẫn mới là stoke (s) của bản gốc, để nếu bạn điền vào đường dẫn mới, nó sẽ tạo ra cùng một hình ảnh như vuốt ve đường dẫn cũ. Điều này là tuyệt vời bởi vì thay vì điền vào đường dẫn mới, bạn có thể clip vào nó và sau đó điền với một gradient, cho bạn một đường viền gradient. Điều này là dễ dàng hơn nhiều so với phương pháp trước đây tôi đã đề cập, nhưng tất nhiên, nó chỉ có sẵn trong iOS 5.0. Điều này cũng sẽ giúp tạo các hình dạng phức tạp mới dễ dàng hơn nhiều.

Answer 2

Tôi đã tạo một lớp gradient thứ hai với các màu được đảo ngược trong mảng, và sau đó làm cho khung của lớp thứ hai nhỏ hơn một chút so với lớp đầu tiên. Tạo ra sự xuất hiện của một biên giới.