iphone - IOS で 3D 棒グラフを描画するには?

Question

主に、これらの 3D バーを描画する方法を知りたいです。

Answer 1

フクロウによく似ています。

1. 描き方を学びましょう。
2. ひっくり返るフクロウを描きます。

各バーはほとんど同じものなので、任意のバーを描画するメソッドを作成します。

バーをそれが何であるかに分解します。同じベースカラーの色合いの 3 つの台形。

任意のバーを描画するメソッドを作成する

-(void)drawBarOfHeight:(CGFloat)bheight width:(CGFloat)bwidth colour:(UIColor *)acolor atOrigin:(CGPoint)origin
{ 

    CGPoint correctedOrigin = origin;

    //draw the front face , its a plain rectangle - semi dark
    [[self tintOfColor:acolor tint:0.8] set];

    UIBezierPath *face1 = [UIBezierPath bezierPathWithRect:CGRectMake(correctedOrigin.x, correctedOrigin.y - bheight, bwidth, bheight)];
    [face1 fill];


    //basic trig 
    CGFloat PI = 3.141;
    CGFloat theta = 45; //degrees
    CGFloat section = bwidth * 0.7; //bit of jiggling otherwise it looks crappy

    CGFloat yoffset = section * sinf(theta * PI/180); //needs radians
    CGFloat xoffset = section * cosf(theta * PI/180);

    //draw the side face , its a trapezoid set at theta - 
    UIBezierPath *face2 = [UIBezierPath bezierPath];
    [face2 moveToPoint:CGPointMake(correctedOrigin.x + bwidth, correctedOrigin.y)];
    [face2 addLineToPoint:CGPointMake(correctedOrigin.x + bwidth, correctedOrigin.y - bheight)];
    [face2 addLineToPoint:CGPointMake(correctedOrigin.x + bwidth + xoffset, correctedOrigin.y - bheight - yoffset)];
    [face2 addLineToPoint:CGPointMake(correctedOrigin.x + bwidth + xoffset, correctedOrigin.y - yoffset)];

    //darkest shade
    [[self tintOfColor:acolor tint:0.6] set];
    [face2 fill];

    //draw the other face , its another trapezoid
    UIBezierPath *face3 = [UIBezierPath bezierPath];
    [face3 moveToPoint:CGPointMake(correctedOrigin.x , correctedOrigin.y - bheight )];
    [face3 addLineToPoint:CGPointMake(correctedOrigin.x + xoffset, correctedOrigin.y - bheight - yoffset)];
    [face3 addLineToPoint:CGPointMake(correctedOrigin.x + bwidth + xoffset, correctedOrigin.y - bheight - yoffset)];
    [face3 addLineToPoint:CGPointMake(correctedOrigin.x + bwidth, correctedOrigin.y - bheight)];

    //base shade of colour       
    [[self tintOfColor:acolor tint:1.0] set];
    [face3 fill];


}

-(UIColor *)tintOfColor:(UIColor *)acolor tint:(CGFloat)tint
{

    //tint > 1.0 lightens
    //tint < 1.0 darkens

    CGFloat red = 1.0;
    CGFloat green = 1.0;
    CGFloat blue = 1.0;
    CGFloat alpha = 1.0;


    if ([acolor getRed:&red green:&green blue:&blue alpha:&alpha]) {

        red *= tint;
        green *= tint;
        blue *= tint;

        return [UIColor colorWithRed:red green:green blue:blue alpha:1.0];
    }

    return acolor; //in case the call failed , return original


}



- (void)drawRect:(CGRect)rect
{

     //as an example
[self drawBarOfHeight:50 width:20 colour:[UIColor orangeColor] atOrigin:CGPointMake(50,200)];
[self drawBarOfHeight:100 width:20 colour:[UIColor greenColor] atOrigin:CGPointMake(50+20,200)];
[self drawBarOfHeight:70 width:20 colour:[UIColor redColor] atOrigin:CGPointMake(50+20+20,200)];


}

与える...

すべてのベクトル描画は、その場所の周りに線と曲線を投げかけています。少し練習すれば、素晴らしいものを作ることができます。