Siri聊天泡泡颜色在iOS中 [英] Siri chat bubble color's in iOS

问题描述

我尝试在核心图形中创建Siri聊天气泡。我正处于可以绘制形状的阶段。我被困在这里的颜色。 Wanaa获得边框颜色和填充颜色代码。
这是我到目前为止所做的..

   - （void）drawInContext：（CGContextRef）context 
 {
 
 CGRect rect = gradientRectFrame; 
 CGFloat半径= 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（context，1.0,0.0,0.0,1.0）;

  CGContextStrokePath（context）; 
  

}

更新代码：我现在使用CGPath而不是CGContenxt来重绘我的路径填补我的道路。这是新的代码。虽然，我的笔触颜色还不是很接近..

   - （void）drawInContext：（CGContextRef）context 
 
 {
 
 CGRect rect = gradientRectFrame; 
 CGFloat半径= 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）; 
 
} 
  

解决方案

填充颜色大多是白色不透明度约为10％。因此，原始背景（像图案的织物）闪耀并变得稍微更亮。边框颜色也是白色，但不透明度约为30％。

此外，边框右侧和底部有轻微的阴影。 / p>

对于颜色，您大概需要：

  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）; 
  

I tried creating the Siri chat bubble in core graphics. I am at a stage where I can draw the shape. I am stuck with the color's here. Wanaa get the border color and the fill color code. here is what I did so far..

- (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(context, 1.0, 0.0, 0.0, 1.0);

CGContextStrokePath(context);

}

Updated Code: I m now using CGPath instead of CGContenxt to redraw my path after I fill my path. Here is the new Code. Although, my stroke color is not quite close yet..

- (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);

}

解决方案

The fill color is mostly likley white with an opacity of about 10%. So the original background (a fabric like pattern) shines through and becomes slightly brighter. The border color is white as well, but with an opacity of about 30%.

In addition, there's slight shadow at the right and at the bottom of the border.

For the colors, you approximately need:

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);

这篇关于Siri聊天泡泡颜色在iOS中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！