iOS贝塞尔曲线画哆啦A梦的代码实例

2024-10-19 16:38:16

看到这张图，是不是觉得挺萌的，那是如何实现的呢？在iOS中有一个类叫UIBezierPath（贝塞尔曲线），这两天研究了一下UIBezierPath和CAShapeLayer，根据别人分享的教程，画了这个萌萌的哆啦A梦。

UIBezierPath： UIBezierPath是在 UIKit 中的一个类，继承于NSObject,可以创建基于矢量的路径.此类是Core Graphics框架关于path的一个OC封装。使用此类可以定义常见的圆形、多边形等形状。我们使用直线、弧（arc）来创建复杂的曲线形状。每一个直线段或者曲线段的结束的地方是下一个的开始的地方。每一个连接的直线或者曲线段的集合成为subpath。一个UIBezierPath对象定义一个完整的路径包括一个或者多个subpaths。

CAShapeLayer：继承于CALayer。每个CAShapeLayer对象都代表着将要被渲染到屏幕上的一个任意的形状(shape)。具体的形状由其path(类型为CGPathRef)属性指定。普通的CALayer是矩形，所以需要frame属性。CAShapeLayer它本身没有形状，它的形状来源于其属性path 。CAShapeLayer有不同于CALayer的属性，它从CALayer继承而来的属性在绘制时是不起作用的。

基本用法：

画圆弧： + (instancetype)bezierPathWithArcCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise;

center表示圆心
radius表示半径
startAngle表示开始角度
endAngle表示结束角度
clockwise表示是否是顺时针方向

画二元曲线和三元曲线，一般和moveToPoint配合使用。

二元曲线：- (void)addQuadCurveToPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint
三元曲线：- (void)addCurveToPoint:(CGPoint)endPoint controlPoint1:(CGPoint)controlPoint1 controlPoint2:(CGPoint)controlPoint2

其中 endPoint表示:曲线的终点；controlPoint表示:画曲线的基准点

知道基本画法后我们就可以画哆啦A梦了。

1、先画头部。先画一个圆。

//  确定头部所在的圆心
  CGFloat headCornerRadius=80;
  CGFloat arcCenterX=self.view.frame.size.width/2;
  CGFloat arcCenterY= 120+headCornerRadius;

  //画头部
  CAShapeLayer *headLayer=[[CAShapeLayer alloc] init];
  UIBezierPath *headPath=[UIBezierPath bezierPathWithRoundedRect:CGRectMake(self.view.frame.size.width/2-headCornerRadius, 120, headCornerRadius*2, headCornerRadius*2) cornerRadius:headCornerRadius];
  [self setLayer:headLayer path:headPath];

2、画脸部。画一个比头部小点的圆，与头部圆的底部内切。

 //脸
  CAShapeLayer *faceLayer=[CAShapeLayer layer];
  UIBezierPath *facePath=[UIBezierPath bezierPathWithArcCenter:CGPointMake(self.view.frame.size.width/2, 120+headCornerRadius+10) radius:70 startAngle:M_PI endAngle:3*M_PI clockwise:YES];
  [self setLayer:faceLayer path:facePath];

