使用Core Graphics绘制带减去文本的路径 [英] Drawing a path with subtracted text using Core Graphics

问题描述

在Core Graphics中创建填充路径非常简单，就像创建填充文本一样。但我还没有找到路径填充的路径示例，除了子路径中的文本。我的文本绘图模式，剪辑等实验让我无处可去。

Creating filled paths in Core Graphics is straight-forward, as is creating filled text. But I am yet to find examples of paths filled EXCEPT for text in a sub-path. My experiments with text drawing modes, clipping etc have got me nowhere.

这是一个例子（在photoshop中创建）。你将如何在Core Graphics中创建前景形状？

Here's an example (created in photoshop). How would you go about creating the foreground shape in Core Graphics?

我想提一下，这种技术似乎在即将推出的主流移动操作系统版本中大量使用，但是我不想与SO的NDA警察发生冲突;）

I would mention that this technique appears to be used heavily in an upcoming version of a major mobile OS, but I don't want to fall afoul of SO's NDA-police ;)

推荐答案

这是我运行和测试的一些代码可以工作为你。有关详细信息，请参阅内联评论：

Here's some code I ran and tested that will work for you. See the inline comments for details:

更新：我已删除 manualYOffset：参数。它现在进行计算，使文本在圆圈中垂直居中。享受！

Update: I've removed the manualYOffset: parameter. It now does a calculation to center the text vertically in the circle. Enjoy!

- (void)drawRect:(CGRect)rect {
    // Make sure the UIView's background is set to clear either in code or in a storyboard/nib

    CGContextRef context = UIGraphicsGetCurrentContext();

    [[UIColor whiteColor] setFill];
    CGContextAddArc(context, CGRectGetMidX(rect), CGRectGetMidY(rect), CGRectGetWidth(rect)/2, 0, 2*M_PI, YES);
    CGContextFillPath(context);

    // Manual offset may need to be adjusted depending on the length of the text
    [self drawSubtractedText:@"Foo" inRect:rect inContext:context];
}

- (void)drawSubtractedText:(NSString *)text inRect:(CGRect)rect inContext:(CGContextRef)context {
    // Save context state to not affect other drawing operations
    CGContextSaveGState(context);

    // Magic blend mode
    CGContextSetBlendMode(context, kCGBlendModeDestinationOut);

    // This seemingly random value adjusts the text
    // vertically so that it is centered in the circle.
    CGFloat Y_OFFSET = -2 * (float)[text length] + 5;

    // Context translation for label
    CGFloat LABEL_SIDE = CGRectGetWidth(rect);
    CGContextTranslateCTM(context, 0, CGRectGetHeight(rect)/2-LABEL_SIDE/2+Y_OFFSET);

    // Label to center and adjust font automatically
    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, LABEL_SIDE, LABEL_SIDE)];
    label.font = [UIFont boldSystemFontOfSize:120];
    label.adjustsFontSizeToFitWidth = YES;
    label.text = text;
    label.textAlignment = NSTextAlignmentCenter;
    label.backgroundColor = [UIColor clearColor];
    [label.layer drawInContext:context];

    // Restore the state of other drawing operations
    CGContextRestoreGState(context);
}

这是结果（您可以将背景更改为任何内容，您仍然可以能够看透文本）：

Here's the result (you can change the background to anything and you'll still be able to see through the text):

这篇关于使用Core Graphics绘制带减去文本的路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！