NSBezierPath：創建一個「彎曲」方

Question

我想創建一個表示「彎曲」或「臃腫」方形像這樣的NSBezierPath：

我掙扎拿出正確的數學得到這個形狀是完全正確的。我已經瀏覽了整個互聯網，但谷歌搜索這個主題主要是「這裏是如何繪製圓角」，這不是我所需要的。

任何人都可以指向我可以用來放置這些曲線控制點的公式嗎？謝謝！

Answer 1

好的;經過多次試驗和錯誤，我得到了一些有效的方法。下面的代碼將繪製出一個像這樣的形狀。 （該圖像使用以下值的#define語句中的代碼）：

#define SIDE_DEFLECTION 18.0f 
#define CORNER_RAD 18.0f 
#define KAPPA 0.55238f 
#define CORNER_CP_OFFSET_FOR_SIDE_DEFLECTION .10 
#define SIDE_CENTER_CP_OFFSET 0.60 

這些值，給定500×500一個象素圖，將繪製該形狀：

繪圖代碼

在我的情況下，我在NSButtonCell子類中繪製這個形狀。因爲我知道這個單元格的框架永遠不會在我的應用中調整大小，所以我可以做一些優化。具體來說，我將NSBezierPath存儲爲iVar，所以我不必每次都通過-drawImage重新創建它...此外，我將NSShadow和NSColor存儲爲iVar，因此不必重新創建它們。

如果您要在調整大小的視圖中繪製此形狀，您需要稍微調整一下代碼。如果方形的尺寸急劇變化，那麼現在需要手動調整#define語句的值（否則，拐角看起來並不準確，側彎曲線過渡到圓角曲線等幾乎沒有縮進）

下面的代碼被配置爲在52x52像素的正方形中繪製相同的形狀。一般的方法是設置你想要的「側偏轉」和「角半徑」，然後調整兩個「偏移」定義語句（這是百分比），直到角落看起來很完美。 「kappa」的價值永遠不會改變---一個來自我發現的數學論文。

這裏是最優化的繪圖代碼：

#import "LPProjectIconButtonCell.h" 


#define SIDE_DEFLECTION 1.0f 
#define CORNER_RAD 4.0f 

// Distance (%) control points should be from curve start/end to form perfectly circular rounded corners 
#define KAPPA 0.55238f 

// Percentage offset (from perfectly circular rounded corner location) that the corner control points use to 
// compensate for the fact that our sides are rounded. Without this, we get a rough transition between the 
// curve of the side and the start of the corner curve 
#define CORNER_CP_OFFSET_FOR_SIDE_DEFLECTION .85 

// As the curve approaches each side-center point, this is the percentage of the distance between the side endpoints 
// and the side centerpoint where the control point for approaching the centerpoint is located. You are not expected 
// to understand the preceeding sentence. 
#define SIDE_CENTER_CP_OFFSET 0.60 



@implementation LPProjectIconButtonCell 

- (void) awakeFromNib 
{ 
    _shadow = [[NSShadow alloc] init]; 
    [_shadow setShadowBlurRadius:1.0f]; 
    [_shadow setShadowColor:[NSColor colorWithCalibratedWhite:1.0f alpha:0.2f]]; 
    [_shadow setShadowOffset:NSMakeSize(0.0f, -1.0f)]; 

    _borderColor = [[NSColor colorWithCalibratedWhite:0.13 alpha:1.0f] retain]; 
} 

- (void) dealloc 
{ 
    [_path release]; 
    _path = nil; 

    [_shadow release]; 
    _shadow = nil; 

    [_borderColor release]; 
    _borderColor = nil; 

    [super dealloc]; 
} 


