Question

我试图画一条特定宽度的线条。我在网上搜索了一些例子，但我只找到了使用直线的例子。我需要弯曲的线条。此外，我需要检测用户是否在线内触摸。是否可以使用Objective C和Sprite Kit实现这一目标？如果有的话可以提供一个例子吗？

This is an example of the line i need to draw

Answer 1

您可以使用UIBezierPath创建贝塞尔曲线（非常平滑的曲线）。您可以为CAShapeLayer指定此路径，并将其添加为视图的子图层：

UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(10, 150)];
[path addCurveToPoint:CGPointMake(110, 150) controlPoint1:CGPointMake(40,  100) controlPoint2:CGPointMake(80,  100)];
[path addCurveToPoint:CGPointMake(210, 150) controlPoint1:CGPointMake(140, 200) controlPoint2:CGPointMake(170, 200)];
[path addCurveToPoint:CGPointMake(310, 150) controlPoint1:CGPointMake(250, 100) controlPoint2:CGPointMake(280, 100)];

CAShapeLayer *layer = [CAShapeLayer layer];
layer.lineWidth = 10;
layer.strokeColor = [UIColor redColor].CGColor;
layer.fillColor = [UIColor clearColor].CGColor;
layer.path = path.CGPath;

[self.view.layer addSublayer:layer];

enter image description here

如果你想稍微随机化它，你可以随机化一些曲线。如果你想要一些模糊，添加一些阴影。如果您希望结束为圆形，请指定圆括号：

UIBezierPath *path = [UIBezierPath bezierPath];
CGPoint point = CGPointMake(10, 100);
[path moveToPoint:point];

CGPoint controlPoint1;
CGPoint controlPoint2 = CGPointMake(point.x - 5.0 - arc4random_uniform(50), 150.0);
for (NSInteger i = 0; i < 5; i++) {
    controlPoint1 = CGPointMake(point.x + (point.x - controlPoint2.x), 50.0);
    point.x += 40.0 + arc4random_uniform(20);
    controlPoint2 = CGPointMake(point.x - 5.0 - arc4random_uniform(50), 150.0);
    [path addCurveToPoint:point controlPoint1:controlPoint1 controlPoint2:controlPoint2];
}

CAShapeLayer *layer = [CAShapeLayer layer];
layer.lineWidth = 5;
layer.strokeColor = [UIColor redColor].CGColor;
layer.fillColor = [UIColor clearColor].CGColor;
layer.path = path.CGPath;
layer.shadowColor = [UIColor redColor].CGColor;
layer.shadowRadius = 2.0;
layer.shadowOpacity = 1.0;
layer.shadowOffset = CGSizeZero;
layer.lineCap = kCALineCapRound;

[self.view.layer addSublayer:layer];

enter image description here

如果你想要它更加不规则，那么将这些beziers分成更小的部分，但这个想法是一样的。联合贝塞尔曲线的唯一技巧是你要确保一条曲线的第二个控制点与下一条曲线的第一个控制点一致，否则你最终会在曲线中出现明显的不连续性。

如果您想检测用户是否以及何时点击它，那就更复杂了。但你要做的是：

制作图像快照：

- (UIImage *)captureView:(UIView *)view
{
    UIGraphicsBeginImageContextWithOptions(view.bounds.size, NO, 1.0);  // usually I'd use 0.0, but we'll use 1.0 here so that the tap point of the gesture matches the pixel of the snapshot

    if ([view respondsToSelector:@selector(drawViewHierarchyInRect:afterScreenUpdates:)]) {
        BOOL success = [view drawViewHierarchyInRect:view.bounds afterScreenUpdates:YES];
        NSAssert(success, @"drawViewHierarchyInRect failed");
    } else {
        [view.layer renderInContext:UIGraphicsGetCurrentContext()];
    }

    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    return image;
}

通过识别用户点击的像素的颜色，获取用户点击的坐标处的像素颜色。