3、画眼部

  //左眼
  CAShapeLayer *leftEyeLayer = [CAShapeLayer layer];
  UIBezierPath *leftEyePath = [UIBezierPath bezierPath];
  [leftEyePath moveToPoint:CGPointMake(arcCenterX-30, arcCenterY-25)];
  [leftEyePath addQuadCurveToPoint:CGPointMake(arcCenterX-15, arcCenterY-45) controlPoint:CGPointMake(arcCenterX-30, arcCenterY-45)];
  [leftEyePath addQuadCurveToPoint:CGPointMake(arcCenterX, arcCenterY-25) controlPoint:CGPointMake(arcCenterX, arcCenterY-45)];
  [leftEyePath addQuadCurveToPoint:CGPointMake(arcCenterX-15, arcCenterY-5) controlPoint:CGPointMake(arcCenterX, arcCenterY-5)];
  [leftEyePath addQuadCurveToPoint:CGPointMake(arcCenterX-30, arcCenterY-25) controlPoint:CGPointMake(arcCenterX-30, arcCenterY-5)];
  [self setLayer:leftEyeLayer path:leftEyePath];

  //左眼珠
  CAShapeLayer *leftEyeballLayer = [CAShapeLayer layer];
  UIBezierPath *leftEyeballPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(arcCenterX-5, arcCenterY-30) radius:2.5 startAngle:0 endAngle:2*M_PI clockwise:YES];
  [self setLayer:leftEyeballLayer path:leftEyeballPath ];

  //右眼
  CAShapeLayer *rightEyeLayer = [CAShapeLayer layer];
  UIBezierPath *rightEyePath = [UIBezierPath bezierPath];
  [rightEyePath moveToPoint:CGPointMake(arcCenterX, arcCenterY-25)];
  [rightEyePath addQuadCurveToPoint:CGPointMake(arcCenterX+15, arcCenterY-45) controlPoint:CGPointMake(arcCenterX, arcCenterY-45)];
  [rightEyePath addQuadCurveToPoint:CGPointMake(arcCenterX+30, arcCenterY-25) controlPoint:CGPointMake(arcCenterX+30, arcCenterY-45)];
  [rightEyePath addQuadCurveToPoint:CGPointMake(arcCenterX+15, arcCenterY-5) controlPoint:CGPointMake(arcCenterX+30, arcCenterY-5)];
  [rightEyePath addQuadCurveToPoint:CGPointMake(arcCenterX, arcCenterY-25) controlPoint:CGPointMake(arcCenterX, arcCenterY-5)];
  [self setLayer:rightEyeLayer path:rightEyePath ];

  //右眼珠
  CAShapeLayer *rightEyeballLayer = [CAShapeLayer layer];
  UIBezierPath *rightEyeballPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(arcCenterX+5, arcCenterY-30) radius:2.5 startAngle:0 endAngle:2*M_PI clockwise:YES];
  [self setLayer:rightEyeballLayer path:rightEyeballPath];

4、画鼻子、嘴巴、胡须

  //鼻子
  CAShapeLayer *noseLayer = [CAShapeLayer layer];
  UIBezierPath *nosePath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(arcCenterX, arcCenterY) radius:10 startAngle:0 endAngle:2*M_PI clockwise:YES];
  [self setLayer:noseLayer path:nosePath ];

  //鼻子光晕
  CAShapeLayer *noseHaloLayer = [CAShapeLayer layer];
  UIBezierPath *noseHaloPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(arcCenterX-4, arcCenterY-5) radius:2.5 startAngle:0 endAngle:2*M_PI clockwise:YES];
  [self setLayer:noseHaloLayer path:noseHaloPath ];

  //嘴巴
  CAShapeLayer *mouthLayer = [CAShapeLayer layer];
  UIBezierPath *mouthPath = [UIBezierPath bezierPath];
  [mouthPath moveToPoint:CGPointMake(arcCenterX-60, arcCenterY+25)];
  [mouthPath addQuadCurveToPoint:CGPointMake(arcCenterX+60, arcCenterY+25) controlPoint:CGPointMake(arcCenterX, arcCenterY+90)];
  [self setLayer:mouthLayer path:mouthPath];

  CAShapeLayer *mouthLayer1 = [CAShapeLayer layer];
  UIBezierPath *mouthPath1 = [UIBezierPath bezierPath];
  [mouthPath1 moveToPoint:CGPointMake(arcCenterX, arcCenterY+10)];
  [mouthPath1 addLineToPoint:CGPointMake(arcCenterX, arcCenterY+55)];
  [self setLayer:mouthLayer1 path:mouthPath1];

  //胡须
  [self addBeardFromPoint:CGPointMake(arcCenterX-58, arcCenterY-5) toPoint:CGPointMake(arcCenterX-15, arcCenterY+10) ];
  [self addBeardFromPoint:CGPointMake(arcCenterX-68, arcCenterY+15) toPoint:CGPointMake(arcCenterX-15, arcCenterY+20) ];
  [self addBeardFromPoint:CGPointMake(arcCenterX-61, arcCenterY+45) toPoint:CGPointMake(arcCenterX-15, arcCenterY+30) ];
  [self addBeardFromPoint:CGPointMake(arcCenterX+58, arcCenterY-5) toPoint:CGPointMake(arcCenterX+15, arcCenterY+10) ];
  [self addBeardFromPoint:CGPointMake(arcCenterX+68, arcCenterY+15) toPoint:CGPointMake(arcCenterX+15, arcCenterY+20) ];
  [self addBeardFromPoint:CGPointMake(arcCenterX+61, arcCenterY+45) toPoint:CGPointMake(arcCenterX+15, arcCenterY+30) ];

