您的位置：首页 > Web前端 > JavaScript

比对js与oc对贝塞尔曲线绘制的异同之处

2017-11-01 16:23 633 查看

1.js绘图都是在canvas上实现的，画线有多种，第一种画折线：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绘制贝塞尔曲线</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="300" style="border: 1px solid gainsboro;"></canvas>
<script type="text/javascript">
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

//折线
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(200,70);
ctx.lineTo(100,90);
ctx.strokeStyle = "red";
ctx.stroke();

</script>
</body>

绘图结果如下：

2.我们用oc实现这种效果：

- (void)drawRect:(CGRect)rect {

UIBezierPath *path1 = [UIBezierPath bezierPath];
[path1 moveToPoint:CGPointMake(60, 100)];
[path1 addLineToPoint:CGPointMake(200, 200)];
[path1 addLineToPoint:CGPointMake(100, 300)];
path1.lineWidth = 2;

UIColor *strokeColor = [UIColor redColor];
[strokeColor set];
[path1 stroke];
}

结果如下：

比对下代码我们会发现真的很相似，ctx.beginPath的作用就相当于[UIBezierPath bezierPath]，ctx.moveTo(20,20)同 [path1 moveToPoint:CGPointMake(60, 100)]的作用一样，ctx.lineTo(200,70)相当于 [path1 addLineToPoint:CGPointMake(200, 200)]，ctx.strokeStyle = “red”同于 UIColor *strokeColor = [UIColor redColor]; [strokeColor set];，ctx.stroke()的效果同[path1 stroke]，这么一看语言都是相通的，学习一门有助于理解另外一门。

3.下面我们对这几个方法的意义解释一下。UIBezierPath提供给我们几乎可以绘制任何几何图形的方法。当初次定义了一个UIBezierPath对象时，并没有创建currentPoint，moveToPoint:方法可以在不绘制任何路径的情况下移动currentPoint到某一点。其它方法都可以产生额外路径，且都会以currentPoint为起点创建。stroke用来绘制曲线轮廓，fill用来填充当前路径所围成的图形。

4.下面我们来绘制二次贝塞尔曲线：

js代码绘制：

//二次贝塞尔曲线
ctx.beginPath();
ctx.moveTo(20,20);
ctx.quadraticCurveTo(200,50,20,200);
ctx.strokeStyle = "green";
ctx.stroke();

oc代码绘制：

path1 = [UIBezierPath bezierPath];
[path1 moveToPoint:CGPointMake(60, 100)];
[path1 addQuadCurveToPoint:CGPointMake(60, 300) controlPoint:CGPointMake(300, 200)];
path1.lineWidth = 2;
UIColor *strokeColor = [UIColor greenColor];
[strokeColor set];
[path1 stroke];

效果分别如下：

5.从苹果官网查看，了解到二次贝塞尔曲线的定义是这样的：二次贝塞尔曲线的弯曲由一个控制点来控制. 如下图所示（图片来自官网文档）：

该方法将会从 currentPoint 到指定的 endPoint 追加一条二次贝塞尔曲线。

6.我们再看三次贝塞尔曲线：

js中这样写：

//三次贝塞尔曲线
ctx.beginPath();
ctx.moveTo(20,20);
ctx.bezierCurveTo(100,20,200,100,20,200);
ctx.strokeStyle = "blue";
ctx.stroke()

oc中这样写：

path1 = [UIBezierPath bezierPath];
[path1 moveToPoint:CGPointMake(60, 100)];
[path1 addCurveToPoint:CGPointMake(60, 300) controlPoint1:CGPointMake(300, 100) controlPoint2:CGPointMake(300, 200)];
path1.lineWidth = 2;
UIColor *strokeColor = [UIColor blueColor];
[strokeColor set];
[path1 stroke];

呈现效果如下：

7.对三次贝塞尔曲线的定义是这样的，三次贝塞尔曲线的弯曲由两个控制点来控制，该方法将会从 currentPoint 到指定的 endPoint 追加一条三次贝塞尔曲线。效果图如下（图片来自官网文档）：

8.下面用UIBezierPath绘制圆弧：

js代码：

//创建圆弧
ctx.beginPath()
ctx.arc(80,80,40,0,1.5*Math.PI,false);
ctx.strokeStyle = "cyan"
ctx.stroke()

oc代码：

path1 = [UIBezierPath bezierPath];
[path1 addArcWithCenter:CGPointMake(150, 200) radius:80 startAngle:0 endAngle:1.5*M_PI clockwise:YES];
path1.lineWidth = 2;
UIColor *strokeColor = [UIColor cyanColor];
[strokeColor set];
[path1 stroke];

效果如下：

9.下面解释下创建弧度的几个参数，center: 圆心，radius: 半径，startAngle: 起始角度，endAngle: 结束角度，clockwise: 是否顺时针绘制。但是对于不同浏览器解析有不同，所以以上js代码有不同的效果。

小结：好了，对于js与objective-c对贝塞尔曲线的对比就做这么多吧，通过比对我们会更清楚js与oc写同样的效果而做的步骤的异同之处，学习js更有助于理解oc的代码。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 贝塞尔曲线 oc javascript bezierpath canvas

相关文章推荐

新的分享

章节导航