PaintCode 绘图(一)

最新推荐文章于 2022-05-12 11:03:15 发布
最新推荐文章于 2022-05-12 11:03:15 发布
阅读量705 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lcg910978041/article/details/51750529
版权
简介: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];




清风飏
关注
专栏目录
使用paint动态画圆弧
12-17
使用paint方法画圆弧，以及逐步改变百分比，以及代码的详解
画图工具PaintCode的使用
XingXingRainLove的博客
06-08 2884
PaintCode 是一个专门为设计师准备的简单的矢量图形绘图应用程序，你可以通过在工具画图自动获取OC代码。 最新的PaintCode2已经可以实现控件的使用（APP Store中是收费的 还比较贵），只要你能将实现的界面画出来，就可以生成相应的代码，界面的UI布局编码从来都是最浪费时间的东西，PaintCode2可以直接生成代码，当然存在一些不成熟的地方，比如控件之间的相对位置处理，代码
2022年国内外好用的10大甘特图软件（团队使用）
柚橙论
05-12 2128
本篇文章将主要为大家介绍适合团队使用的10大甘特图软件：1、PingCode；2、Worktile；3、Microsoft Project；4、Asana；5、Jira；6、Excel；7、MindMaster；8、瀚文软件；9、VARCHART XGantt；10、dhtmlxGantt。
使用 VS Code绘图【画流程图】（是不是又酷了一点）
.
06-21 1万+
对于写博客、敲前端代码、查看文件等都在VScode上完成，这次又发现了一个宝藏插件，就是VS code支持绘图的一个插件，绘图也要转移到VS Code了，一点点的探索VS Code插件库的强大！
plot_code.rar
12-25
该系统：电子考试管理平台，实现了对语文、物理、计算机、英语等不同科目的模拟练习、在线课堂考试、考试成绩查询、题库管理、以及用户信息管理等功能。         系统整体设计使用MongoDB来存储不同科目的考试题库数据，考试成绩、以及用户信息。对题库中包含的图片、视频、音频等文件特别是大尺寸文件，交由GridFS来进行管理。 ———————————————— 版权声明：本文为CSDN博主「depty_kiyo」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/u011275054/article/details/85849778
PaintCode 3.5.4 专业矢量图形绘图工具
06-05
PaintCode 是一个专门为设计师准备的简单的矢量图形绘图应用程序，通过PaintCode没有编程经验的设计师也能立即画出美丽的控件，图标或其他UI界面元素并直接生成适用于iOS或者OS X的Objective-C代码。 它能节省你...
PaintCode IOS绘图代码生成器
06-02
PaintCode 绘图代码生成器 已经破解 无需验证
PaintCode 破解版
05-29
PaintCode 绘图代码生成器 破解版
PaintCodeDemo:展示如何使用 PaintCode 创建自定义控件的示例 Xamarin.iOS 项目
06-04
5. **重写绘制方法**: 如果 PaintCode 生成的代码没有覆盖 `DrawRect` 方法，你需要在你的视图类中实现这个方法，调用生成的绘图代码。 6. **使用自定义视图**: 在你的应用界面布局中，使用这个自定义视图替换标准的...
Mac软件分享 Paintcode 破解版 Version 2.4 (24007)
12-30
PaintCode for mac，可以设计一个有吸引力的，与分辨率无关的用户界面是很难的，特别是如果你必须编程绘图代码。 PaintCode是一个简单的矢量绘图应用程序，瞬间生成与分辨率无关的Objective-C和C＃/ Xamarin.iOS绘制...
DrawTools绘图程序代码分析
gc_2299的博客
11-12 4570
在网上下载了一些使用GDI+绘图的原码来学习，一开始先找了个代码少的、逻辑比较简单的项目——DrawTools。该项目用于展示如何使用C#的GDI+来绘制简单的图形。代码从https://github.com/tolbkni/DrawTools中下载的，我看的是其中的Winform版本的实现代码，该程序代码量有两千行左右，主要实现的功能有：绘制线条绘制矩形绘制椭圆绘制自由曲线各种绘图对象的移动操作
python科学计算学习二：matplotlib绘图（极坐标 3D绘图等）（3）
热门推荐
ikerpeng
03-05 6万+
matplotlib做图
R plot code
chenjiajia2017的博客
03-21 3414
#################### # Pie chart library(ggplot2) data<-read.csv("test.csv", header = T) data$Group <- factor(data$Group, levels=data$Group) # 把group一列转化为因子型，并确定因子的顺序 mylabel<-paste(data[,2]...
C++ 调用Matlab画图
Expressing Youself Using Code
05-01 9313
劳动节闲来无事，写了一天程序，just for fun.看，这是C++调用Matlab画图的一段程序。暂时不想多解释了，有兴趣的话，看看下面的代码吧。#include <iostream> #include <vector> #include <string> #include <algorithm> #include <cmath> #include <ctime> using namespace
python图表绘制 | seaborn入门（一）：distplot与kdeplot
qq_42600434的博客
08-13 5955
Seaborn介绍 官方链接：Seaborn: statistical data visualization Seaborn是一种基于matplotlib的图形可视化python libraty。它提供了一种高度交互式界面，便于用户能够做出各种有吸引力的统计图表。 Seaborn其实是在matplotlib的基础上进行了更高级的API封装，从而使得作图更加容易，在大多数情况下使用seabor...
VS Code 的 python 扩展发布，绘图功能更强大
寒冰屋的专栏
06-27 1万+
Visual Studio Code 的 python扩展已发布，可以从Marketplace下载Python扩展，或直接从 Visual Studio Code 中的扩展库安装。如果已经安装了Python 扩展，还可以通过重新启动 Visual Studio Code 获得最新的更新。 在这个版本中，带来了一些特性，主要包括 Python 交互式窗口的绘图查看器、带有 pytest 的并行...
[code] plotly table
sinat_20928625的博客
05-07 655
import plotly.plotly as py import plotly.figure_factory as ff data_matrix = [['Country', 'Year', 'Population'], ['United States', 2000, 282200000], ['Canada', 2000, 277...
windows下vscode环境c++利用matplotlibcpp绘图
weixin_43769166的博客
06-30 4196
1. 下载matplotlibcpp lava/matplotlib-cpp: Extremely simple yet powerful header-only C++ plotting library built on the popular matplotlib (github.com) 2. matplotlibcpp测试代码 #include "matplotlibcpp.h" namespace plt = matplotlibcpp; int main() { plt::plo
【源码】plot/plotyy的增强函数plt
weixin_42825609的博客
06-25 317
— plt version 19Jun21 — Matlab users may be interested in this toolbox for its focus in one or more of these three areas: A plotting interface. An alternative to Matlab’s plot and plotyy. a. Like plot, plt commands can be typed at the command prompt. F.
python绘图只有一条线
最新发布
09-13
对于Python绘图只出现一条线的情况，可能有多种原因。下面是一些常见的问题和解决方法： 1. 检查绘图库的引入： - 确保已经正确导入绘图库，例如matplotlib、seaborn等。 - 例如使用matplotlib库进行绘图时，可以...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值