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

最新推荐文章于 2024-03-28 10:21:04 发布

逸轻紫

最新推荐文章于 2024-03-28 10:21:04 发布

阅读量381

点赞数

分类专栏： iOS 文章标签：贝塞尔曲线 oc javascript bezierpath canvas

本文链接：https://blog.csdn.net/qq_19411159/article/details/78415459

版权

iOS 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

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的代码。

逸轻紫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
比对js与oc对贝塞尔曲线绘制的异同之处

1.js绘图都是在canvas上实现的，画线有多种，第一种画折线：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>绘制贝塞尔曲线</title> </head> <body> <canvas id="myCanvas" width="300" height=
复制链接

扫一扫

专栏目录