5、画左手部分

 //左手
  CAShapeLayer *leftHandLayer = [CAShapeLayer layer];
  UIBezierPath *leftHandPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(arcCenterX-95, arcCenterY+110) radius:20 startAngle:0 endAngle:2*M_PI clockwise:YES];
  [self setLayer:leftHandLayer path:leftHandPath ];

  //左胳膊
  CGFloat distanceXToArcCenter = 80*cos(M_PI_2*4/9);
  CGFloat distanceYToArcCenter = 80*sin(M_PI_2*4/9);
  CAShapeLayer *leftArmLayer = [CAShapeLayer layer];
  UIBezierPath *leftArmPath = [UIBezierPath bezierPath];
  [leftArmPath moveToPoint:CGPointMake(arcCenterX-distanceXToArcCenter, arcCenterY+distanceYToArcCenter)];
  [leftArmPath addLineToPoint:CGPointMake(arcCenterX-95, arcCenterY+90)];
  [leftArmPath addQuadCurveToPoint:CGPointMake(arcCenterX-75, arcCenterY+110) controlPoint:CGPointMake(arcCenterX-92, arcCenterY+107)];
  [leftArmPath addLineToPoint:CGPointMake(arcCenterX-distanceXToArcCenter+1.5, arcCenterY+95)];
  [self setLayer:leftArmLayer path:leftArmPath ];

6、画身体部分

