2

ユーザーが画面上で画像と 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 に割り当てることです。これは、テストのために隅にインターフェースビルダーを使用してビューに追加されます。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);
}
}
4

1 に答える 1

2

imageView を画面上で移動することは既に完了していると仮定します。何をすべきかを進めさせてください。

  1. imageView をタッチすると。提供するコードを使用して、その中の画像を変更します。
  2. imageView の移動が完了したら、新しいイメージを古いイメージに置き換えます。

新しい画像 = 黒の画像 + 黒のテキストの画像。古い画像 = 黒い画像 + 透明なテキストの画像。

-(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;
}

開始する前に、便宜上、ラベルを破棄します (必要に応じて、UIImageView を CALayer に置き換えることができます)。

imageView.image =書ける画像layer.contents = (id)image.CGImage

さて、ImageViewまたはレイヤーをセットアップすると、最初に画像を次のように取得します

UIImage *image = [self customImage:@"画像名" withText:@"Text" textColor:[UIColor blackColor]];

この画像をimageViewまたはレイヤーに入れます

ここで、イメージビューまたはレイヤーの移動を開始します。またはどちらの方法でtouchesBeganも、タッチに対するあなたの最初のレスポンダーです。画像を再度次のように置き換えます。

UIImage *image = [self customImage:@"画像名" withText:@"テキスト" 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

于 2013-02-11T13:24:06.020 に答える