- (void) drawImage:(NSImage *)image withFrame:(NSRect)frame inView:(NSView *)controlView 
{ 
    NSGraphicsContext *currentContext = [NSGraphicsContext currentContext]; 

    // The path never changes because this view never resizes. So we'll save it to be efficient 
    if (!_path) 
    { 
     NSRect rect = NSInsetRect(frame, 2.0f, 2.0f); 

     // Create the primary points -- 3 per side 
     NSPoint TCenter = NSMakePoint(rect.size.width/2.0f, rect.origin.y); 
     NSPoint TLeft = NSMakePoint(rect.origin.x + CORNER_RAD + SIDE_DEFLECTION, rect.origin.y + SIDE_DEFLECTION); 
     NSPoint TRight = NSMakePoint(rect.origin.x + rect.size.width - (CORNER_RAD + SIDE_DEFLECTION), rect.origin.y + SIDE_DEFLECTION); 

     NSPoint LTop = NSMakePoint(rect.origin.x + SIDE_DEFLECTION, rect.origin.y + CORNER_RAD + SIDE_DEFLECTION); 
     NSPoint LCenter = NSMakePoint(rect.origin.x, rect.size.height/2.0f); 
     NSPoint LBottom = NSMakePoint(rect.origin.x + SIDE_DEFLECTION, rect.origin.y + rect.size.height - CORNER_RAD - SIDE_DEFLECTION); 

     NSPoint BLeft = NSMakePoint(TLeft.x, rect.origin.y + rect.size.height - SIDE_DEFLECTION); 
     NSPoint BCenter = NSMakePoint(TCenter.x, rect.origin.y + rect.size.height); 
     NSPoint BRight = NSMakePoint(TRight.x, BLeft.y); 

     NSPoint RTop = NSMakePoint(rect.origin.x + rect.size.width - SIDE_DEFLECTION, LTop.y); 
     NSPoint RCenter = NSMakePoint(rect.origin.x + rect.size.width, LCenter.y); 
     NSPoint RBottom = NSMakePoint(RTop.x, LBottom.y); 


     // Create corner control points for rounded corners 
     // We don't want them to be perfectly circular, because our sides are curved. So we adjust them slightly to compensate for that. 
     NSPoint CP_TLeft = NSMakePoint(TLeft.x - (TLeft.x - LTop.x) * KAPPA, TLeft.y + SIDE_DEFLECTION * CORNER_CP_OFFSET_FOR_SIDE_DEFLECTION); 
     NSPoint CP_LTop = NSMakePoint(LTop.x + SIDE_DEFLECTION * CORNER_CP_OFFSET_FOR_SIDE_DEFLECTION, LTop.y - (LTop.y - TLeft.y) * KAPPA); 

     NSPoint CP_LBottom = NSMakePoint(LBottom.x + SIDE_DEFLECTION * CORNER_CP_OFFSET_FOR_SIDE_DEFLECTION, LBottom.y + (BLeft.y - LBottom.y) * KAPPA); 
     NSPoint CP_BLeft = NSMakePoint(BLeft.x - (BLeft.x - LBottom.x) * KAPPA, BLeft.y - SIDE_DEFLECTION * CORNER_CP_OFFSET_FOR_SIDE_DEFLECTION); 

     NSPoint CP_BRight = NSMakePoint(BRight.x + (RBottom.x - BRight.x) * KAPPA, BRight.y - SIDE_DEFLECTION * CORNER_CP_OFFSET_FOR_SIDE_DEFLECTION); 
     NSPoint CP_RBottom = NSMakePoint(RBottom.x - SIDE_DEFLECTION * CORNER_CP_OFFSET_FOR_SIDE_DEFLECTION, RBottom.y + (BRight.y - RBottom.y) * KAPPA); 

     NSPoint CP_RTop = NSMakePoint(RTop.x - SIDE_DEFLECTION * CORNER_CP_OFFSET_FOR_SIDE_DEFLECTION, RTop.y - (RTop.y - TRight.y) * KAPPA); 
     NSPoint CP_TRight = NSMakePoint(TRight.x + (RTop.x - TRight.x) * KAPPA, TRight.y + SIDE_DEFLECTION * CORNER_CP_OFFSET_FOR_SIDE_DEFLECTION); 


     // Create control points for the rounded sides. (The "duplicate" control points are here in case I ever tweak this in the future.) 
     NSPoint CP_DepartingTCenterForTLeft = NSMakePoint(TCenter.x - (TCenter.x - TLeft.x) * SIDE_CENTER_CP_OFFSET, TCenter.y); 
     NSPoint CP_ApproachingTLeft = TLeft; 

     NSPoint CP_DepartingLTopForLCenter = LTop; 
     NSPoint CP_ApproachingLCenterFromLTop = NSMakePoint(LCenter.x, LCenter.y - (LCenter.y - LTop.y) * SIDE_CENTER_CP_OFFSET); 

     NSPoint CP_DepartingLCenterForLBottom = NSMakePoint(LCenter.x, LCenter.y + (LBottom.y - LCenter.y) * SIDE_CENTER_CP_OFFSET); 
     NSPoint CP_ApproachingLBottom = LBottom; 

     NSPoint CP_DepartingBLeftForBCenter = BLeft; 
     NSPoint CP_ApproachingBCenter = NSMakePoint(BCenter.x - (BCenter.x - BLeft.x) * SIDE_CENTER_CP_OFFSET, BCenter.y); 

     NSPoint CP_DepartingBCenterForBRight = NSMakePoint(BCenter.x + (BRight.x - BCenter.x) * SIDE_CENTER_CP_OFFSET, BCenter.y); 
     NSPoint CP_ApproachingBRight = BRight; 

     NSPoint CP_DepartingRBottomForRCenter = RBottom; 
     NSPoint CP_ApproachingRCenterFromRBottom = NSMakePoint(RCenter.x, RCenter.y + (RBottom.y - RCenter.y) * SIDE_CENTER_CP_OFFSET); 

     NSPoint CP_DepartingRCenterForRTop = NSMakePoint(RCenter.x, RCenter.y - (RCenter.y - RTop.y) * SIDE_CENTER_CP_OFFSET); 
     NSPoint CP_ApproachingRTopFromRCenter = RTop; 

     NSPoint CP_DepartingTRightForTCenter = TRight; 
     NSPoint CP_ApproachingTCenterFromTRight = NSMakePoint(TCenter.x + (TRight.x - TCenter.x) * SIDE_CENTER_CP_OFFSET, TCenter.y); 


     // Draw the bloody square 
     NSBezierPath *p = [[NSBezierPath alloc] init]; 

     [p moveToPoint:TCenter]; 
     [p curveToPoint:TLeft controlPoint1:CP_DepartingTCenterForTLeft controlPoint2:CP_ApproachingTLeft]; 
     [p curveToPoint:LTop controlPoint1:CP_TLeft controlPoint2:CP_LTop]; 
     [p curveToPoint:LCenter controlPoint1:CP_DepartingLTopForLCenter controlPoint2:CP_ApproachingLCenterFromLTop]; 
     [p curveToPoint:LBottom controlPoint1:CP_DepartingLCenterForLBottom controlPoint2:CP_ApproachingLBottom]; 
     [p curveToPoint:BLeft controlPoint1:CP_LBottom controlPoint2:CP_BLeft]; 
     [p curveToPoint:BCenter controlPoint1:CP_DepartingBLeftForBCenter controlPoint2:CP_ApproachingBCenter]; 
     [p curveToPoint:BRight controlPoint1:CP_DepartingBCenterForBRight controlPoint2:CP_ApproachingBRight]; 
     [p curveToPoint:RBottom controlPoint1:CP_BRight controlPoint2:CP_RBottom]; 
     [p curveToPoint:RCenter controlPoint1:CP_DepartingRBottomForRCenter controlPoint2:CP_ApproachingRCenterFromRBottom]; 
     [p curveToPoint:RTop controlPoint1:CP_DepartingRCenterForRTop controlPoint2:CP_ApproachingRTopFromRCenter]; 
     [p curveToPoint:TRight controlPoint1:CP_RTop controlPoint2:CP_TRight]; 
     [p curveToPoint:TCenter controlPoint1:CP_DepartingTRightForTCenter controlPoint2:CP_ApproachingTCenterFromTRight]; 

     [p closePath]; 

     _path = p; 
    } 

    // We want a slightly white drop shadow on the stroke and fill, giving our square some sense of depth. 
    [_shadow set]; 

    [[NSColor blackColor] set]; 
    [_path fill]; 


    // Clip to the bezier path and draw a fill image inside of it. 
    [currentContext saveGraphicsState]; 

     [_path addClip]; 
     [image drawInRect:frame fromRect:NSZeroRect operation:NSCompositeCopy fraction:1.0f respectFlipped:YES hints:nil]; 

     if (self.isHighlighted) 
     { 
      // If we're clicked, draw a 50% black overlay to show that 
      NSColor *overColor = [NSColor colorWithCalibratedWhite:0.0 alpha:0.5]; 
      [overColor set]; 
      [_path fill]; 
     } 

    [currentContext restoreGraphicsState]; 


    // Stroke the square to create a nice border with a drop shadow at top and bottom. 
    [_borderColor set]; 
    [_path stroke]; 
} 

@end