【问题标题】:Detecting touch on a thick UIBezierPath检测厚 UIBezierPath 上的触摸
【发布时间】:2015-05-04 18:46:24
【问题描述】:

在我的应用程序的绘图部分,用户应该能够选择他们创建的路径。 UIBezierPath 有一个方便的方法 containsPoint: 在大多数情况下效果很好,但是当绘制的线接近笔直且没有曲线时,它就特别糟糕。让你的手指碰到一条直线非常困难。

该方法似乎只检查路径上的一条很窄的线,即使将路径的lineWidth 属性设置为更大的值也不会影响containsPoint: 测试的结果。

我看过类似的问题,比如这个:Detect touch on UIBezierPath stroke, not fill 但无法修改解决方案来查看“路径周围的区域”,它似乎只能查看它中心的细线.

编辑

我想出的一个有效但密集的解决方案是将路径转换为UIImage 并在请求的位置检查该图像的颜色。如果 alpha 分量大于零,则路径与触摸相交。

看起来像这样:

// pv is a view that contains our path as a property
// touchPoint is a CGPoint signifying the location of the touch
PathView *ghostPathView = [[PathView alloc] initWithFrame:pv.bounds];
ghostPathView.path = [pv.path copy]; // make a copy of the path
// 40 px is about thick enough to touch reliably
ghostPathView.path.lineWidth = 40; 
// the two magic methods getImage and getColorAtPoint: 
// have been copied from elsewhere on stackoverflow 
// and do exactly what you would expect from their names
UIColor *color = [[ghostPathView getImage] getColorAtPoint:touchPoint];
CGFloat alpha;
[color getWhite:nil alpha:&alpha];

if (alpha > 0){
// it's a match!
}

这里是辅助方法:

// in a category on UIImage
- (UIColor *)getColorAtPoint:(CGPoint)p {
    // return the colour of the image at a specific point

    // make sure the point lies within the image
    if (p.x >= self.size.width || p.y >= self.size.height || p.x < 0 || p.y < 0) return nil;

    // First get the image into your data buffer
    CGImageRef imageRef = [self CGImage];
    NSUInteger width = CGImageGetWidth(imageRef);
    NSUInteger height = CGImageGetHeight(imageRef);
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    unsigned char *rawData = (unsigned char*) calloc(height * width * 4, sizeof(unsigned char));
    NSUInteger bytesPerPixel = 4;
    NSUInteger bytesPerRow = bytesPerPixel * width;
    NSUInteger bitsPerComponent = 8;
    CGContextRef context = CGBitmapContextCreate(rawData, width, height,
                                                 bitsPerComponent, bytesPerRow, colorSpace,
                                                 kCGImageAlphaPremultipliedLast | kCGBitmapByteOrder32Big);
    CGColorSpaceRelease(colorSpace);

    CGContextDrawImage(context, CGRectMake(0, 0, width, height), imageRef);
    CGContextRelease(context);

    // Now your rawData contains the image data in the RGBA8888 pixel format.
    int byteIndex = [[UIScreen mainScreen] scale] * ((bytesPerRow * p.y) + p.x * bytesPerPixel);
    CGFloat red   = (rawData[byteIndex]     * 1.0) / 255.0;
    CGFloat green = (rawData[byteIndex + 1] * 1.0) / 255.0;
    CGFloat blue  = (rawData[byteIndex + 2] * 1.0) / 255.0;
    CGFloat alpha = (rawData[byteIndex + 3] * 1.0) / 255.0;

    free(rawData);

    return [UIColor colorWithRed:red green:green blue:blue alpha:alpha];
}

// in a category on UIView
- (UIImage *)getImage {
    UIGraphicsBeginImageContextWithOptions(self.bounds.size, NO, [[UIScreen mainScreen]scale]);
    [[self layer] renderInContext:UIGraphicsGetCurrentContext()];
    UIImage *viewImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return viewImage;
}

有没有更优雅的方法来做到这一点?

编辑

Satachito 的回答很好,只是想将其包含在 Obj-C 中以确保完整性。我使用 40 pt 笔触,因为它更接近 Apple 推荐的 44x44 像素的最小触摸目标尺寸。

CGPathRef pathCopy = CGPathCreateCopyByStrokingPath(originalPath.CGPath, nil, 40, kCGLineCapButt, kCGLineJoinMiter, 1);
UIBezierPath *fatOne = [UIBezierPath bezierPathWithCGPath:pathCopy];
if ([fatOne containsPoint:p]){
    // match found
}

【问题讨论】:

    标签: ios objective-c quartz-graphics uibezierpath


    【解决方案1】:

    使用“CGPathCreateCopyByStrokingPath”

        let org = UIBezierPath( rect: CGRectMake( 100, 100, 100, 100 ) )
        let tmp = CGPathCreateCopyByStrokingPath(
            org.CGPath
        ,   nil
        ,   10
        ,   CGLineCap( 0 )  //  Butt
        ,   CGLineJoin( 0 ) //  Miter
        ,   1
        )
        let new = UIBezierPath( CGPath: tmp )
    

    使原始路径的描边路径。并使用原始路径和描边路径测试命中。

    【讨论】:

    • 太棒了!这给了我与我想出的复杂方法相同的结果,但速度快了大约 100-200 倍。
    【解决方案2】:

    更新 swift 3

      let path = UIBezierPath(arcCenter: arcCenter,
                                    radius: radius,
                                    startAngle: startAngle,
                                    endAngle: endAngle,
                                    clockwise: true)
            path.lineWidth = arcWidth
         let tmp:CGPath =  path.cgPath.copy(strokingWithWidth: arcWidth,
                                      lineCap: CGLineCap(rawValue: 0)!,
                                     lineJoin: CGLineJoin(rawValue: 0)!,
                                     miterLimit: 1)
            let new = UIBezierPath( cgPath: tmp )
    

    目标 c 更新

     UIBezierPath* path = [[UIBezierPath alloc] init];
    [path addArcWithCenter:arcCenter
                    radius:radii
                startAngle:startAngle
                  endAngle:endAngle
                 clockwise:YES];
    CGPathRef tmp = CGPathCreateCopyByStrokingPath([path CGPath], NULL, self.arcWidth, kCGLineCapButt, kCGLineJoinRound, 1.0);
    UIBezierPath* newPath = [[UIBezierPath alloc] init];
    [newPath setCGPath:tmp];
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2013-10-19
      • 2013-06-25
      相关资源
      最近更新 更多