iOSのコアグラフィックスを使って添付画像のような形を描きたいです。これは可能ですか？可能であればサンプルコードを提供してください。
シェイプ上に少なくとも 3 色のグラデーションが必要です。
17166 次
7 に答える
47
グラデーションは自然にパスに沿って描画されません。あなたはそれをシミュレートする必要があります。コードはNSBezierPath、NSView、およびCGContextを使用していますが、iOSへの移植は難しくありません。
台形のアセンブリで行いました。
グラデーションを描画するNSViewのdrawRectは次のとおりです。
@implementation grad
-(void)drawRect:(NSRect)dirtyRect {
[[NSColor whiteColor]set];
NSRectFill([self bounds]);
float dim = MIN(self.bounds.size.width, self.bounds.size.height);
int subdiv=512;
float r=dim/4;
float R=dim/2;
float halfinteriorPerim = M_PI*r;
float halfexteriorPerim = M_PI*R;
float smallBase= halfinteriorPerim/subdiv;
float largeBase= halfexteriorPerim/subdiv;
NSBezierPath * cell = [NSBezierPath bezierPath];
[cell moveToPoint:NSMakePoint(- smallBase/2, r)];
[cell lineToPoint:NSMakePoint(+ smallBase/2, r)];
[cell lineToPoint:NSMakePoint( largeBase /2 , R)];
[cell lineToPoint:NSMakePoint(-largeBase /2, R)];
[cell closePath];
float incr = M_PI / subdiv;
CGContextRef ctx = [[NSGraphicsContext currentContext] graphicsPort];
CGContextTranslateCTM(ctx, +self.bounds.size.width/2, +self.bounds.size.height/2);
CGContextScaleCTM(ctx, 0.9, 0.9);
CGContextRotateCTM(ctx, M_PI/2);
CGContextRotateCTM(ctx,-incr/2);
for (int i=0;i<subdiv;i++) {
// replace this color with a color extracted from your gradient object
[[NSColor colorWithCalibratedHue:(float)i/subdiv saturation:1 brightness:1 alpha:1] set];
[cell fill];
[cell stroke];
CGContextRotateCTM(ctx, -incr);
}
}
subdivこれは、とr（内側の半径）のさまざまな組み合わせで、さまざまなスケールで、このように見えます。
ブロック付きの新しいバージョン、iOS対応
このバージョンでは、色と輪郭の機能にObjective-Cブロックを使用しています。ブロックに、0から1までの任意の数値の内側の半径、外側の半径、および色を返す関数を渡すだけです。その他のパラメーターは、開始角度、終了角度、細分割の数、中心、およびデバッグ用のスケールです。 CGContextRef。
#import "GradientView.h"
@implementation GradientView
typedef void (^voidBlock)(void);
typedef float (^floatfloatBlock)(float);
typedef UIColor * (^floatColorBlock)(float);
-(CGPoint) pointForTrapezoidWithAngle:(float)a andRadius:(float)r forCenter:(CGPoint)p{
return CGPointMake(p.x + r*cos(a), p.y + r*sin(a));
}
-(void)drawGradientInContext:(CGContextRef)ctx startingAngle:(float)a endingAngle:(float)b intRadius:(floatfloatBlock)intRadiusBlock outRadius:(floatfloatBlock)outRadiusBlock withGradientBlock:(floatColorBlock)colorBlock withSubdiv:(int)subdivCount withCenter:(CGPoint)center withScale:(float)scale
{
float angleDelta = (b-a)/subdivCount;
float fractionDelta = 1.0/subdivCount;
CGPoint p0,p1,p2,p3, p4,p5;
float currentAngle=a;
p4=p0 = [self pointForTrapezoidWithAngle:currentAngle andRadius:intRadiusBlock(0) forCenter:center];
p5=p3 = [self pointForTrapezoidWithAngle:currentAngle andRadius:outRadiusBlock(0) forCenter:center];
CGMutablePathRef innerEnveloppe=CGPathCreateMutable(),
outerEnveloppe=CGPathCreateMutable();
CGPathMoveToPoint(outerEnveloppe, 0, p3.x, p3.y);
CGPathMoveToPoint(innerEnveloppe, 0, p0.x, p0.y);
CGContextSaveGState(ctx);
CGContextSetLineWidth(ctx, 1);
for (int i=0;i<subdivCount;i++)
{
float fraction = (float)i/subdivCount;
currentAngle=a+fraction*(b-a);
CGMutablePathRef trapezoid = CGPathCreateMutable();
p1 = [self pointForTrapezoidWithAngle:currentAngle+angleDelta andRadius:intRadiusBlock(fraction+fractionDelta) forCenter:center];
p2 = [self pointForTrapezoidWithAngle:currentAngle+angleDelta andRadius:outRadiusBlock(fraction+fractionDelta) forCenter:center];
CGPathMoveToPoint(trapezoid, 0, p0.x, p0.y);
CGPathAddLineToPoint(trapezoid, 0, p1.x, p1.y);
CGPathAddLineToPoint(trapezoid, 0, p2.x, p2.y);
CGPathAddLineToPoint(trapezoid, 0, p3.x, p3.y);
CGPathCloseSubpath(trapezoid);
CGPoint centerofTrapezoid = CGPointMake((p0.x+p1.x+p2.x+p3.x)/4, (p0.y+p1.y+p2.y+p3.y)/4);
CGAffineTransform t = CGAffineTransformMakeTranslation(-centerofTrapezoid.x, -centerofTrapezoid.y);
CGAffineTransform s = CGAffineTransformMakeScale(scale, scale);
CGAffineTransform concat = CGAffineTransformConcat(t, CGAffineTransformConcat(s, CGAffineTransformInvert(t)));
CGPathRef scaledPath = CGPathCreateCopyByTransformingPath(trapezoid, &concat);
CGContextAddPath(ctx, scaledPath);
CGContextSetFillColorWithColor(ctx,colorBlock(fraction).CGColor);
CGContextSetStrokeColorWithColor(ctx, colorBlock(fraction).CGColor);
CGContextSetMiterLimit(ctx, 0);
CGContextDrawPath(ctx, kCGPathFillStroke);
CGPathRelease(trapezoid);
p0=p1;
p3=p2;
CGPathAddLineToPoint(outerEnveloppe, 0, p3.x, p3.y);
CGPathAddLineToPoint(innerEnveloppe, 0, p0.x, p0.y);
}
CGContextSetLineWidth(ctx, 10);
CGContextSetLineJoin(ctx, kCGLineJoinRound);
CGContextSetStrokeColorWithColor(ctx, [UIColor blackColor].CGColor);
CGContextAddPath(ctx, outerEnveloppe);
CGContextAddPath(ctx, innerEnveloppe);
CGContextMoveToPoint(ctx, p0.x, p0.y);
CGContextAddLineToPoint(ctx, p3.x, p3.y);
CGContextMoveToPoint(ctx, p4.x, p4.y);
CGContextAddLineToPoint(ctx, p5.x, p5.y);
CGContextStrokePath(ctx);
}
-(void)drawRect:(CGRect)rect {
CGContextRef ctx = UIGraphicsGetCurrentContext();
[[UIColor whiteColor] set];
UIRectFill(self.bounds);
CGRect r = self.bounds;
r=CGRectInset(r, 60, 60);
if (r.size.width > r.size.height)
r.size.width=r.size.height;
else r.size.height=r.size.width;
float radius=r.size.width/2;
[self drawGradientInContext:ctx startingAngle:M_PI/16 endingAngle:2*M_PI-M_PI/16 intRadius:^float(float f) {
// return 0*f + radius/2*(1-f);
return 200+10*sin(M_PI*2*f*7);
// return 50+sqrtf(f)*200;
// return radius/2;
} outRadius:^float(float f) {
// return radius *f + radius/2*(1-f);
return radius;
// return 300+10*sin(M_PI*2*f*17);
} withGradientBlock:^UIColor *(float f) {
// return [UIColor colorWithHue:f saturation:1 brightness:1 alpha:1];
float sr=90, sg=54, sb=255;
float er=218, eg=0, eb=255;
return [UIColor colorWithRed:(f*sr+(1-f)*er)/255. green:(f*sg+(1-f)*eg)/255. blue:(f*sb+(1-f)*eb)/255. alpha:1];
} withSubdiv:256 withCenter:CGPointMake(CGRectGetMidX(r), CGRectGetMidY(r)) withScale:1];
}
@end
例：
于 2012-10-08T05:30:35.413 に答える
23
これを a で描画する場合CGContext:
+[UIBezierPath bezierPathWithArcCenter:radius:startAngle:endAngle:clockwise:]半円弧を含むパスを作成するために使用します。次に、 を使用CGPathCreateCopyByStrokingPathして円弧の周りに囲まれた形状を作成します。を使用CGContextAddPathして、この囲まれた形状をコンテキストのパスに追加してから、 を使用CGContextClipしてクリップ領域を太い円弧に設定します。
あなたの虹色でCGGradientCreateWithColors作成するために使用します。クリップ領域をグラデーションで塗りつぶすためにCGGradient使用します。CGContextDrawLinearGradient
を使用してこれを描画する場合CALayer:
を作成しますCAGradientLayer。レイヤーのcolorsプロパティを虹色に設定します。レイヤーstartPointを (0,0) に、レイヤーendPointを (1,0) に設定します。
を作成CAShapeLayerし、グラデーション レイヤーのマスクとして設定します。+[UIBezierPath bezierPathWithArcCenter:radius:startAngle:endAngle:clockwise:]とを使用しCGPathCreateCopyByStrokingPathて太い円弧を囲むパスを作成し、このパスをシェイプ レイヤーの として設定しますpath。
于 2012-08-02T18:21:04.107 に答える
2
Antoine's answer を使用して、iOS 用に調整しました。
-(void)drawRect:(CGRect)rect {
// http://stackoverflow.com/a/12775798/129202
CGContextRef context = UIGraphicsGetCurrentContext();
[[UIColor whiteColor] set]; //[[NSColor whiteColor]set];
UIRectFill([self bounds]);
float dim = MIN(self.bounds.size.width, self.bounds.size.height);
int subdiv=512;
float r=dim/4;
float R=dim/2;
float halfinteriorPerim = M_PI*r;
float halfexteriorPerim = M_PI*R;
float smallBase= halfinteriorPerim/subdiv;
float largeBase= halfexteriorPerim/subdiv;
UIBezierPath * cell = [UIBezierPath bezierPath];
[cell moveToPoint:CGPointMake(- smallBase/2, r)];
[cell addLineToPoint:CGPointMake(+ smallBase/2, r)];
[cell addLineToPoint:CGPointMake( largeBase /2 , R)];
[cell addLineToPoint:CGPointMake(-largeBase /2, R)];
[cell closePath];
float incr = M_PI / subdiv;
//CGContextRef ctx = [[NSGraphicsContext currentContext] graphicsPort];
CGContextTranslateCTM(context, +self.bounds.size.width/2, +self.bounds.size.height/2);
CGContextScaleCTM(context, 0.9, 0.9);
CGContextRotateCTM(context, M_PI/2);
CGContextRotateCTM(context,-incr/2);
for (int i=0;i<subdiv;i++) {
// replace this color with a color extracted from your gradient object
[[UIColor colorWithHue:(float)i/subdiv saturation:1 brightness:1 alpha:1] set];
[cell fill];
[cell stroke];
CGContextRotateCTM(context, -incr);
}
}
于 2013-05-09T07:35:13.127 に答える
2
別の答えとして、これを見つけました: https://github.com/paiv/AngleGradientLayer
私はそれを試してみましたが、うまくいきます。実装については調べていません。する必要はないと思います。:-)
この時点でのコード:
//
// The MIT License (MIT)
//
// Copyright (C) 2012 Pavel Ivashkov
//
// Permission is hereby granted, free of charge, to any person obtaining a copy of this
// software and associated documentation files (the "Software"), to deal in the Software
// without restriction, including without limitation the rights to use, copy, modify, merge,
// publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons
// to whom the Software is furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in all copies or
// substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
// INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR
// PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE
// FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
// OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
// DEALINGS IN THE SOFTWARE.
//
//
// AngleGradientLayer.m
// paiv
//
// Created by Pavel Ivashkov on 2012-02-12.
//
#import "AngleGradientLayer.h"
#if __has_feature(objc_arc)
#define BRIDGE_CAST(T) (__bridge T)
#else
#define BRIDGE_CAST(T) (T)
#endif
#define byte unsigned char
#define F2CC(x) ((byte)(255 * x))
#define RGBAF(r,g,b,a) (F2CC(r) << 24 | F2CC(g) << 16 | F2CC(b) << 8 | F2CC(a))
#define RGBA(r,g,b,a) ((byte)r << 24 | (byte)g << 16 | (byte)b << 8 | (byte)a)
#define RGBA_R(c) ((uint)c >> 24 & 255)
#define RGBA_G(c) ((uint)c >> 16 & 255)
#define RGBA_B(c) ((uint)c >> 8 & 255)
#define RGBA_A(c) ((uint)c >> 0 & 255)
@interface AngleGradientLayer()
- (CGImageRef)newImageGradientInRect:(CGRect)rect;
@end
static void angleGradient(byte* data, int w, int h, int* colors, int colorCount, float* locations, int locationCount);
@implementation AngleGradientLayer
- (id)init
{
if (!(self = [super init]))
return nil;
self.needsDisplayOnBoundsChange = YES;
return self;
}
#if !__has_feature(objc_arc)
- (void)dealloc
{
[_colors release];
[_locations release];
[super dealloc];
}
#endif
- (void)drawInContext:(CGContextRef)ctx
{
CGContextSetFillColorWithColor(ctx, self.backgroundColor);
CGRect rect = CGContextGetClipBoundingBox(ctx);
CGContextFillRect(ctx, rect);
CGImageRef img = [self newImageGradientInRect:rect];
CGContextDrawImage(ctx, rect, img);
CGImageRelease(img);
}
- (CGImageRef)newImageGradientInRect:(CGRect)rect
{
return [[self class] newImageGradientInRect:rect colors:self.colors locations:self.locations];
}
+ (CGImageRef)newImageGradientInRect:(CGRect)rect colors:(NSArray *)colors locations:(NSArray *)locations
{
int w = CGRectGetWidth(rect);
int h = CGRectGetHeight(rect);
int bitsPerComponent = 8;
int bpp = 4 * bitsPerComponent / 8;
int byteCount = w * h * bpp;
int colorCount = (int)colors.count;
int locationCount = (int)locations.count;
int* cols = NULL;
float* locs = NULL;
if (colorCount > 0) {
cols = calloc(colorCount, bpp);
int *p = cols;
for (id cg in colors) {
CGColorRef c = BRIDGE_CAST(CGColorRef)cg;
float r, g, b, a;
size_t n = CGColorGetNumberOfComponents(c);
const CGFloat *comps = CGColorGetComponents(c);
if (comps == NULL) {
*p++ = 0;
continue;
}
r = comps[0];
if (n >= 4) {
g = comps[1];
b = comps[2];
a = comps[3];
}
else {
g = b = r;
a = comps[1];
}
*p++ = RGBAF(r, g, b, a);
}
}
if (locationCount > 0 && locationCount == colorCount) {
locs = calloc(locationCount, sizeof(locs[0]));
float *p = locs;
for (NSNumber *n in locations) {
*p++ = [n floatValue];
}
}
byte* data = malloc(byteCount);
angleGradient(data, w, h, cols, colorCount, locs, locationCount);
if (cols) free(cols);
if (locs) free(locs);
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
CGBitmapInfo bitmapInfo = kCGImageAlphaPremultipliedLast | kCGBitmapByteOrder32Little;
CGContextRef ctx = CGBitmapContextCreate(data, w, h, bitsPerComponent, w * bpp, colorSpace, bitmapInfo);
CGColorSpaceRelease(colorSpace);
CGImageRef img = CGBitmapContextCreateImage(ctx);
CGContextRelease(ctx);
free(data);
return img;
}
@end
static inline byte blerp(byte a, byte b, float w)
{
return a + w * (b - a);
}
static inline int lerp(int a, int b, float w)
{
return RGBA(blerp(RGBA_R(a), RGBA_R(b), w),
blerp(RGBA_G(a), RGBA_G(b), w),
blerp(RGBA_B(a), RGBA_B(b), w),
blerp(RGBA_A(a), RGBA_A(b), w));
}
static inline int multiplyByAlpha(int c)
{
float a = RGBA_A(c) / 255.0;
return RGBA((byte)(RGBA_R(c) * a),
(byte)(RGBA_G(c) * a),
(byte)(RGBA_B(c) * a),
RGBA_A(c));
}
void angleGradient(byte* data, int w, int h, int* colors, int colorCount, float* locations, int locationCount)
{
if (colorCount < 1) return;
if (locationCount > 0 && locationCount != colorCount) return;
int* p = (int*)data;
float centerX = (float)w / 2;
float centerY = (float)h / 2;
for (int y = 0; y < h; y++)
for (int x = 0; x < w; x++) {
float dirX = x - centerX;
float dirY = y - centerY;
float angle = atan2f(dirY, dirX);
if (dirY < 0) angle += 2 * M_PI;
angle /= 2 * M_PI;
int index = 0, nextIndex = 0;
float t = 0;
if (locationCount > 0) {
for (index = locationCount - 1; index >= 0; index--) {
if (angle >= locations[index]) {
break;
}
}
if (index >= locationCount) index = locationCount - 1;
nextIndex = index + 1;
if (nextIndex >= locationCount) nextIndex = locationCount - 1;
float ld = locations[nextIndex] - locations[index];
t = ld <= 0 ? 0 : (angle - locations[index]) / ld;
}
else {
t = angle * (colorCount - 1);
index = t;
t -= index;
nextIndex = index + 1;
if (nextIndex >= colorCount) nextIndex = colorCount - 1;
}
int lc = colors[index];
int rc = colors[nextIndex];
int color = lerp(lc, rc, t);
color = multiplyByAlpha(color);
*p++ = color;
}
}
于 2014-02-17T10:44:14.213 に答える
1
私もこれを行う方法を長い間探していたので、最終的に行った方法を投稿しようと思いました. どちらの答えも、この質問に対する優れた答えであることがわかりました。
私の目的のために、その回答の描画部分とグラデーション部分のみを使用しました。構造はだいたいこんな感じ…
CGContextRef context = UIGraphicsGetCurrentcontext();
CGFloat arcStartAngle = M_PI;
CGFloat arcEndAngle = 2 * M_PI;
CGPoint startPoint = CGPointMake(...);
CGPoint endPoint = CGPointMake(...);
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
CGFloat colors[] =
{
1.0, 0.0, 0.0, 1.0, //RGBA values (so red to green in this case)
0.0, 1.0, 0.0, 1.0
};
CGGradientRef gradient = CGGradientCreateWithColorComponents(colorSpace, colors, NULL, 2);
//Where the 2 is for the number of color components. You can have more colors throughout //your gradient by adding to the colors[] array, and changing the components value.
CGColorSpaceRelease(colorSpace);
//Now for the arc part...
CGMutablePathRef arc = CGPathCreateMutable();
CGPathMoveToPoint(arc, NULL, startPoint.x, startPoint.y);
//Here, the CGPoint self.arcCenter is the point around which the arc is placed, so maybe the
//middle of your view. self.radius is the distance between this center point and the arc.
CGPathAddArc(arc, NULL, self.arcCenter.x, self.arcCenter.y, self.radius,
arcStartAngle, arcEndAngle, YES);
//This essentially draws along the path in an arc shape
CGPathRef strokedArc = CGPathCreateCopyByStrokingPath(arc, NULL, 5.0f,
kCGLineCapButt, kCGLineJoinMiter, 10);
CGContextSaveGState(context);
CGContextAddPath(context, strokedArc);
CGContextClip(context);
CGContextDrawLinearGradient(context, gradient, startPoint, endPoint, 0);
CGContextDrawPath(context, kCGPathFillStroke);
CGGradientRelease(gradient);
CGContextRestoreGState(context);
//This all draws a gradient that is much larger than the arc itself, but using
//CGContextClip, it clips out everything EXCEPT the colors in the arc. Saving and Restoring
//the state allows you to preserve any other drawing going on. If you didn't use these,
//then all other drawing would also be clipped.
これが役立つことを願っています。不明な点がある場合は、上記の質問リンクを確認することをお勧めします。その質問への回答には、この回答で使用したすべての内容と、クールで便利な描画のヒントがいくつか含まれています。
于 2014-06-03T01:39:56.173 に答える