2

コアグラフィックで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(context, 1.0, 0.0, 0.0, 1.0);

CGContextStrokePath(context);

}

チャットバブル

ここに画像の説明を入力

更新されたコード: CGContenxt の代わりに CGPath を使用して、パスを埋めた後にパスを再描画しています。これが新しいコードです。とはいえ、私のストロークの色はまだかなり近いものではありません..

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

}

ここに画像の説明を入力

4

1 に答える 1

2

塗りつぶしの色はほとんど白で、不透明度は約 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);
于 2011-11-04T14:42:31.427 に答える