Question

在之前的几个StackOverFlow questions和github CA360上的这个示例中，我设法模拟了一张翻转卡，其中“前面”上有图像，背面上有文字。但是，卡片背面的文字是颠倒的，我只是将它放在地平线的中心位置。如何正确定位文本并将其垂直居中放在我的卡上？

卡片正面：

enter image description here

卡背（如何垂直定位和居中文字？）：

enter image description here

[更新] 的

我将顶层的不透明度设置为0.5，然后我想到了“预翻”背层，这样当实际翻转时，它会将其重置为正常。

enter image description here

我的“预翻”看起来像这样：

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

现在我只需要找到一种内置的垂直设置方式或者用硬方式做到这一点......距离的一半......字体高度......加上......

设置2层卡片容器（Reference）：


    - (void)loadView {
        UIView *myView = [[UIView alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
        myView.backgroundColor = [UIColor whiteColor];

        self.view = myView;

        cardContainer = [CATransformLayer layer];
        cardContainer.frame = CGRectMake(300, 250, 200, 150);


        CALayer *cardFront  = [CALayer layer];
        cardFront.frame     = cardContainer.bounds;
        cardFront.zPosition = 5;   // Higher than the zPosition of the back of the card
        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 layer];
        cardBack.string = @"Hello";
        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 = font;
        [cardContainer addSublayer: cardBack];

        [self.view.layer addSublayer:cardContainer];

    }

从另一个SOF问题借来的代码翻转卡片：


    - (void) flipCard {
    //    [self.flipTimer invalidate];
    //    if (flipped){
    //        return;
    //    }
        NSLog(@"Count=%d", count);
        id animationsBlock = ^{
    //        self.backView.alpha = 1.0f;
    //        self.frontView.alpha = 0.0f;
    //        [self bringSubviewToFront:self.frontView];
    //        flipped = YES;
            NSLog(@"Flipping...");
            CALayer *layer = cardContainer;
            CATransform3D rotationAndPerspectiveTransform = CATransform3DIdentity;
           rotationAndPerspectiveTransform.m34 = 1.0 / 500;

            if (count == 0) {


                rotationAndPerspectiveTransform = CATransform3DRotate(rotationAndPerspectiveTransform, M_PI, 1.0f, 0.0f, 0.0f);
            } else {  // flip it back to image

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

            }
            layer.transform = rotationAndPerspectiveTransform;
        };
        count = (count + 1) % 2;

        [UIView animateWithDuration:1.25
                              delay:0.0
                            options: UIViewAnimationCurveEaseInOut
                         animations:animationsBlock
                         completion:nil];

    }

Answer 1

您是否了解UIView类方法：

（void）transitionFromView：（UIView *）fromView toView：（UIView *）toView持续时间：(NSTimeInterval)duration options:(UIViewAnimationOptions)options completion:(void (^)(BOOL finished))completion

你会有两个视图，正面和背面。两者都可以在你的笔尖。通过此调用，您可以轻松地从一个视图切换到另一个视图。

编辑：我确实看过你的代码。请注意，anchorPoint，position和bounds都在一起播放，但您仍然可以使用frame。它有趣（我敢说很有趣）可以改变一个并看到其他人如何改变。

我最终做的是注释掉所有位置和框架的设置，并且基本上设置文本框框架，就像我用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}}

定位翻转卡背面的文字？

1 个答案: