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


}

给...

所有的矢量图都是围绕这个地方的线条和曲线。在其中进行一些练习，您可以创建一些很棒的东西。