• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

iphone - iOS 中的 Siri 聊天气泡颜色

[复制链接]
菜鸟教程小白 发表于 2022-12-11 20:27:00 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题

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

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

}

Chat Bubble

enter image description here

更新的代码:我现在使用 CGPath 而不是 CGContenxt 在填充路径后重新绘制路径。这是新的代码。虽然,我的笔触颜色还不是很接近..

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

}

enter image description here



Best Answer-推荐答案


填充颜色主要是白色,不透明度约为 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);

关于iphone - iOS 中的 Siri 聊天气泡颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8010500/

回复

使用道具 举报

懒得打字嘛,点击右侧快捷回复 【右侧内容,后台自定义】
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关注0

粉丝2

帖子830918

发布主题
阅读排行 更多
广告位

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap