Cách đơn giản để sử dụng các nút có hình dạng bất thường

Question

Cuối cùng tôi đã có bản phát hành ứng dụng chính của mình (Nhấn Play MMO - kiểm tra nó ;-)) và bây giờ tôi đang làm việc để mở rộng nó.

Để làm điều này, tôi cần phải có một vòng tròn có bốn nút riêng biệt trong đó, các nút này về cơ bản sẽ là phần tư. Tôi đã đi đến kết luận rằng hình ảnh circlular sẽ cần phải được xây dựng của bốn hình ảnh, một cho mỗi quý, nhưng do sự cần thiết của hình dạng hình chữ nhật tôi sẽ kết thúc với một số chồng lên nhau, mặc dù chồng chéo sẽ được trong suốt.

Cách tốt nhất để làm việc này là gì? Tôi cần một cái gì đó thực sự đơn giản thực sự, tôi đã xem xét điều này http://iphonedevelopment.blogspot.com/2010/03/irregularly-shaped-uibuttons.html

Trước khi nhưng chưa thành công trong việc đưa nó vào hoạt động. Bất cứ ai cũng có thể đưa ra một số lời khuyên?

Trong trường hợp nó làm cho bất kỳ sự khác biệt, tôi sẽ được triển khai tới một khuôn khổ iOS 3.x (sẽ được 4,2 xuống dòng khi đi ra 4.2 cho iPad)

Answer 1

Tôi không thể nhìn thấy, tại sao chồng chéo là cần thiết .
Chỉ cần tạo 4 nút và cung cấp cho mỗi người một lát hình ảnh của bạn.

chỉnh sửa sau khi bình luận

thấy great project này. Một ví dụ là chính xác những gì bạn muốn làm.

Nó hoạt động bằng cách kết hợp alpha-giá trị của một pixel trong ghi đè

pointInside:withEvent: và một thể loại trên UIImage, có thêm phương pháp này

- (UIColor *)colorAtPixel:(CGPoint)point { 
    // Cancel if point is outside image coordinates 
    if (!CGRectContainsPoint(CGRectMake(0.0f, 0.0f, self.size.width, self.size.height), point)) { 
     return nil; 
    } 


    // Create a 1x1 pixel byte array and bitmap context to draw the pixel into. 
    // Reference: http://stackoverflow.com/questions/1042830/retrieving-a-pixel-alpha-value-for-a-uiimage 
    NSInteger pointX = trunc(point.x); 
    NSInteger pointY = trunc(point.y); 
    CGImageRef cgImage = self.CGImage; 
    NSUInteger width = self.size.width; 
    NSUInteger height = self.size.height; 
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB(); 
    int bytesPerPixel = 4; 
    int bytesPerRow = bytesPerPixel * 1; 
    NSUInteger bitsPerComponent = 8; 
    unsigned char pixelData[4] = { 0, 0, 0, 0 }; 
    CGContextRef context = CGBitmapContextCreate(pixelData, 
               1, 
               1, 
               bitsPerComponent, 
               bytesPerRow, 
               colorSpace, 
               kCGImageAlphaPremultipliedLast | kCGBitmapByteOrder32Big); 
    CGColorSpaceRelease(colorSpace); 
    CGContextSetBlendMode(context, kCGBlendModeCopy); 

    // Draw the pixel we are interested in onto the bitmap context 
    CGContextTranslateCTM(context, -pointX, pointY-(CGFloat)height); 
    CGContextDrawImage(context, CGRectMake(0.0f, 0.0f, (CGFloat)width, (CGFloat)height), cgImage); 
    CGContextRelease(context); 

    // Convert color values [0..255] to floats [0.0..1.0] 
    CGFloat red = (CGFloat)pixelData[0]/255.0f; 
    CGFloat green = (CGFloat)pixelData[1]/255.0f; 
    CGFloat blue = (CGFloat)pixelData[2]/255.0f; 
    CGFloat alpha = (CGFloat)pixelData[3]/255.0f; 
    return [UIColor colorWithRed:red green:green blue:blue alpha:alpha]; 
} 

