3

以前のいくつかの StackOverFlow の質問と github CA360のこの例から、「前面」に画像、背面にテキストを使用してフリップ カードをシミュレートすることができました。ただし、カードの裏のテキストは上下逆になっていて、水平に中央に配置しただけです。テキストを適切に配置し、カードの垂直方向の中央に配置するにはどうすればよいですか?

カード表面:

ここに画像の説明を入力

カードの裏 (テキストを垂直方向に配置して中央揃えにする方法は?):

ここに画像の説明を入力

[アップデート]

最上層の不透明度を 0.5 に設定してから、実際の反転が発生したときに通常の状態にリセットされるように、背面レイヤーを「プリフリップ」するというアイデアを得ました。

ここに画像の説明を入力

私の「プレフリップ」は次のようになります。

cardBack.transform = CATransform3DMakeRotation(M_PI, 1.0f, 0.0f, 0.0f); // Pre-flip card

今、私は垂直設定への組み込みの方法を見つけるか、それを難し​​い方法で行う必要があります.半分の距離...フォントの高さ...さらに...

2 層のカード コンテナーを設定する (参照):

    - (無効)loadView {
        UIView *myView = [[UIView alloc] initWithFrame:[[UIScreen mainScreen] 境界]];
        myView.backgroundColor = [UIColor whiteColor];

        self.view = myView;

        cardContainer = [CATransformLayer レイヤー];
        cardContainer.frame = CGRectMake(300, 250, 200, 150);


        CALayer *cardFront = [CALayer レイヤー];
        cardFront.frame = cardContainer.bounds;
        cardFront.zPosition = 5; // カード裏面の zPosition より高い
        cardFront.contents = (id)[UIImage imageNamed:@"Ben"].CGImage;
        cardFront.opacity = 0.5;

        [cardContainer addSublayer:cardFront];

        /*
         https://stackoverflow.com/questions/2209734/add-text-to-calayer
         */

        CATextLayer *cardBack = [CATextLayer レイヤー];
        cardBack.string = @"こんにちは";
        cardBack.frame = cardContainer.bounds;
        cardBack.zPosition = 4;
        cardBack.backgroundColor = [[UIColor grayColor] CGColor];
        cardBack.alignmentMode = kCAAlignmentCenter;
        CFTypeRef *font = (CFTypeRef *)CTFontCreateWithName(CFSTR("Times"), 48, NULL);
        cardBack.font = フォント;
        [cardContainer addSublayer: cardBack];

        [self.view.layer addSublayer:cardContainer];

    }

別の SOF 質問から借用してカードをめくるコード:

    - (無効) フリップカード {
    // [self.flipTimer 無効];
    // if (反転){
    // 戻る;
    // }
        NSLog(@"Count=%d", カウント);
        id animationsBlock = ^{
    // self.backView.alpha = 1.0f;
    // self.frontView.alpha = 0.0f;
    // [self BringSubviewToFront:self.frontView];
    // 反転 = YES;
            NSLog(@"フリッピング...");
            CALayer *layer = cardContainer;
            CATransform3D rotationAndPerspectiveTransform = CATransform3DIdentity;
           回転と視点変換.m34 = 1.0 / 500;

            もし (カウント == 0) {


                rotationAndPerspectiveTransform = CATransform3DRotate(rotationAndPerspectiveTransform, M_PI, 1.0f, 0.0f, 0.0f);
            } else { // 画像に戻す

                rotationAndPerspectiveTransform = CATransform3DRotate(rotationAndPerspectiveTransform, 0.0f, 0.0f, 1.0f, 1.0f);

            }
            layer.transform = rotationAndPerspectiveTransform;
        };
        カウント = (カウント + 1) % 2;

        [UIView animateWithDuration:1.25
                              遅延:0.0
                            オプション: UIViewAnimationCurveEaseInOut
                         アニメーション:アニメーション ブロック
                         完了：なし];

    }
4

1 に答える 1

2

UIView クラスメソッドを知っていますか:

  • (void)transitionFromView:(UIView *)fromView toView:(UIView *)toView 期間:(NSTimeInterval)duration options:(UIViewAnimationOptions)options completion:(void (^)(BOOL finished))completion

正面と背面の 2 つのビューがあります。どちらもペン先に入れることができます。この呼び出しを使用すると、ほとんど手間をかけずに、あるビューから別のビューに切り替えることができます。

編集:私はあなたのコードを見ました。アンカーポイント、位置、および境界はすべて一緒に再生されますが、フレームを引き続き使用できることに注意してください。1 つを変更して、他のものがどのように変化するかを観察するのは興味深い (あえて楽しいと言います)。

私がやったことは、位置とフレームのすべての設定をコメントアウトし、基本的にUIViewの場合と同じようにテキストボックスフレームを設定することです（大きなビューの幅から小さなビューの幅を2で割ったものなど）：

cardBackText.frame = CGRectMake((200-100)/2, (150-30)/2, 100,30); // 200, 150
NSLog(@"position=%@ anchorPoint=%@ bounds=%@", NSStringFromCGPoint(cardBackText.position),NSStringFromCGPoint(cardBackText.anchorPoint),NSStringFromCGRect

ログはこれを出力しました：

position={100, 75} anchorPoint={0.5, 0.5} bounds={{0, 0}, {100, 30}}
于 2012-07-24T23:22:14.887 に答える