的Siri聊天氣泡的顏色在iOS版

Question

我嘗試創建核心圖形的Siri聊天泡沫。我正處於一個可以繪製形狀的階段。我被卡在這裏的顏色。 Wanaa獲取邊框顏色和填充顏色代碼。 這裏是我做過什麼，到目前爲止..

- (void)drawInContext:(CGContextRef)context 
{ 

CGRect rect = gradientRectFrame; 
CGFloat radius = 30; 

CGFloat originBufferX = 0.0; 
CGFloat originBufferY = 0.0; 
CGFloat rightAngleTriangleWidth = 20.0; 
CGFloat rightAngleTriangleHeight = 20.0; 
CGFloat fullRectWidth = rect.size.width; 
CGFloat fullRectHeight = rect.size.height; 


CGPoint pointZero = CGPointMake(originBufferX, fullRectHeight); 
CGPoint pointOne = CGPointMake(originBufferX + rightAngleTriangleWidth, fullRectHeight - rightAngleTriangleHeight); 
CGPoint pointTwo = CGPointMake(originBufferX + rightAngleTriangleWidth, radius + originBufferY); 
CGPoint pointThree = CGPointMake(originBufferX + fullRectWidth - radius, 0 + originBufferY); 
CGPoint pointFour = CGPointMake(fullRectWidth, originBufferY + fullRectHeight - radius);  
CGContextSetRGBFillColor(context, 105/255, 105/255, 105/255, 0.5); 
CGContextSetLineWidth(context, 2.0); 


CGContextMoveToPoint(context, pointZero.x, pointZero.y); 

CGContextAddLineToPoint(context, pointOne.x, pointOne.y); 

CGContextAddLineToPoint(context, pointTwo.x, pointTwo.y); 

CGContextAddArc(context, rightAngleTriangleWidth + radius, originBufferY + radius, radius, M_PI, -M_PI_2, 0); 

CGContextAddLineToPoint(context, pointThree.x, pointThree.y); 

CGContextAddArc(context, fullRectWidth - radius, originBufferY + radius, radius, -M_PI_2, 0.0f, 0); 

CGContextAddLineToPoint(context, pointFour.x, pointFour.y); 

CGContextAddArc(context, fullRectWidth - radius, originBufferY + fullRectHeight - radius, radius, 0.0f, M_PI_2, 0); 

CGContextAddLineToPoint(context, pointZero.x, pointZero.y); 

CGContextFillPath(context); 

CGContextSetRGBStrokeColor(context, 50/255, 50/255, 50/255, 0.5); 

// CGContextSetRGBStrokeColor（背景下，1.0，0.0，0.0，1.0）;

CGContextStrokePath(context); 

}

更新的代碼：我米現在使用CGPath代替CGContenxt我填我的道路後，重繪我的道路。這是新的代碼。雖然，我的筆觸顏色是不是很接近但..

- (void)drawInContext:(CGContextRef)context 

{ 

CGRect rect = gradientRectFrame; 
CGFloat radius = 20; 

CGFloat originBufferX = 0.0; 
CGFloat originBufferY = 0.0; 
CGFloat rightAngleTriangleWidth = 20.0; 
CGFloat rightAngleTriangleHeight = 20.0; 
CGFloat fullRectWidth = rect.size.width; 
CGFloat fullRectHeight = rect.size.height; 


CGPoint pointZero = CGPointMake(originBufferX, fullRectHeight); 
CGPoint pointOne = CGPointMake(originBufferX + rightAngleTriangleWidth, fullRectHeight - rightAngleTriangleHeight); 
CGPoint pointTwo = CGPointMake(originBufferX + rightAngleTriangleWidth, radius + originBufferY); 
CGPoint pointThree = CGPointMake(originBufferX + fullRectWidth - radius, 0 + originBufferY); 
CGPoint pointFour = CGPointMake(fullRectWidth, originBufferY + fullRectHeight - radius);  

CGContextSetRGBStrokeColor(context, 0.8, 0.8, 0.8, 0.3); 

CGMutablePathRef path = CGPathCreateMutable(); 
CGPathMoveToPoint(path, NULL, pointZero.x, pointZero.y); 

CGPathAddLineToPoint(path, NULL, pointOne.x, pointOne.y); 

CGPathAddLineToPoint(path, NULL, pointTwo.x, pointTwo.y); 

CGPathAddArc(path, NULL, rightAngleTriangleWidth + radius, originBufferY + radius, radius, M_PI, -M_PI_2, 0); 

CGPathAddLineToPoint(path, NULL, pointThree.x, pointThree.y); 

CGPathAddArc(path, NULL, fullRectWidth - radius, originBufferY + radius, radius, -M_PI_2, 0.0f, 0); 

CGPathAddLineToPoint(path, NULL, pointFour.x, pointFour.y); 

CGPathAddArc(path, NULL, fullRectWidth - radius, originBufferY + fullRectHeight - radius, radius, 0.0f, M_PI_2, 0); 

CGPathAddLineToPoint(path, NULL, pointZero.x, pointZero.y); 

CGContextSaveGState(context); 
CGContextAddPath(context, path); 

CGContextSetLineWidth(context, 2.0f); 
CGContextSetRGBFillColor(context, 1.0f, 1.0f, 1.0f, 0.1f); 
CGContextFillPath(context); 

CGContextAddPath(context, path); 
CGContextStrokePath(context); 

} 

Answer 1

填充顏色主要是白色likley用約10％的不透明度。所以原始的背景（像圖案一樣的織物）通過並變得稍微更亮。邊框的顏色也是白色的，但不透明度約爲30％。

此外，還有輕微的陰影在右側和在邊境的底部。

至於顏色，你需要大約：

CGContextSaveGState(context); 
CGContextSetShadow(context, CGSizeMake(-15f, -20f), 1.0f); 
CGContextSetLineWidth(context, 2.0f); 
CGContextSetRGBFillColor(context, 1.0f, 1.0f, 1.0f, 0.1f); 
CGContextFillPath(context); 
CGContextRestoreGState(context); 

CGContextSetRGBStrokeColor(context, 1.0f, 1.0f, 1.0f, 0.3f); 
CGContextStrokePath(context);