PaintCode 绘图(一)

简介:paintCode 是一个简单的矢量绘图编程软件,它能节省你大量的编程时间,因为你只要把程序给画出来,然后把剩下的都交给PaintCode 2吧,即刻就能生成OS X和iOS的代码。 
你不必再为了打到预期的效果再一遍又一遍的调整和重新编译代码了。 
哪怕你是一个没有编程经验的平面设计师,有了PaintCode 2,照样可以画出漂亮的控件,图标和其他用户界面元素。 
PaintCode for mac是开发人员和美工设计师之间的桥梁,PaintCode是一个矢量绘图应用程序立即生成objective - C,迅速或c#代码。 

有了PaintCode您可以创建一个应用程序,是真正的分辨率无关,使用代码(而不是大量的图像资产)吸引用户界面。 

运行结果:


下面是使用paintCode 生成的代码

 PaintCode Trial Version
 www.paintcodeapp.com

 General Declarations
CGContextRef context = UIGraphicsGetCurrentContext();

 Color Declarations
//oval2的阴影色
UIColor* shadow2Color = [UIColor colorWithRed: 0.421 green: 0.045 blue: 0.514 alpha: 0.71];

 Shadow Declarations
UIColor* shadow2 = shadow2Color;
CGSize shadow2Offset = CGSizeMake(3.1, 3.1);//阴影色偏移
CGFloat shadow2BlurRadius = 5;//阴影色圆角

 Oval 2 Drawing
UIBezierPath* oval2Path = UIBezierPath.bezierPath;
[oval2Path moveToPoint: CGPointMake(105.65, 43.5)];
[oval2Path addCurveToPoint: CGPointMake(55.59, 56.97) controlPoint1: CGPointMake(87.51, 43.64) controlPoint2: CGPointMake(69.43, 48.13)];//增加控制点
[oval2Path addCurveToPoint: CGPointMake(35.44, 96.92) controlPoint1: CGPointMake(38.57, 67.85) controlPoint2: CGPointMake(31.85, 82.81)];//增加控制点
oval2Path.lineCapStyle = kCGLineCapRound;//连接点的样式

CGContextSaveGState(context);
CGContextSetShadowWithColor(context, shadow2Offset, shadow2BlurRadius, [shadow2 CGColor]);//添加阴影色
[UIColor.grayColor setStroke];//线的填充色
oval2Path.lineWidth = 9;//线宽
CGFloat oval2Pattern[] = {20, 2};
[oval2Path setLineDash: oval2Pattern count: 2 phase: 0];//虚线模式
[oval2Path stroke];
CGContextRestoreGState(context);


 Bezier 2 Drawing
UIBezierPath* bezier2Path = UIBezierPath.bezierPath;
[bezier2Path moveToPoint: CGPointMake(166.1, 48.28)];
[bezier2Path addCurveToPoint: CGPointMake(166.1, 131.72) controlPoint1: CGPointMake(199.3, 71.32) controlPoint2: CGPointMake(199.3, 108.68)];
[bezier2Path addCurveToPoint: CGPointMake(89.68, 147.91) controlPoint1: CGPointMake(145.34, 146.13) controlPoint2: CGPointMake(116.5, 151.53)];
[bezier2Path addCurveToPoint: CGPointMake(43.5, 169.5) controlPoint1: CGPointMake(71.56, 159.66) controlPoint2: CGPointMake(43.5, 169.5)];
[bezier2Path addCurveToPoint: CGPointMake(58.33, 138.86) controlPoint1: CGPointMake(43.5, 169.5) controlPoint2: CGPointMake(53.16, 153.11)];
[bezier2Path addCurveToPoint: CGPointMake(45.9, 131.72) controlPoint1: CGPointMake(53.95, 136.8) controlPoint2: CGPointMake(49.78, 134.42)];
[bezier2Path addCurveToPoint: CGPointMake(45.9, 48.28) controlPoint1: CGPointMake(12.7, 108.68) controlPoint2: CGPointMake(12.7, 71.32)];
[bezier2Path addCurveToPoint: CGPointMake(166.1, 48.28) controlPoint1: CGPointMake(79.09, 25.24) controlPoint2: CGPointMake(132.91, 25.24)];
[bezier2Path closePath];//闭合贝塞尔曲线
bezier2Path.lineCapStyle = kCGLineCapRound;