//围巾
  CAShapeLayer *mufflerLayer = [CAShapeLayer layer];
  UIBezierPath *mufflerPath = [UIBezierPath bezierPath];
  [mufflerPath moveToPoint:CGPointMake(arcCenterX-distanceXToArcCenter, arcCenterY+distanceYToArcCenter)];
  [mufflerPath addQuadCurveToPoint:CGPointMake(arcCenterX+distanceXToArcCenter, arcCenterY+distanceYToArcCenter) controlPoint:CGPointMake(arcCenterX, arcCenterY+109)];
  [mufflerPath addLineToPoint:CGPointMake(arcCenterX+distanceXToArcCenter+2, arcCenterY+distanceYToArcCenter+7)];
  [mufflerPath addQuadCurveToPoint:CGPointMake(arcCenterX-distanceXToArcCenter-4, arcCenterY+distanceYToArcCenter+5) controlPoint:CGPointMake(arcCenterX, arcCenterY+115)];
  [mufflerPath addLineToPoint:CGPointMake(arcCenterX-distanceXToArcCenter, arcCenterY+distanceYToArcCenter)];
  [self setLayer:mufflerLayer path:mufflerPath ];

  //身体
  CAShapeLayer *bodyLayer = [CAShapeLayer layer];
  UIBezierPath *bodyPath = [UIBezierPath bezierPath];
  [bodyPath moveToPoint:CGPointMake(arcCenterX-distanceXToArcCenter, arcCenterY+distanceYToArcCenter+7)];
  [bodyPath addQuadCurveToPoint:CGPointMake(arcCenterX-distanceXToArcCenter+5, arcCenterY+150) controlPoint:CGPointMake(arcCenterX-distanceXToArcCenter+2, arcCenterY+140)];
  [bodyPath addQuadCurveToPoint:CGPointMake(arcCenterX-distanceXToArcCenter+3, arcCenterY+170) controlPoint:CGPointMake(arcCenterX-distanceXToArcCenter, arcCenterY+160)];
  [bodyPath addQuadCurveToPoint:CGPointMake(arcCenterX-8, arcCenterY+170) controlPoint:CGPointMake(arcCenterX-(distanceXToArcCenter+5)/2, arcCenterY+175)];
  [bodyPath addQuadCurveToPoint:CGPointMake(arcCenterX+8, arcCenterY+170) controlPoint:CGPointMake(arcCenterX, arcCenterY+155)];
  [bodyPath addQuadCurveToPoint:CGPointMake(arcCenterX+distanceXToArcCenter-3, arcCenterY+170) controlPoint:CGPointMake(arcCenterX+(distanceXToArcCenter+5)/2, arcCenterY+175)];
  [bodyPath addQuadCurveToPoint:CGPointMake(arcCenterX+distanceXToArcCenter-5, arcCenterY+150) controlPoint:CGPointMake(arcCenterX+distanceXToArcCenter-2, arcCenterY+160)];
  [bodyPath addQuadCurveToPoint:CGPointMake(arcCenterX+distanceXToArcCenter, arcCenterY+distanceYToArcCenter+8) controlPoint:CGPointMake(arcCenterX+distanceXToArcCenter-2, arcCenterY+140)];
  [bodyPath addQuadCurveToPoint:CGPointMake(arcCenterX-distanceXToArcCenter, arcCenterY+distanceYToArcCenter+7) controlPoint:CGPointMake(arcCenterX, arcCenterY+115)];
  [self setLayer:bodyLayer path:bodyPath ];

  //左脚
  CAShapeLayer *leftFootLayer = [CAShapeLayer layer];
  UIBezierPath *leftFootPath = [UIBezierPath bezierPath];
  [leftFootPath moveToPoint:CGPointMake(arcCenterX-distanceXToArcCenter+3, arcCenterY+170)];
  [leftFootPath addQuadCurveToPoint:CGPointMake(arcCenterX-distanceXToArcCenter+3, arcCenterY+195) controlPoint:CGPointMake(arcCenterX-distanceXToArcCenter-20, arcCenterY+185)];
  [leftFootPath addQuadCurveToPoint:CGPointMake(arcCenterX-13, arcCenterY+195) controlPoint:CGPointMake(arcCenterX-(distanceXToArcCenter+10)/2, arcCenterY+200)];
  [leftFootPath addQuadCurveToPoint:CGPointMake(arcCenterX-10, arcCenterY+170) controlPoint:CGPointMake(arcCenterX+8, arcCenterY+187)];
  [self setLayer:leftFootLayer path:leftFootPath ];

  //右脚
  CAShapeLayer *rightFootLayer = [CAShapeLayer layer];
  UIBezierPath *rightFootPath = [UIBezierPath bezierPath];
  [rightFootPath moveToPoint:CGPointMake(arcCenterX+10, arcCenterY+170)];
  [rightFootPath addQuadCurveToPoint:CGPointMake(arcCenterX+15, arcCenterY+195) controlPoint:CGPointMake(arcCenterX-12, arcCenterY+185)];
  [rightFootPath addQuadCurveToPoint:CGPointMake(arcCenterX+distanceXToArcCenter-5, arcCenterY+195) controlPoint:CGPointMake(arcCenterX+(distanceXToArcCenter+20)/2, arcCenterY+200)];
  [rightFootPath addQuadCurveToPoint:CGPointMake(arcCenterX+distanceXToArcCenter-3, arcCenterY+170) controlPoint:CGPointMake(arcCenterX+distanceXToArcCenter+18, arcCenterY+185)];
  [self setLayer:rightFootLayer path:rightFootPath];

  //肚子
  CAShapeLayer *bellyLayer = [CAShapeLayer layer];
  UIBezierPath *bellyPath = [UIBezierPath bezierPath];
  [bellyPath moveToPoint:CGPointMake(arcCenterX-30, arcCenterY+80)];
  [bellyPath addCurveToPoint:CGPointMake(arcCenterX-30, arcCenterY+150) controlPoint1:CGPointMake(arcCenterX-65, arcCenterY+95) controlPoint2:CGPointMake(arcCenterX-60, arcCenterY+140)];
  [bellyPath addQuadCurveToPoint:CGPointMake(arcCenterX+30, arcCenterY+150) controlPoint:CGPointMake(arcCenterX, arcCenterY+160)];
  [bellyPath addCurveToPoint:CGPointMake(arcCenterX+30, arcCenterY+80) controlPoint1:CGPointMake(arcCenterX+60, arcCenterY+140) controlPoint2:CGPointMake(arcCenterX+65, arcCenterY+95)];
  [bellyPath addQuadCurveToPoint:CGPointMake(arcCenterX-30, arcCenterY+80) controlPoint:CGPointMake(arcCenterX, arcCenterY+92)];
  [self setLayer:bellyLayer path:bellyPath ];

  //铃铛
  CAShapeLayer *bellLayer = [CAShapeLayer layer];
  UIBezierPath *bellPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(arcCenterX, arcCenterY+97) radius:15 startAngle:0 endAngle:2*M_PI clockwise:YES];
  [self setLayer:bellLayer path:bellPath ];

  //铃铛上的线
  CAShapeLayer *bellLineLayer = [CAShapeLayer layer];
  UIBezierPath *BellLinePath = [UIBezierPath bezierPath];
  [BellLinePath moveToPoint:CGPointMake(arcCenterX-(sqrt(pow(15.0, 2)-pow(5.0, 2))), arcCenterY+92)];
  [BellLinePath addLineToPoint:CGPointMake(arcCenterX+(sqrt(pow(15.0, 2)-pow(5.0, 2))), arcCenterY+92)];
  [BellLinePath moveToPoint:CGPointMake(arcCenterX+(sqrt(pow(15.0, 2)-pow(2.0, 2))), arcCenterY+95)];
  [BellLinePath addLineToPoint:CGPointMake(arcCenterX-(sqrt(pow(15.0, 2)-pow(2.0, 2))), arcCenterY+95)];
  [self setLayer:bellLineLayer path:BellLinePath ];

  //铃铛上的小圆点
  CAShapeLayer *bellCirLayer = [CAShapeLayer layer];
  UIBezierPath *bellCirPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(arcCenterX, arcCenterY+102) radius:2.5 startAngle:0 endAngle:2*M_PI clockwise:YES];
  [bellCirPath moveToPoint:CGPointMake(arcCenterX, arcCenterY+104.5)];
  [bellCirPath addLineToPoint:CGPointMake(arcCenterX, arcCenterY+112)];
  [self setLayer:bellCirLayer path:bellCirPath ];

  //口袋
  CAShapeLayer *bagLayer = [CAShapeLayer layer];
  UIBezierPath *bagPath = [UIBezierPath bezierPath];
  [bagPath moveToPoint:CGPointMake(arcCenterX-40, arcCenterY+112)];
  [bagPath addQuadCurveToPoint:CGPointMake(arcCenterX+40, arcCenterY+112) controlPoint:CGPointMake(arcCenterX, arcCenterY+120)];
  [bagPath addCurveToPoint:CGPointMake(arcCenterX-40, arcCenterY+112) controlPoint1:CGPointMake(arcCenterX+28, arcCenterY+160) controlPoint2:CGPointMake(arcCenterX-28, arcCenterY+160)];
  [self setLayer:bagLayer path:bagPath ];

