Xoay hình chữ nhật quanh tâm

Question

Tôi đang phát với Brad Larsen's adaption của ứng dụng trackball.
Tôi có hai chế độ xem ở góc 60 độ với nhau và tự hỏi làm cách nào để xoay vòng ở giữa hình chữ nhật (không được đóng) này?

Trong hình ảnh bên dưới, tôi đã thích xoay vòng để diễn ra tất cả trong các đường màu xanh lam.

Mã (sửa đổi để chỉ xoay xung quanh trục x):

#import "MyView.h" 

//===================================================== 
// Defines 
//===================================================== 

#define DEGREES_TO_RADIANS(degrees) \ 
    (degrees * (M_PI/180.0f)) 

//===================================================== 
// Public Interface 
//===================================================== 

@implementation MyView 

- (void)awakeFromNib 
{ 
    transformed = [CALayer layer]; 
    transformed.anchorPoint = CGPointMake(0.5f, 0.5f); 

    transformed.frame = self.bounds; 
    [self.layer addSublayer:transformed]; 

    CALayer *imageLayer = [CALayer layer]; 
    imageLayer.frame = CGRectMake(10.0f, 4.0f, self.bounds.size.width/2.0f, self.bounds.size.height/2.0f); 
    imageLayer.transform = CATransform3DMakeRotation(DEGREES_TO_RADIANS(60.0f), 1.0f, 0.0f, 0.0f); 
    imageLayer.contents = (id)[[UIImage imageNamed:@"IMG_0051.png"] CGImage]; 
    imageLayer.borderColor = [UIColor yellowColor].CGColor; 
    imageLayer.borderWidth = 2.0f; 
    [transformed addSublayer:imageLayer]; 

    imageLayer = [CALayer layer]; 
    imageLayer.frame = CGRectMake(10.0f, 120.0f, self.bounds.size.width/2.0f, self.bounds.size.height/2.0f); 
    imageLayer.transform = CATransform3DMakeRotation(DEGREES_TO_RADIANS(-60.0f), 1.0f, 0.0f, 0.0f); 
    imageLayer.contents = (id)[[UIImage imageNamed:@"IMG_0089.png"] CGImage]; 
    imageLayer.borderColor = [UIColor greenColor].CGColor; 
    imageLayer.borderWidth = 2.0f; 

    transformed.borderColor = [UIColor whiteColor].CGColor; 
    transformed.borderWidth = 2.0f; 
    [transformed addSublayer:imageLayer]; 

    UIView *line = [[UIView alloc] initWithFrame:CGRectMake(0, self.bounds.size.height/2.0f, self.bounds.size.width, 2)]; 
    [line setBackgroundColor:[UIColor redColor]]; 
    [self addSubview:line]; 

    line = [[UIView alloc] initWithFrame:CGRectMake(0, self.bounds.size.height * (1.0f/4.0f), self.bounds.size.width, 2)]; 
    [line setBackgroundColor:[UIColor blueColor]]; 
    [self addSubview:line]; 

    line = [[UIView alloc] initWithFrame:CGRectMake(0, self.bounds.size.height * (3.0f/4.0f), self.bounds.size.width, 2)]; 
    [line setBackgroundColor:[UIColor blueColor]]; 
    [self addSubview:line]; 
} 

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event 
{ 
    previousLocation = [[touches anyObject] locationInView:self]; 
} 

- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event 
{ 
    CGPoint location = [[touches anyObject] locationInView:self]; 
    //location = CGPointMake(previousLocation.x, location.y); 

    CATransform3D currentTransform = transformed.sublayerTransform; 

    //CGFloat displacementInX = location.x - previousLocation.x; 
    CGFloat displacementInX = previousLocation.x - location.x; 
    CGFloat displacementInY = previousLocation.y - location.y; 

    CGFloat totalRotation = sqrt((displacementInX * displacementInX) + (displacementInY * displacementInY)); 

    CGFloat angle = DEGREES_TO_RADIANS(totalRotation); 
    CGFloat x = ((displacementInX/totalRotation) * currentTransform.m12 + (displacementInY/totalRotation) * currentTransform.m11); 

    CATransform3D rotationalTransform = CATransform3DRotate(currentTransform, angle, x, 0, 0); 

    previousLocation = location; 
    transformed.sublayerTransform = rotationalTransform; 
} 

- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event { 
} 

- (void)dealloc { 
    [super dealloc]; 
} 

@end 

Answer 1

Bạn cần phải đặt imageLayer.zPosition của mỗi cạnh tam giác với khoảng cách từ tâm tam giác (là hình tam giác đều trong trường hợp của bạn).