[UIColor.redColor setStroke];
bezier2Path.lineWidth = 9;
[bezier2Path stroke];


下面探究 bezier2的连接点样式

bezier2Path.lineCapStyle = kCGLineCapRound;

bezier2Path.lineJoinStyle = kCGLineJoinRound;



bezier2Path.lineCapStyle = kCGLineCapRound;

bezier2Path.lineJoinStyle = kCGLineJoinBevel;

通过改变lineCapStyle和lineJoinStyle和可以细微改变连接点样式和顶点的样式


下面是给bezier2曲线增加渐变色 gradientColor


//声明一个色彩空间
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
取得当前画布
CGContextRef context = UIGraphicsGetCurrentContext();


 Gradient Declarations
CGFloat gradientLocations[] = {0, 1};
CGGradientRef gradient = CGGradientCreateWithColors(colorSpace, (__bridge CFArrayRef)@[(id)UIColor.greenColor.CGColor, (id)UIColor.whiteColor.CGColor], gradientLocations);

CGContextSaveGState(context);
[bezier2Path addClip];
CGContextDrawLinearGradient(context, gradient, CGPointMake(35, 161), CGPointMake(157.74, 38.26), 0);
CGContextRestoreGState(context);  //通过改变 //<span style="font-family: Arial, Helvetica, sans-serif;">CGPointMake(35, 161), CGPointMake(157.74, 38.26)来线性的改变渐变色,</span>


 Cleanup //释放
CGGradientRelease(gradient);
CGColorSpaceRelease(colorSpace);


还有一种方式

CGContextDrawRadialGradient(context, gradient,
    CGPointMake(106, 100.25), 10,
    CGPointMake(101, 105.25), 30,
    kCGGradientDrawsBeforeStartLocation | kCGGradientDrawsAfterEndLocation);
CGContextRestoreGState(context);



可以通过改变两个中心点的距离

改变渐变色的样式

CGContextSaveGState(context);
[bezier2Path addClip];
CGContextDrawRadialGradient(context, gradient,
    CGPointMake(150.78, 80.89), 10,
    CGPointMake(101, 105.25), 30,
    kCGGradientDrawsBeforeStartLocation | kCGGradientDrawsAfterEndLocation);
CGContextRestoreGState(context);


最后通过两个点控制渐变色的样式

CGContextSaveGState(context);
[bezier2Path addClip];
CGContextDrawLinearGradient(context, gradient,
    CGPointMake(84.16, 113.72),
    CGPointMake(140.56, 87.74),
    kCGGradientDrawsBeforeStartLocation | kCGGradientDrawsAfterEndLocation);
CGContextRestoreGState(context);

运行结果如下'



下面综合利用以上特点绘制一个纸飞机

CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
CGContextRef context = UIGraphicsGetCurrentContext();

 Color Declarations
UIColor* iconColor = [UIColor colorWithRed: 0.219 green: 0.445 blue: 0.65 alpha: 1];
CGFloat iconColorRGBA[4];
[iconColor getRed: &iconColorRGBA[0] green: &iconColorRGBA[1] blue: &iconColorRGBA[2] alpha: &iconColorRGBA[3]];

UIColor* topColor = [UIColor colorWithRed: (iconColorRGBA[0] * 0.6) green: (iconColorRGBA[1] * 0.6) blue: (iconColorRGBA[2] * 0.6) alpha: (iconColorRGBA[3] * 0.6 + 0.4)];
UIColor* bottomColor = [UIColor colorWithRed: (iconColorRGBA[0] * 0.4 + 0.6) green: (iconColorRGBA[1] * 0.4 + 0.6) blue: (iconColorRGBA[2] * 0.4 + 0.6) alpha: (iconColorRGBA[3] * 0.4 + 0.6)];
UIColor* iconStrokeColor = [UIColor colorWithRed: (iconColorRGBA[0] * 0.2 + 0.8) green: (iconColorRGBA[1] * 0.2 + 0.8) blue: (iconColorRGBA[2] * 0.2 + 0.8) alpha: (iconColorRGBA[3] * 0.2 + 0.8)];
UIColor* backgroundStrokeColor = [UIColor colorWithRed: (iconColorRGBA[0] * 0.5) green: (iconColorRGBA[1] * 0.5) blue: (iconColorRGBA[2] * 0.5) alpha: (iconColorRGBA[3] * 0.5 + 0.5)];

 Gradient Declarations
