Đồ họa chính: Vẽ dọc theo một đường dẫn có độ dốc bình thường

Question

Có một số tài nguyên ở đây và ở nơi khác trên web liên quan đến cách vẽ bằng tô màu tô đậm hoặc nét vẽ.

Tuy nhiên, AFAICT, không ai giải quyết các yêu cầu sau đây: làm thế nào để vẽ một con đường với một bình thường gradient, theo đó bình thường nghĩa trực giao với con đường. Hiệu ứng ròng có thể là một cái gì đó giống như kem đánh răng hoặc một ống khi được áp dụng với một gradient tối>> ánh sáng-> tối tuyến tính. Đây là ý tưởng này trong trường hợp của một hình chữ nhật tròn:

round-rect tube http://muys.net/cadre_blanc.png

(này là vẽ tay và các góc không phải là rất tốt).

Trong trường hợp cụ thể của vòng tròn, tôi nghĩ rằng tôi có thể đạt được hiệu ứng này với 4 gradient tuyến tính (các cạnh) và 4 gradient xuyên tâm (các góc). Nhưng có tốt hơn không?

Có giải pháp dễ dàng cho bất kỳ đường dẫn nào không?

Answer 1

Giải pháp "dễ dàng" duy nhất mà tôi có thể nghĩ là làm đột quỵ đường dẫn nhiều lần, giảm chiều rộng nét và thay đổi màu hơi mỗi lần để mô phỏng độ dốc.

Rõ ràng, đây có thể là một hoạt động tốn kém cho các đường dẫn phức tạp, do đó bạn sẽ muốn lưu vào bộ nhớ cache kết quả nếu có thể.

#define RKRandom(x) (arc4random() % ((NSUInteger)(x) + 1)) 

@implementation StrokeView 

- (void)drawRect:(NSRect)rect 
{ 
    NSRect bounds = self.bounds; 

    //first draw using Core Graphics calls 
    CGContextRef c = [[NSGraphicsContext currentContext] graphicsPort]; 

    CGMutablePathRef path = CGPathCreateMutable(); 

    CGPathMoveToPoint(path, NULL, NSMidX(bounds), NSMidY(bounds)); 
    CGContextSetMiterLimit(c,90.0); 
    CGContextSetLineJoin(c, kCGLineJoinRound); 
    CGContextSetLineCap(c, kCGLineCapRound); 

    for(NSUInteger f = 0; f < 20; f++) 
    { 
     CGPathAddCurveToPoint(
           path, 
           NULL, 
           (CGFloat)RKRandom((NSInteger)NSWidth(bounds)) + NSMinX(bounds), 
           (CGFloat)RKRandom((NSInteger)NSHeight(bounds)) + NSMinY(bounds), 
           (CGFloat)RKRandom((NSInteger)NSWidth(bounds)) + NSMinX(bounds), 
           (CGFloat)RKRandom((NSInteger)NSHeight(bounds)) + NSMinY(bounds), 
           (CGFloat)RKRandom((NSInteger)NSWidth(bounds)) + NSMinX(bounds), 
           (CGFloat)RKRandom((NSInteger)NSHeight(bounds)) + NSMinY(bounds) 
          ); 
    } 

    for(NSInteger i = 0; i < 8; i+=2) 
    { 
     CGContextSetLineWidth(c, 8.0 - (CGFloat)i); 
     CGFloat tint = (CGFloat)i * 0.15; 

     CGContextSetRGBStrokeColor (
            c, 
            1.0, 
            tint, 
            tint, 
            1.0 
            ); 
     CGContextAddPath(c, path); 
     CGContextStrokePath(c); 
    } 

    CGPathRelease(path); 

    //now draw using Cocoa drawing 
    NSBezierPath* cocoaPath = [NSBezierPath bezierPathWithRoundedRect:NSInsetRect(self.bounds, 20.0, 20.0) xRadius:10.0 yRadius:10.0]; 
    for(NSInteger i = 0; i < 8; i+=2) 
    { 
     [cocoaPath setLineWidth:8.0 - (CGFloat)i]; 
     CGFloat tint = (CGFloat)i * 0.15; 
     NSColor* color = [NSColor colorWithCalibratedRed:tint green:tint blue:1.0 alpha:1.0]; 
     [color set]; 
     [cocoaPath stroke]; 
    } 
} 

@end