Nếu sideHeight = self.bounds.size.height/2.0f;
Sau đó distanceFromCenter = ((sideHeight/2.0f)/sqrt(3));

Ngoài ra, khi thiết lập luân chuyển ở hai bên, bạn cần di chuyển chúng vào vị trí cần thiết của họ (trong mã của bạn họ được mã hóa).

Cập nhật Mã

- (void)awakeFromNib 
{ 
    transformed = [CALayer layer]; 
    transformed.anchorPoint = CGPointMake(0.5f, 0.5f); 

    transformed.frame = self.bounds; 
    [self.layer addSublayer:transformed]; 

    CGFloat sideHeight = self.bounds.size.height/2.0f; 
    CGFloat distanceFromCenter = ((sideHeight/2.0f)/sqrt(3)); 

    CGFloat sideC = sideHeight/2.0f; 
    CGFloat sideA = sideC/2.0f; 
    CGFloat sideB = (sqrt(3) * sideA); 

    CALayer *imageLayer = [CALayer layer]; 
    imageLayer.frame = CGRectMake(10.0f, (self.bounds.size.height/2.0f) - (sideHeight/2.0f), self.bounds.size.width/2.0f, sideHeight); 
    imageLayer.transform = CATransform3DConcat(CATransform3DMakeRotation(-DEGREES_TO_RADIANS(60.0f), 1.0f, 0.0f, 0.0f), 
               CATransform3DMakeTranslation(0, -sideA, -sideB)); 
    imageLayer.contents = (id)[[UIImage imageNamed:@"IMG_0051.png"] CGImage]; 
    imageLayer.borderColor = [UIColor yellowColor].CGColor; 
    imageLayer.borderWidth = 2.0f; 
    imageLayer.zPosition = distanceFromCenter; 
    [transformed addSublayer:imageLayer]; 

    imageLayer = [CALayer layer]; 
    imageLayer.frame = CGRectMake(10.0f, (self.bounds.size.height/2.0f) - (sideHeight/2.0f), self.bounds.size.width/2.0f, sideHeight); 
    imageLayer.transform = CATransform3DConcat(CATransform3DMakeRotation(DEGREES_TO_RADIANS(60.0f), 1.0f, 0.0f, 0.0f), 
               CATransform3DMakeTranslation(0, sideA, -sideB)); 
    imageLayer.contents = (id)[[UIImage imageNamed:@"IMG_0089.png"] CGImage]; 
    imageLayer.borderColor = [UIColor greenColor].CGColor; 
    imageLayer.zPosition = distanceFromCenter; 
    imageLayer.borderWidth = 2.0f; 

    transformed.borderColor = [UIColor whiteColor].CGColor; 
    transformed.borderWidth = 2.0f; 
    [transformed addSublayer:imageLayer]; 

    UIView *line = [[UIView alloc] initWithFrame:CGRectMake(0, self.bounds.size.height/2.0f, self.bounds.size.width, 2)]; 
    [line setBackgroundColor:[UIColor redColor]]; 
    [self addSubview:line]; 

    line = [[UIView alloc] initWithFrame:CGRectMake(0, self.bounds.size.height * (1.0f/4.0f), self.bounds.size.width, 2)]; 
    [line setBackgroundColor:[UIColor blueColor]]; 
    [self addSubview:line]; 

    line = [[UIView alloc] initWithFrame:CGRectMake(0, self.bounds.size.height * (3.0f/4.0f), self.bounds.size.width, 2)]; 
    [line setBackgroundColor:[UIColor blueColor]]; 
    [self addSubview:line]; 
} 

Answer 2

Sử dụng cũng biến đổi khác (tôi nghĩ rằng bạn sẽ cần dịch) và nối chúng với vòng xoay. Ví dụ này thậm chí quy mô hình ảnh, vì vậy bạn sẽ có được một quy mô, chuyển và lớp xoay:

CATransform3D translate = CATransform3DMakeTranslation(yourShiftByX, yourShiftByY, 0); 
CATransform3D scale = CATransform3DMakeScale(yourRateX, yourRateY, 1); 
CATransform3D rotate = CATransform3DMakeRotation(DEGREES_TO_RADIANS(60.0f), 1.0, 0.0, 0.0); 
CATransform3D transform = CATransform3DConcat(CATransform3DConcat(rotate, scale), translate); 
// the order is important: FIRST we rotate, THEN we scale and AT LAST we position the object 

// now apply 'transform' to your layer 

Answer 3

bạn nên chắc SuperView IMAGExem của bạn để hiển thị các góc độ:

CATransform3D tranfrom = CATransform3DIdentity; 
tranfrom.m34 = -1.0/z; 
imageView.superview.layer.transform = transfrom;