如何在UIView上設置漸變邊框？

在UIView上放置一個簡單的邊框非常簡單。您只需鏈接到QuartzCore，導入它，並使用：如何在UIView上設置漸變邊框？

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

我的問題是...有沒有辦法讓這個邊框的漸變。我知道如何在整個視圖上應用漸變蒙版，但不僅限於其邊框。我假設這可能涉及drawRect:內的自定義視圖和CoreGraphics繪圖，但我不知道從哪裏開始。

來源

2012-04-17 shawnwall

我不完全確定你的意思是「漸變」。既然你說你已經使用核心圖形來爲圖形應用漸變，那麼我會假設你的意思是（而不是前面的答案所指的陰影）。

您不能將漸變應用於邊框。但是，您可以使用自定義形狀創建自己的邊框。最簡單的方法是創建兩條路徑，即外部路徑和內部路徑。爲了簡便起見，我們假設路徑是一個簡單的矩形（在drawRect給出的矩形）：

UIBezierPath *path = [UIBezierPath bezierPathWithRect:rect];

第二條路徑將是一個內部路徑比第一次（足以讓一個邊界）小：

//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];

現在，追加到正常路徑的內部路徑，並確保路徑使用evenOddFillRule。 evenOddFillRule會告訴核心圖形只填充外部部分，只留下內部部分。哦，你要裁剪的路徑：如果您申請的梯度，這種形狀

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

，它將填補內路外和外路內，使得邊框的漸變。

UPDATE

如果你的目標的iOS 5.0可能有更好的方法來做到這一點。我發現了一種稱爲CGPathCreateCopyByStrokingPath()的顯着新功能。詳細信息請參見鏈接，但基本上它會創建一個新路徑，即原始路徑，因此如果填充新路徑，它將創建與撫摸舊路徑相同的圖像。這太棒了，因爲不是填充新路徑，你可以剪裁它，然後填充漸變，給你一個漸變邊框。這比我之前提到的方法要容易得多，但當然，它僅在iOS 5.0中可用。這也將使創建新的複雜形狀變得更容易。

來源

2012-04-18 11:32:09

謝謝。完整的實現可以在https://gist.github.com/2423583找到。請注意，這會繪製一個內邊框，如果其他視圖位於其上，則可能會產生問題。 – shawnwall 2012-04-19 19:35:53

@shawnwall我已經更新了我的答案。如果你使用的是iOS 5.0，那麼創建漸變邊界更簡單一些。 – 2012-04-25 15:43:57

我創建了第二個漸變圖層，使顏色在數組中相反，然後使第二個圖層的框架比第一個圖層略小。創建邊框的外觀。

來源

2012-04-20 01:58:02 JohnnyRedTruss

如何在UIView上設置漸變邊框？

回答

相關問題