使用不规则形状按钮的简单方法

Question

我终于得到了我的主要应用程序版本(点击播放MMO - 检查出来;-))我正在努力扩展它.

要做到这一点,我需要一个有四个单独按钮的圆圈,这些按钮基本上是四分之一.我得出结论,圆形图像需要由四个图像构成,每个四分之一,但由于矩形图像形状的必要性,我最终会有一些重叠,尽管重叠将是透明.

让它发挥作用的最佳方法是什么？我需要一些非常简单的东西,我看过这个 http://iphonedevelopment.blogspot.com/2010/03/irregularly-shaped-uibuttons.html

之前但尚未成功实现它.有人能提供一些建议吗？

如果它有任何不同,我将部署到iOS 3.X框架(当4.2推出iPad时将为4.2)

Answer 1

跳过按钮,只需响应包含圆圈的视图中的触摸即可.

为要捕获触摸的每个区域创建CGPath,当UIview接收到触摸时,检查路径内的成员身份.

[编辑回答显示骨架实现细节 - TomH]

以下是我将如何处理这个问题:(我没有测试过这段代码,语法可能不太正确,但这是一般的想法)

1)使用PS或您喜欢的图像创建应用程序,创建一个四分之一圆圈.将其添加到您的XCode项目中.

2)向UI添加UIView.将UIView的图层内容设置为png.

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

3)创建描述您感兴趣的UIView中的区域的CGPath.

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)添加UIGestureRecognizer并监听/观察视图中的点击

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

5)当tapRecognizer调用其目标选择器时

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

不要忘记在适当时释放所有内容 - 使用CGPathRelease释放路径.

另一个想法:如果用于表示圆形象限的图形只是填充颜色(即没有精美的图形,图层效果等),您还可以使用在UIView的drawRect方法中创建的路径来绘制象限太.这将解决上述方法的一个缺点:图形与用于检查触摸的路径之间没有紧密集成.也就是说,如果您将图形替换为不同的图形,更改图形的大小等,用于检查触摸的路径将不同步.可能是一段高维护代码.

Answer 2

我看不出,为什么需要重叠.
只需创建4个按钮,并为每个按钮分配一个图像.

评论后编辑

看到这个伟大的项目.一个例子就是你想要做的.

它通过在重写中合并像素的alpha值来工作

pointInside:withEvent: 和UIImage上的一个类别,它添加了这个方法

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