CGFloat gradientLocations[] = {0, 1};
CGGradientRef gradient = CGGradientCreateWithColors(colorSpace, (__bridge CFArrayRef)@[(id)bottomColor.CGColor, (id)topColor.CGColor], gradientLocations);

 Background Oval Drawing
UIBezierPath* backgroundOvalPath = [UIBezierPath bezierPathWithOvalInRect: CGRectMake(18, 18, 264, 264)];
CGContextSaveGState(context);
[backgroundOvalPath addClip];
CGContextDrawLinearGradient(context, gradient, CGPointMake(150, 18), CGPointMake(150, 282), 0);
CGContextRestoreGState(context);
[backgroundStrokeColor setStroke];
backgroundOvalPath.lineWidth = 6;
[backgroundOvalPath stroke];


 Plane Outline Drawing
UIBezierPath* planeOutlinePath = UIBezierPath.bezierPath;
[planeOutlinePath moveToPoint: CGPointMake(65, 171.84)];
[planeOutlinePath addLineToPoint: CGPointMake(107.02, 189.62)];
[planeOutlinePath addLineToPoint: CGPointMake(125.46, 223)];
[planeOutlinePath addLineToPoint: CGPointMake(133.79, 200.94)];
[planeOutlinePath addLineToPoint: CGPointMake(185.92, 223)];
[planeOutlinePath addLineToPoint: CGPointMake(209.17, 78.83)];
[planeOutlinePath addLineToPoint: CGPointMake(65, 171.84)];
[planeOutlinePath closePath];
[iconStrokeColor setStroke];
planeOutlinePath.lineWidth = 9;
[planeOutlinePath stroke];


 Plane Lines Drawing
UIBezierPath* planeLinesPath = UIBezierPath.bezierPath;
[planeLinesPath moveToPoint: CGPointMake(106.86, 190.44)];
[planeLinesPath addLineToPoint: CGPointMake(211.5, 76.5)];
[planeLinesPath addLineToPoint: CGPointMake(133.71, 195.23)];
planeLinesPath.lineCapStyle = kCGLineCapSquare;

[iconStrokeColor setStroke];
planeLinesPath.lineWidth = 4;
[planeLinesPath stroke];


 Cleanup
CGGradientRelease(gradient);
CGColorSpaceRelease(colorSpace);

运行结果



绘制圆,矩形文本

- (void)drawCanvas1WithWidth: (CGFloat)width position: (CGFloat)position text: (NSString*)text
{

     Variable Declarations
    CGFloat expression = 2 * width;
    CGFloat bounce = sin(position * 5 * M_PI/180) * 10 + 15;

     Rectangle Drawing
    CGRect rectangleRect = CGRectMake(36, 50, width, 47);
    UIBezierPath* rectanglePath = [UIBezierPath bezierPathWithRect: rectangleRect];
    [UIColor.grayColor setFill];
    [rectanglePath fill];
    NSMutableParagraphStyle* rectangleStyle = NSMutableParagraphStyle.defaultParagraphStyle.mutableCopy;
    rectangleStyle.alignment = NSTextAlignmentCenter;

    NSDictionary* rectangleFontAttributes = @{NSFontAttributeName: [UIFont fontWithName: @"Helvetica" size: 12], NSForegroundColorAttributeName: UIColor.blackColor, NSParagraphStyleAttributeName: rectangleStyle};

    [text drawInRect: rectangleRect withAttributes: rectangleFontAttributes];


     Rectangle 2 Drawing
    UIBezierPath* rectangle2Path = [UIBezierPath bezierPathWithRect: CGRectMake(36, 116, expression, 53)];
    [UIColor.grayColor setFill];
    [rectangle2Path fill];


     Oval Drawing
    UIBezierPath* ovalPath = [UIBezierPath bezierPathWithOvalInRect: CGRectMake(position, bounce, 16, 16)];
    [UIColor.grayColor setFill];
    [ovalPath fill];
}