- (void)handleTap:(UITapGestureRecognizer *)gesture
{
    CGPoint point = [gesture locationInView:gesture.view];

    CGFloat red, green, blue, alpha;
    UIColor *color = [self image:self.image colorAtPoint:point];
    [color getRed:&red green:&green blue:&blue alpha:&alpha];

    if (green < 0.9 && blue < 0.9 && red > 0.9)
        NSLog(@"tapped on curve");
    else
        NSLog(@"didn't tap on curve");
}

我调整Apple's code for getting the pixel buffer以确定用户点击的像素的颜色。

// adapted from https://developer.apple.com/library/mac/qa/qa1509/_index.html

- (UIColor *)image:(UIImage *)image colorAtPoint:(CGPoint)point
{
    UIColor *color;

    CGImageRef imageRef = image.CGImage;

    // Create the bitmap context
    CGContextRef context = [self createARGBBitmapContextForImage:imageRef];
    NSAssert(context, @"error creating context");

    // Get image width, height. We'll use the entire image.
    size_t width = CGImageGetWidth(imageRef);
    size_t height = CGImageGetHeight(imageRef);
    CGRect rect = {{0,0},{width,height}};

    // Draw the image to the bitmap context. Once we draw, the memory
    // allocated for the context for rendering will then contain the
    // raw image data in the specified color space.
    CGContextDrawImage(context, rect, imageRef);

    // Now we can get a pointer to the image data associated with the bitmap
    // context.
    uint8_t *data = CGBitmapContextGetData (context);
    if (data != NULL) {
        size_t offset = (NSInteger) point.y * 4 * width + (NSInteger) point.x * 4;
        uint8_t alpha = data[offset];
        uint8_t red   = data[offset+1];
        uint8_t green = data[offset+2];
        uint8_t blue  = data[offset+3];

        color = [UIColor colorWithRed:red / 255.0 green:green / 255.0 blue:blue / 255.0 alpha:alpha / 255.0];
    }

    // When finished, release the context

    CGContextRelease(context);

    // Free image data memory for the context

    if (data) {
        free(data);  // we used malloc in createARGBBitmapContextForImage, so free it
    }

    return color;
}

- (CGContextRef) createARGBBitmapContextForImage:(CGImageRef) inImage
{
    CGContextRef    context = NULL;
    CGColorSpaceRef colorSpace;
    void *          bitmapData;
    size_t          bitmapByteCount;
    size_t          bitmapBytesPerRow;

    // Get image width, height. We'll use the entire image.
    size_t pixelsWide = CGImageGetWidth(inImage);
    size_t pixelsHigh = CGImageGetHeight(inImage);

    // Declare the number of bytes per row. Each pixel in the bitmap in this
    // example is represented by 4 bytes; 8 bits each of red, green, blue, and
    // alpha.
    bitmapBytesPerRow   = (pixelsWide * 4);
    bitmapByteCount     = (bitmapBytesPerRow * pixelsHigh);

    // Use the generic RGB color space.
    colorSpace = CGColorSpaceCreateDeviceRGB(); // CGColorSpaceCreateDeviceWithName(kCGColorSpaceGenericRGB);
    NSAssert(colorSpace, @"Error allocating color space");

    // Allocate memory for image data. This is the destination in memory
    // where any drawing to the bitmap context will be rendered.
    bitmapData = malloc(bitmapByteCount);
    NSAssert(bitmapData, @"Unable to allocate bitmap buffer");

    // Create the bitmap context. We want pre-multiplied ARGB, 8-bits
    // per component. Regardless of what the source image format is
    // (CMYK, Grayscale, and so on) it will be converted over to the format
    // specified here by CGBitmapContextCreate.
    context = CGBitmapContextCreate (bitmapData,
                                     pixelsWide,
                                     pixelsHigh,
                                     8,      // bits per component
                                     bitmapBytesPerRow,
                                     colorSpace,
                                     (CGBitmapInfo)kCGImageAlphaPremultipliedFirst);
    NSAssert(context, @"Context not created!");

    // Make sure and release colorspace before returning
    CGColorSpaceRelease( colorSpace );

    return context;
}

检测曲线上的水龙头？

1 个答案: