擦除与UILabel中的文本重叠的图像的一部分

时间:2013-02-11 11:15:27

标签: ios xcode uiimageview masking

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

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

也许是这样的事情"用图像掩盖图像"? https://developer.apple.com/library/mac/#documentation/graphicsimaging/conceptual/drawingwithquartz2d/dq_images/dq_images.html

Example of overlapping text

以下是我移动图像(以及文本)的方法

-(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。

我所做的只是在开始时分配它们,然后在结束时,取出输出impage并将其分配给imageMerge.image,它将添加到我的视图中,并在角落中使用界面构建器进行测试。我不知道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);
}
}

1 个答案:

答案 0 :(得分:2)

假设您已经完成了在屏幕上移动imageView。让我继续做下去。

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

    新图片=黑色图片+黑色图片;旧图像=一个用   黑色图像+透明文字;

    -(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 您可以写 layer.contents =   (ID)image.CGImage

    现在,当您设置ImageView或Layer时,首先将图像设为

      

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

    并将此图像放入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中调用此方法。如果动画断断续续(不会发生这种情况),请尝试在动画块中调用它。

    试试这个,让我知道。

    编辑:链接到示例应用

      

    我创建了一个示例应用程序,展示了如何清除重叠区域。   核实。 https://www.dropbox.com/sh/5z45gkwgmstfyvu/lwzbUyh6IR