7、画右手部分

  //右手
  CAShapeLayer *rightHandLayer = [CAShapeLayer layer];
  UIBezierPath *rightHandPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(arcCenterX+85*cos(27/180.0*M_PI), arcCenterY-85*sin(27/180.0*M_PI)) radius:20 startAngle:0 endAngle:2*M_PI clockwise:YES];
  [self setLayer:rightHandLayer path:rightHandPath ];

  //右胳膊
  CAShapeLayer *rightArmLayer = [CAShapeLayer layer];
  UIBezierPath *rightArmPath = [UIBezierPath bezierPath];
  [rightArmPath moveToPoint:CGPointMake(arcCenterX+80*cos(13/180.0*M_PI), arcCenterY-80*sin(13/180.0*M_PI))];
  [rightArmPath addQuadCurveToPoint:CGPointMake(arcCenterX+distanceXToArcCenter, arcCenterY+distanceYToArcCenter) controlPoint:CGPointMake(arcCenterX+80*cos(13/180.0*M_PI)+9, arcCenterY+20)];
  [rightArmPath addLineToPoint:CGPointMake(arcCenterX+distanceXToArcCenter, arcCenterY+distanceYToArcCenter+25)];
  [rightArmPath addQuadCurveToPoint:CGPointMake(arcCenterX+93*cos(15/180.0*M_PI), arcCenterY-93*sin(15/180.0*M_PI)) controlPoint:CGPointMake(arcCenterX+90*cos(13/180.0*M_PI)+15, arcCenterY+25)];
  [rightArmPath addQuadCurveToPoint:CGPointMake(arcCenterX+80*cos(13/180.0*M_PI), arcCenterY-80*sin(13/180.0*M_PI)) controlPoint:CGPointMake(arcCenterX+80*cos(13/180.0*M_PI)+5, arcCenterY-93*sin(15/180.0*M_PI)+5)];
  [self setLayer:rightArmLayer path:rightArmPath];

  UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(self.view.frame.size.width/2+90, 120, 70, 30)];
  label.textAlignment = NSTextAlignmentCenter;
  label.textColor = [UIColor colorWithRed:21/255.0 green:159/255.0 blue:237/255.0 alpha:1];
  label.text = @"Hello";
  label.font = [UIFont fontWithName:@"Chalkduster" size:20];
  [self.view addSubview:label];

  CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
  animation.fromValue = @(0);
  animation.toValue = @(1);
  animation.duration = 0.5f;
  [label.layer addAnimation:animation forKey:nil];

