使用[UIColor colorWithPatternImage:]为文本创建渐变填充

Question

我想为文本的填充颜色创建渐变效果。目前，我是通过设置UILabel文本的颜色来实现的。

UIImage *image = [UIImage imageNamed:@"GradientFillImage.png"];
myLabel.textColor = [UIColor colorWithPatternImage:image];

在这里，“GradientFillImage.png”是一个简单的图像文件，上面绘制了一个线性渐变。

这样做很好，直到我想要调整字体大小。由于图像文件具有恒定的尺寸，因此在调整字体大小时不会调整大小，导致字体的渐变填充出现问题。 我该如何创建自定义大小的图案图像，并将其应用为文本的填充图案？

- windson

Answer 1

我刚刚完成了一个UIColor类的扩展，使得这个过程只需要一行代码和一个块。

https://github.com/bigkm/UIColor-BlockPattern

CGRect rect = CGRectMake(0.0,0.0,10.0,10.0);

[UIColor colorPatternWithSize:rect.size andDrawingBlock:[[^(CGContextRef c) {
    UIImage *image = [UIImage imageNamed:@"FontGradientPink.png"];
    CGContextDrawImage(context, rect, [image CGImage]);
} copy] autorelease]];

- bigkm

---

做得好，@bigkm。这绝对为一些混乱的代码添加了一个易于使用的包装器。 - windson

Answer 2

好的，我明白了。基本上，我们可以覆盖 drawRectInText 方法并使用自己的图案来着色填充。这样做的优点是我们可以将图像调整为我们的图案框架大小。

首先，我们创建一个 CGPattern 对象，并定义一个回调函数来绘制图案。我们还在回调中传递标签的大小作为参数。然后，我们使用在回调中绘制的图案，并将其设置为文本的填充颜色：

- (void)drawTextInRect:(CGRect)rect
{
    //set gradient as a pattern fill
    CGRect info[1] = {rect};
    static const CGPatternCallbacks callbacks = {0, &drawImagePattern, NULL};
    CGAffineTransform transform = CGAffineTransformMakeScale(1.0, -1.0);

    CGPatternRef pattern = CGPatternCreate((void *) info, rect, transform, 10.0, rect.size.height, kCGPatternTilingConstantSpacing, true, &callbacks);
    CGColorSpaceRef patternSpace = CGColorSpaceCreatePattern(NULL);
    CGFloat alpha = 1.0;
    CGColorRef patternColorRef = CGColorCreateWithPattern(patternSpace, pattern, &alpha);
    CGColorSpaceRelease(patternSpace);
    CGPatternRelease(pattern);
    self.textColor = [UIColor colorWithCGColor:patternColorRef];
    self.shadowOffset = CGSizeZero;
    [super drawTextInRect:rect];
}

回调函数将图像绘制到上下文中。图像会根据传递给回调函数的框架大小进行调整。

void drawImagePattern(void *info, CGContextRef context)
{
    UIImage *image = [UIImage imageNamed:@"FontGradientPink.png"];
    CGImageRef imageRef = [image CGImage];
    CGRect *rect = info;
    CGContextDrawImage(context, rect[0], imageRef);
}

- windson