运行结果


绘制文本

CGContextRef context = UIGraphicsGetCurrentContext();

 Text 2 Drawing
CGRect text2Rect = CGRectMake(19, 3, 108, 21);
{
    NSString* textContent = @"Hello, World!";
    NSMutableParagraphStyle* text2Style = NSMutableParagraphStyle.defaultParagraphStyle.mutableCopy;
    text2Style.alignment = NSTextAlignmentLeft;

    NSDictionary* text2FontAttributes = @{NSFontAttributeName: [UIFont systemFontOfSize: UIFont.labelFontSize], NSForegroundColorAttributeName: UIColor.blackColor, NSParagraphStyleAttributeName: text2Style};

    CGFloat text2TextHeight = [textContent boundingRectWithSize: CGSizeMake(text2Rect.size.width, INFINITY)  options: NSStringDrawingUsesLineFragmentOrigin attributes: text2FontAttributes context: nil].size.height;
    CGContextSaveGState(context);
    CGContextClipToRect(context, text2Rect);
    [textContent drawInRect: CGRectMake(CGRectGetMinX(text2Rect), CGRectGetMinY(text2Rect) + (CGRectGetHeight(text2Rect) - text2TextHeight) / 2, CGRectGetWidth(text2Rect), text2TextHeight) withAttributes: text2FontAttributes];
    CGContextRestoreGState(context);
}

运行结果


将字体旋转,改变字体颜色,本景色,和边框

CGContextRef context = UIGraphicsGetCurrentContext();

 Text 2 Drawing
CGContextSaveGState(context);
CGContextTranslateCTM(context, 23, 68.9);
CGContextRotateCTM(context, -45 * M_PI / 180);

CGRect text2Rect = CGRectMake(0, 0, 108, 21);
UIBezierPath* text2Path = [UIBezierPath bezierPathWithRect: text2Rect];
[UIColor.redColor setFill];
[text2Path fill];
[UIColor.blackColor setStroke];
text2Path.lineWidth = 5.5;
[text2Path stroke];
NSMutableParagraphStyle* text2Style = NSMutableParagraphStyle.defaultParagraphStyle.mutableCopy;
text2Style.alignment = NSTextAlignmentLeft;

NSDictionary* text2FontAttributes = @{NSFontAttributeName: [UIFont systemFontOfSize: UIFont.buttonFontSize], NSForegroundColorAttributeName: UIColor.greenColor, NSParagraphStyleAttributeName: text2Style};

[@"Hello, World!" drawInRect: text2Rect withAttributes: text2FontAttributes];

CGContextRestoreGState(context);

运行结果


绘制五角星,加边框,加阴影

CGContextRef context = UIGraphicsGetCurrentContext();

 Color Declarations
UIColor* shadowColor2 = [UIColor colorWithRed: 0.591 green: 0.07 blue: 0.07 alpha: 1];

 Shadow Declarations
UIColor* shadow = shadowColor2;
CGSize shadowOffset = CGSizeMake(3.1, 3.1);
CGFloat shadowBlurRadius = 5;

 Star Drawing
UIBezierPath* starPath = UIBezierPath.bezierPath;
[starPath moveToPoint: CGPointMake(60, 3)];
[starPath addLineToPoint: CGPointMake(68.82, 15.86)];
[starPath addLineToPoint: CGPointMake(83.78, 20.27)];
[starPath addLineToPoint: CGPointMake(74.27, 32.64)];
[starPath addLineToPoint: CGPointMake(74.69, 48.23)];
[starPath addLineToPoint: CGPointMake(60, 43)];
[starPath addLineToPoint: CGPointMake(45.31, 48.23)];
[starPath addLineToPoint: CGPointMake(45.73, 32.64)];
[starPath addLineToPoint: CGPointMake(36.22, 20.27)];
[starPath addLineToPoint: CGPointMake(51.18, 15.86)];
[starPath closePath];
CGContextSaveGState(context);
CGContextSetShadowWithColor(context, shadowOffset, shadowBlurRadius, [shadow CGColor]);
[UIColor.grayColor setFill];
[starPath fill];
CGContextRestoreGState(context);

[UIColor.blueColor setStroke];
starPath.lineWidth = 3.5;
[starPath stroke];




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值