8、给各个部位上颜色

 //上色
  faceLayer.fillColor = [UIColor whiteColor].CGColor;
  leftEyeLayer.fillColor = [UIColor whiteColor].CGColor;
  rightEyeLayer.fillColor = [UIColor whiteColor].CGColor;
  leftEyeBallLayer.fillColor = [UIColor blackColor].CGColor;
  rightEyeBallLayer.fillColor = [UIColor blackColor].CGColor;
  noseLayer.fillColor = [UIColor redColor].CGColor;
  noseHaloLayer.fillColor = [UIColor whiteColor].CGColor;
  headLayer.fillColor = [UIColor colorWithRed:21/255.0 green:159/255.0 blue:237/255.0 alpha:1].CGColor;
  leftArmLayer.fillColor = [UIColor colorWithRed:21/255.0 green:159/255.0 blue:237/255.0 alpha:1].CGColor;
  leftHandLayer.fillColor = [UIColor whiteColor].CGColor;
  mufflerLayer.fillColor = [UIColor redColor].CGColor;
  bellyLayer.fillColor = [UIColor whiteColor].CGColor;
  bellLayer.fillColor = [UIColor yellowColor].CGColor;
  bodyLayer.fillColor = [UIColor colorWithRed:21/255.0 green:159/255.0 blue:237/255.0 alpha:1].CGColor;
  rightHandLayer .fillColor=[UIColor whiteColor].CGColor ;
  rightArmLayer .fillColor=[UIColor colorWithRed:21/255.0 green:159/255.0 blue:237/255.0 alpha:1] .CGColor;

这样，一个简单的哆啦A梦就实现了。

文中只展示了重要部分的代码，如果有需要，可以看完整的demo，同时demo里面也展示了UIBezierPath和CAShapeLayer基本的画图方法。

demo地址

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

IOS 贝塞尔曲线（UIBezierPath）属性、方法整理

IOS 贝塞尔曲线详解开发IOS的朋友都知道IOS 贝塞尔曲线的重要性,由于经常会用到这样的东西,索性抽时间就把相应所有的属性,方法做一个总结. UIBezierPath主要用来绘制矢量图形,它是基于Core Graphics对CGPathRef数据类型和path绘图属性的一个封装,所以是需要图形上下文的(CGContextRef),所以一般UIBezierPath在drawRect中使用. UIBezierPath的属性介绍: 1.CGPath:将UIBezierPath类转
快速上手IOS UIBezierPath（贝塞尔曲线）

UIBezierPath主要用来绘制矢量图形,它是基于Core Graphics对CGPathRef数据类型和path绘图属性的一个封装,所以是需要图形上下文的(CGContextRef),所以一般UIBezierPath在drawRect中使用. 使用方法 UIBezierPath 是对 CGPathRef 的封装.创建矢量图形时,拆解成一或多条线段,拼接起来,每条线段的终点都是下一条线段的起点. 具体地: 1.创建一个 UIBezierPath 对象 2.用 moveToPoint: 设置初
iOS贝塞尔曲线画哆啦A梦的代码实例

看到这张图,是不是觉得挺萌的,那是如何实现的呢?在iOS中有一个类叫UIBezierPath(贝塞尔曲线),这两天研究了一下UIBezierPath和CAShapeLayer,根据别人分享的教程,画了这个萌萌的哆啦A梦. UIBezierPath: UIBezierPath是在 UIKit 中的一个类,继承于NSObject,可以创建基于矢量的路径.此类是Core Graphics框架关于path的一个OC封装.使用此类可以定义常见的圆形.多边形等形状 .我们使用直线.弧(arc)来创建复杂的曲
Python实战之画哆啦A梦(超详细步骤)

