2014-04-10 16 views
5

Tôi đang cố gắng để thực hiện điều tò mò tiếp theo: Tôi có một vài dấu chấm và tôi muốn liên kết chúng với sóng sinSine CAShapeLayer như một chiếc mặt nạ của CALayer

phương pháp tiếp trả về mảng các dấu chấm cho làm cho cốt truyện:

- (NSArray *)plotPointsBetweenPoint:(CGPoint)pointA andPoint:(CGPoint)pointB { 
    double H = fabs(pointB.y - pointA.y); 
    double L = fabs(pointB.x - pointA.x); 

    NSInteger granularity = 40; 
    NSMutableArray *array = [NSMutableArray arrayWithCapacity:granularity + 1]; 
    for (int i = 0; i <= granularity; ++i) { 
    CGFloat x = M_PI*(float)i/(granularity); 
    CGFloat y = -cosf(x); 
    CGFloat multiplier = pointA.y > pointB.y ? 1 : -1; 
    CGPoint newPoint = CGPointMake(pointA.x + L*(float)i/granularity, pointA.y - multiplier*H*(1.0 + y)/2.0); 
    [array addObject:[NSValue valueWithCGPoint:newPoint]]; 
    } 
    return array; 
} 

Sau đó tôi tạo ra đặc biệt UIBezierPath:

- (UIBezierPath *)sineWaveWithPoints:(NSArray *)points { 
    UIBezierPath *path = [[UIBezierPath alloc] init]; 
    NSMutableArray *array = [NSMutableArray array]; 

    for (int i = 0; i < points.count - 1; ++i) { 
    [array addObjectsFromArray:[self plotPointsBetweenPoint:[points[i] CGPointValue] andPoint:[points[i+1] CGPointValue]]]; 
    } 
    [path moveToPoint:[array[0] CGPointValue]]; 
    for (NSValue *value in array) { 
    CGPoint point = [value CGPointValue]; 
    [path addLineToPoint:point]; 
    } 
    [path closePath]; 
    path.lineWidth = 2.0; 
    [path stroke]; 
    return path; 
} 

Tiếp theo tôi thêm con đường này sử dụng CAShapeLayer:

CAGradientLayer *gradientLayer = [self gradientLayer]; 
CAShapeLayer *maskLine = [CAShapeLayer layer]; 
maskLine.path = [self sineWaveWithPoints:pointsArray].CGPath; 
maskLine.lineWidth = self.plotWidth; 
gradientLayer.mask = maskLine; 
[self.view.layer addSublayer:gradientLayer]; 

this is what I have in the end

Vì vậy, tôi muốn có sóng sin dốc giữa các điểm này. Chính xác những gì là sai trong hành động của tôi?

lý tưởng: enter image description here

+1

Tôi xin lỗi nhưng tôi không hiểu ý bạn là gì với "Tôi muốn có sóng sine dốc giữa các điểm này". Bạn có thể làm rõ những gì bạn có nghĩa là hoặc thậm chí có thể hiển thị một mockup (ví dụ được thực hiện trong một trình biên tập hình ảnh) của những gì bạn đang cố gắng để làm gì? –

+0

Chắc chắn. Nhiệm vụ là để tạo ra một âm mưu, y-giá trị điểm màu phụ thuộc vào chiều cao giá trị (từ màu tím sang màu vàng, ví dụ). Tôi quyết định rằng cách tốt nhất để điền vào các dòng với gradient như vậy là tạo ra lớp gradient với màu sắc thích hợp và thực hiện phương pháp setMask bằng cách sử dụng tạo ra CAShapeLayer sin. P.S. Tôi ghim kết xuất với mục tiêu chính. – x401om

+0

Mặt nạ gradient với đường nét vuốt ve? –

Trả lời

2

Chương trình được hành xử một cách chính xác - có nghĩa là, nó đang làm chính xác những gì bạn đang nói nó làm. Vấn đề là những gì bạn đang nói nó làm (trong mã của bạn) không phải là những gì bạn nói bạn muốn (trong lời nói và hình ảnh của bạn trong câu hỏi của bạn).

Điều đầu tiên bạn đang làm sai: bạn đã nói closePath. Vì vậy, nó đóng đường! Điều đó có nghĩa rằng, khi rút ra sóng, nó kết nối điểm cuối cùng trở lại điểm đầu tiên với một đường thẳng, cho hình dạng mà bạn hiển thị.

Điều thứ hai bạn đang làm sai: bạn không thể thao tác với lớp hình dạng. Bạn đang tạo một vanilla CAShapeLayer và để nó ở mặc định. Vâng, mặc định là fillColor là màu đen (và không có strokeColor). Bạn không thay đổi điều đó. Vì vậy, bạn đang nhận được (không đúng) hình dạng của bạn đầy màu đen, và không có đột quỵ, và do đó mặt nạ kết quả là hình dạng của bên trong của bạn (không chính xác) hình dạng, cho gradient hình dạng mặt nạ mà bạn hiển thị.

Các vấn đề liên quan