如何在UIView上设置渐变边框？ [英] How to set a gradient border on UIView?

问题描述

在 UIView 上放置一个简单的边框非常容易。您只需链接到 QuartzCore ，导入它，然后使用：

It's very easy to put a simple border on a UIView. You simply link to QuartzCore, import it, and use:

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

我的问题是......有没有办法让这个边框使用渐变。我知道如何将渐变蒙版应用于整个视图，而不仅仅是边框。我假设这可能涉及自定义视图和 CoreGraphics 绘制 drawRect：，但我不知道在哪里开始。

My question is... Is there a way to make this border use a gradient. I know how to apply a gradient mask to the entire view, but not just to its border. I'm assuming this could involve a custom view and CoreGraphics drawing inside drawRect:, but I'm not sure where to start.

推荐答案

我不完全确定渐变是什么意思。既然你已经说过你已经使用了核心图形来对形状应用渐变，那么我假设你的意思是（而不是前一个答案所指的阴影）。

I'm not entirely sure of what you mean by "gradient". Since you've said you've used core graphics to apply a gradient to a shape, then I'll assume you mean that (and not the shadow the previous answer is referring to).

您无法将渐变应用于边框。但是，您可以使用自定义形状创建自己的边框。最简单的方法是创建两个路径，一个外部路径和一个内部路径。为简单起见，我们假设路径是一个简单的rect（在 drawRect 中给出的矩形）：

You can't apply a gradient to a border. However, you can create your own border by using a custom shape. The easiest way to do this is to create two paths, an outer path and an inner path. For simplicity sake, let's assume that the path is a simple rect (the rect given in drawRect):

UIBezierPath *path = [UIBezierPath bezierPathWithRect:rect];

第二条路径将是一条比第一条路径小的内部路径（足以构成边界）：

The second path is going to be an inner path smaller than the first one (enough to make a border):

//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将告诉核心图形仅填充外部部分，留下内部部分。哦，你想要剪辑到路径：

Now, append the inner path to the normal path and make sure the path uses the evenOddFillRule. The evenOddFillRule will tell core graphics to only fill the outer portion, leaving the inner portion alone. Oh, and you'll want to clip to the path:

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

如果对此形状应用渐变，它将填充内部路径外部和外部路径内部，使用渐变制作边框。

If you apply a gradient to this shape, it will fill outside the inner path and inside the outer path, making a border with a gradient.

更新

UPDATE

如果您的目标是iOS 5.0，可能有更好的方法来执行此操作。我发现了一个非凡的新路径函数，名为 CGPathCreateCopyByStrokingPath（）。有关详细信息，请参阅链接，但基本上它会创建一个新路径，即原始的stoke，因此，如果填充新路径，它将创建与抚摸旧路径相同的图像。这很棒，因为您可以剪切到它然后填充渐变，而不是填充新路径，为您提供渐变边框。这比我之前提到的方法容易得多，但当然，它仅适用于iOS 5.0。这也将使创建新的复杂形状变得更加容易。

If you're targeting iOS 5.0 there may be better way to do this. I discovered a remarkable new path function called CGPathCreateCopyByStrokingPath(). See the link for details, but basically it creates a new path that is the stoke(s) of the original, so that if you fill the new path, it would create the same image as stroking the old path. This is fantastic because instead of filling the new path, you can clip to it and then fill with a gradient, giving you a gradient border. This is much easier than the previous method I mentioned, but of course, it's only available in iOS 5.0. This will also make it much easier to create new complex shapes.

这篇关于如何在UIView上设置渐变边框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！