ios - 从 UILabel 中删除与文本重叠的图像部分

Question

我有它，用户可以在屏幕上移动图像和 uilabel。假设它是黑色图像和黑色文本。我希望与图像重叠的文本部分变得透明，以便背景显示出来，即使它们最初是相同的颜色，您仍然可以阅读文本。希望这是有道理的。

我找到了一些关于触摸删除的链接。我不确定如何使用重叠的文本部分来自动执行此操作。

也许像“用图像遮盖图像”这样的东西？ https://developer.apple.com/library/mac/#documentation/graphicsimaging/conceptual/drawingwithquartz2d/dq_images/dq_images.html

这是我如何移动图像(以及文本)

-(void)graphicMoved:(UIPanGestureRecognizer *)recognizer
{
CGPoint translation = [recognizer translationInView:self.view];
recognizer.view.center = CGPointMake(recognizer.view.center.x + translation.x,
                                     recognizer.view.center.y + translation.y);
[recognizer setTranslation:CGPointMake(0, 0) inView:self.view];


}

---

添加代码在我放置文本和图像部分重叠后，我在单击按钮时调用 creatAlphaClippedImage。图片是imageMerge，标签是labelTest。

我所做的就是在开始时分配它们，然后在结束时，获取输出图像并将其分配给 imageMerge.image，它被添加到我的 View 中，并在角落中使用界面生成器进行测试。我不知道 nslog 应该显示什么，但它不是空的。

-(void)createAlphaClippedImage {
UIImageView *imageView = nil;//this will b your imageView, property that u are holding to
UILabel *label = nil;//this will be your label, property that u are holding to


imageView=imageMerge;
label=labelTest;


if (CGRectIntersectsRect(imageView.frame, label.frame)) {
    UIImage *bottomImage = imageView.image;

    UIImage *image = nil;
    UIGraphicsBeginImageContextWithOptions(bottomImage.size, NO, 0.0);
    CGRect imageRect = CGRectMake(0.0f, 0.0f, bottomImage.size.width, bottomImage.size.height);
    [bottomImage drawInRect:imageRect];
    //the color that u want the text to have
    [[UIColor clearColor] set];
    //change this textRect to change the position of text on image
    CGRect textRect = CGRectMake(CGRectGetMinX(label.frame) - CGRectGetMinX(imageView.frame), CGRectGetMinY(label.frame) - CGRectGetMinY(imageView.frame), CGRectGetWidth(label.frame), CGRectGetHeight(label.frame));
    [label.text drawInRect:textRect withFont:label.font];
    image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    imageView.image = image;


    imageMerge.image=image;

    NSLog(@"ImageMerge %@\n",imageMerge.image);
}
}

Answer 1

假设您已经完成了在屏幕上移动 imageView 的操作。让我继续做什么。

1. 当您触摸 imageView 时。使用我将提供的代码更改其中的图像。
2. 完成移动 imageView 后，将新图像替换为旧图像

new image = one with black image + black text; old image = one with black image + transparent text;

-(UIImage *)customImage:(NSString *)cellImageName withText:(NSString *)badgeText textColor:(UIColor*)color {
    UIImage *bottomImage = [UIImage imageNamed:cellImageName];
    //Change the font size to change text size
    CGSize stringSize = [badgeText sizeWithFont:[UIFont systemFontOfSize:[UIFont systemFontSize]]];

    UIImage *image = nil;
    UIGraphicsBeginImageContextWithOptions(bottomImage.size, NO, 0.0);
    CGRect imageRect = CGRectMake(0.0f, 0.0f, bottomImage.size.width, bottomImage.size.height);
    [bottomImage drawInRect:imageRect];
    //the color that u want the text to have
    [color set];
    //change this textRect to change the position of text on image
    CGRect textRect = CGRectMake((bottomImage.size.width - stringSize.width)/2.0f, bottomImage.size.height - stringSize.height, stringSize.width, stringSize.height);
    [badgeText drawInRect:textRect withFont:[UIFont systemFontOfSize:[UIFont systemFontSize]]];
    image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    return image;
}

现在在你开始之前，为了方便起见，扔掉标签(如果你愿意，你可以用 CALayer 替换 UIImageView)即代替

imageView.image = image you can write layer.contents = (id)image.CGImage

现在，当您设置 ImageView 或 Layer 时，首先获取图像作为

UIImage *image = [self customImage:@"Image Name" withText:@"Text" textColor:[UIColor blackColor]];

并将这张图片放到imageView或者layer中

现在，当您开始移动 ImageView 或图层时。在 touchesBegan 中或您的触摸第一响应者的任何方法。再次将图片替换为

UIImage *image = [self customImage:@"Image Name" withText:@"Text" textColor:[UIColor clearColor]];

并且在 touchesEnded 中用黑色文本的第一次调用再次替换图像。

这应该让你继续。如有问题请告诉我。

上面的方法提供了在你的图像上写上文字，并创建一个新的带有文字的图像。因此，您可以扔掉标签。

干杯，玩得开心。

编辑

试试这个，我自己没试过，但应该可以用

-(void)createAlphaClippedImage {
    UIImageView *imageView = nil;//this will b your imageView, property that u are holding to
    UILabel *label = nil;//this will be your label, property that u are holding to

    if (CGRectIntersectsRect(imageView.frame, label.frame)) {
        UIImage *bottomImage = imageView.image;

        UIImage *image = nil;
        UIGraphicsBeginImageContextWithOptions(bottomImage.size, NO, 0.0);
        CGRect imageRect = CGRectMake(0.0f, 0.0f, bottomImage.size.width, bottomImage.size.height);
        [bottomImage drawInRect:imageRect];
        //the color that u want the text to have
        [[UIColor clearColor] set];
        //change this textRect to change the position of text on image
        CGRect textRect = CGRectMake(CGRectGetMinX(label.frame) - CGRectGetMinX(imageView.frame), CGRectGetMinY(label.frame) - CGRectGetMinY(imageView.frame), CGRectGetWidth(label.frame), CGRectGetHeight(label.frame));
        [label.text drawInRect:textRect withFont:label.font];
        image = UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsEndImageContext();

        imageView.image = image;
    }
}

在 touchesBegan 和 touchesMoved 中调用此方法。如果动画断断续续(这应该不会发生)，请尝试在动画 block 中调用它。

试试这个，让我知道。

编辑:示例应用程序链接

I have created a sample app showing how to clear overlapping areas. Check it. https://www.dropbox.com/sh/5z45gkwgmstfyvu/lwzbUyh6IR