Answer 2

Bỏ qua các nút và chỉ đơn giản là đáp ứng chạm vào bạn chế độ xem có chứa vòng kết nối.

Tạo CGPath cho từng khu vực mà bạn muốn chụp chạm, khi giao diện người dùng của bạn nhận được một liên lạc, hãy kiểm tra tư cách thành viên bên trong đường dẫn.

[Sửa câu trả lời để hiển thị chi tiết thực hiện bộ xương - TomH]

Đây là cách tôi sẽ tiếp cận vấn đề: (Tôi đã không kiểm tra mã này và cú pháp có thể không hoàn toàn đúng, nhưng đây là ý tưởng chung)

1) Sử dụng PS hoặc ứng dụng tạo hình ảnh yêu thích của bạn, tạo một png của vòng kết nối quý. Thêm nó vào dự án XCode của bạn.

2) Thêm UIView vào giao diện người dùng. Đặt nội dung của lớp UIView thành png.

self.myView = [[UIView alloc] initWithRect:CGRectMake(10.0, 10.0, 100.0, 100,0)]; 
[myView.layer setContents:(id)[UIImage loadImageNamed:@"my.png"]]; 

3) Tạo CGPath mô tả khu vực trong UIView mà bạn quan tâm.

self.quadrantOnePath = CGPathCreateMutable(); 
CGPathMoveToPoint(self.quadrantOnePath, NULL, 50.0, 50.0); 
CGPathAddLineToPoint(self.quadrantOnePath, NULL, 100.0, 50.0); 
CGPathAddArc(self.quadrantOnePath, NULL, 50.0, 50.0, 50.0, 0.0, M_PI2, 1); 
CGPathCloseSubpath(self.quadrantOnePath); 

// create paths for the other 3 circle quadrants too! 

4) Thêm một UIGestureRecognizer và lắng nghe/quan sát cho vòi trong giao diện

UITapGestureRecognizer *tapRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleGesture:)]; 
[tapRecognizer setNumberOfTapsRequired:2]; // default is 1 

5) Khi tapRecognizer gọi chọn mục tiêu

- (void)handleGesture:(UIGestureRecognizer *) recognizer { 

    CGPoint touchPoint = [recognizer locationOfTouch:0 inView:self.myView]; 
    bool processTouch = CGPathContainsPoint(self.quadrantOnePath, NULL, touchPoint, true); 

    if(processTouch) { 
    // call your method to process the touch 
    } 
} 

Đừng quên để giải phóng tất cả mọi thứ khi thích hợp - sử dụng CGPathRelease để giải phóng các đường dẫn. Một ý nghĩ khác: Nếu đồ họa mà bạn đang sử dụng để đại diện cho góc phần tư của bạn chỉ đơn giản là một màu đầy (tức là không có đồ họa ưa thích, hiệu ứng lớp, vv), bạn cũng có thể sử dụng đường dẫn bạn tạo trong phương pháp drawRect của UIView. để vẽ các góc tọa độ. Điều này sẽ giải quyết một trong những thất bại của phương pháp trên: không có sự tích hợp chặt chẽ giữa đồ họa và các đường dẫn được sử dụng để kiểm tra các điểm chạm. Tức là, nếu bạn hoán đổi đồ họa cho một thứ gì đó khác, hãy thay đổi kích thước của hình ảnh, v.v., đường dẫn của bạn được sử dụng để kiểm tra chạm sẽ không đồng bộ. Có khả năng mã bảo trì cao.

Answer 3

Dưới đây là một dự án tuyệt vời mà giải quyết vấn đề của các nút có hình dạng bất thường quá dễ dàng: http://christinemorris.com/2011/06/ios-irregular-shaped-buttons/