一.写在前面本文基于64位windows系统(鼠标右键点击桌面"此电脑"图标--属性可查看电脑系统版本).python3.x(pycharm自动安装的版本, 3.0以上).文中代码内容所使用的工具是pycharm-community-2020.1,实践中如有碰到问题,可留言提问. 前阵子有看到zh上有大神画了这个哆啦A梦的大头贴,自己也来试了一下,很简单,但长篇整段的代码对刚刚学会海龟绘图语法的初学者来说还是有一定难度,所以来做一个拆解版详细步骤讲解实现. 二.效果图言归正传,先上
Android Flutter利用贝塞尔曲线画一个小海豚

目录前言效果图实现步骤总结前言贝塞尔曲线的应用填补了计算机绘制与手绘之前的差距,更能表达人想画出的曲线,为了更好的理解万能的贝塞尔曲线,而海豚是我认为在海洋生物中身体曲线最完美的海洋生物,在海洋中游泳速度最高可达80km/h;比驱逐舰速度还快,学习绘制正好学到了贝塞尔曲线,那么我们今天就用贝塞尔曲线画看看能不能画一只可爱的小海豚呢. 效果图先上效果图: 实现步骤 path路径绘制贝塞尔曲线的方法非常简单,只需要传入控制点即可,二阶就传1个控制点1个终点,三阶就传2个控制点和1个终点
用Python画一个LinkinPark的logo代码实例

这篇文章主要介绍了用Python画一个LinkinPark的logo代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下代码如下 # -*- coding: UTF-8 -*- from turtle import * width(17) right(25) circle(150,200,20) left(65) forward(240) left(120) forward(195) left(120) forward(135) left(
ios 贝塞尔曲线切割圆角的方法

ios 系统框架已经给我们提供了相应的切割圆角的方法, 但是如果在一个见面有很多控件切割的话会出现卡顿和个别不切得现在 /* 创建一个Button */ UIButton * button = [UIButton buttonWithType:(UIButtonTypeSystem)]; [button setFrame:CGRectMake(100, 100, 100, 100)]; [self addSubview:button]; /* 正厂的圆角需求处理方法 */ button.laye
微信小程序使用二次贝塞尔曲线画波浪

这两周做一个新的项目,人员比较紧张,除了需求和UI,前端后端一个人来干. 在项目需求确定后,UI隔了几天设计出了UI界面,拿到UI效果图后见有一个界面有波浪效果的我当时就蒙圈了,这都啥玩意啊?转念想到了最近在IT圈挺火的那个事件:产品要求安卓程序员实现根据用户手机壳颜色自动更换APP主题的需求后,顿时觉得画个波浪这个压根就不是事啊. 二次贝塞尔曲线在微信官方的二次贝塞尔曲线画法连接画波浪思路: 在屏幕左边画一个波,然后让它一直向屏幕右边平移过去.其X的值由负数变为正数依次增大:然后一直重复
JavaScript学习小结之使用canvas画“哆啦A梦”时钟

前言:今天看完了Js书的canvas画布那张,好开心~又是心爱的canvas~欧耶~ 之前看到有人建议我画蓝胖子,对哦,我怎么把童年最喜欢的蓝胖子忘了,为了表达我对蓝胖子的歉意,所以今天画了会动的hello world,也算是一种进步咯~ 好的各位,请上车的乘客往里走,请不要堵塞通道,谢谢.我们开车吧~ 正文: 今天先上图吧,看看效果再说今天的蓝胖子长这样,看到它还是这么胖,我就放心了.这世界还是充满正能量的,总归还有人比我胖,哈哈哈然后是上代码 html部分 <canvas id="
iOS应用开发中监听键盘事件的代码实例小结

1.注册监听键盘事件的通知复制代码代码如下: [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyboardWillShow:) name:UIKeyboardWillShowNotification
android贝塞尔曲线实现波浪效果

本文实例为大家分享了android贝塞尔曲线实现波浪效果的具体代码,供大家参考,具体内容如下因为手机录制gif不知道下什么软件好,所以暂时就先忽略效果图了我在屏幕外多画了1.5个波浪,延伸至屏幕内.然后不断的循环,向右边移动.就有一种波浪的效果. 所以现在只需要画出左边的波长,然后再通过循环添加所有的波长即可. 第一个曲线已经确定了控制点和终点的坐标, 第二条曲线也可以很明显的看出来终点是在x轴的0点坐标,Y轴不变,而控制点是在负的波长的1/4的位置有了上下曲线以后,其他的就可以直接通过循

iOS贝塞尔曲线画哆啦A梦的代码实例

相关推荐

随机推荐