CVP认证学习笔记--(何小成)015--实现绘图节点

API

本节课的内容是讲得node节点的绘制，node提供了绘制的功能，api如下：

 //绘图节点提供了绘制图形的功能 这里提供了很多2d绘图函数
 var node1=new cc.DrawNode();
 this.addChild(node1,10);//10就是绘图的排序
 //画圆            圆心     粗细  颜色
 node1.drawDot(cc.p(100,100),10,cc.color(255,0,0));
//绘制多边形
var points=[cc.p(30,30),
            cc.p(30,60),
            cc.p(60,60),
            cc.p(60,30)];
            //  点      内部颜色            边线  边线颜色
 node1.drawPoly(points,cc.color(0,0,255,128),8,cc.color(0,255,0,128));
 //绘制线段
 node1.drawSegment(cc.p(60,60),cc.p(200,200),5,cc.color(0,255,255,128));
 //绘制贝塞尔曲线
 node1.drawQuadBezier(cc.p(0,cc.winSize.height),//起点
                     cc.p(cc.winSize.width/2,cc.winSize.height/2),//控制点
                     cc.p(cc.winSize.width,cc.winSize.height),//终点
                     50,//控制线段
                     2,//线条宽度
                     cc.color(255,0,255,255)); //颜色
  //绘制曲线
  var v4=[cc.p(200,200),
          cc.p(200,300),
          cc.p(300,300),
          cc.p(300,200),
          cc.p(200,200)];
  node1.drawCardinalSpline(v4,0.5,100,2,cc.color(255,255,255,255));

作业

课后作业是绘制五星红旗，其实思考之后，就知道，这是其实是一个多边形，通过确定多边形的几个点，就可以绘制出想要的多边形，先确定一个五角星，我们可以从中心点出发，然后到最上面的点，然后挑一个点，再挑一个点，循环，最后回到最上面的点，这样就能绘制一个五角星，api都熟悉了，重点还是那几个点坐标的计算，话说中间才是踩了不少坑啊，如果不小心计算出无理数，那这个点就直接飘到0，0去了，还必须取个整；完成了单个五角星绘制，其他就好说了，封装好了五角星绘制的方法，传入坐标和半径就能绘制，然后把五角星放在相应的坐标上就行了，代码如下：

var Layer0209 = cc.Layer.extend({
        // sprite:null,
        ctor: function () {
            this._super();
            var size = cc.winSize;
            var rect = new cc.DrawNode();
            this.addChild(rect);
            //红色矩形
            var points = [
                cc.p(0, 0),
                cc.p(size.width, 0),
                cc.p(size.width, size.height),
                cc.p(0, size.height)
            ];
            // 画矩形
            rect.drawPoly(points, cc.color(255, 0, 0, 255), 0, cc.color(255, 0, 0, 255));
            // 画中间的大五角星
            var centerX = 150;
            var centerY = size.height - 150;
            var bigStar = this.drawStar(centerX, centerY, 80);
            rect.addChild(bigStar);
            // 画四个小五角星
            var r = 150;
            for (var i = 0; i <= 3; i++) {
                var star = this.drawStar(centerX + Math.round(r * Math.cos(Math.PI * 36 * (1 - i) / 180)), centerY + Math.round(r * Math.sin(Math.PI * 36 * (1 - i) / 180)), 20);
                rect.addChild(star);
            }
            return true;
        },
        // 绘制五角星,传入半径,及中心点坐标
        drawStar: function (x, y, r) {
            var points = [];
            //五角星中心点
            points.push(cc.p(x, y));
            var angle = 4 * Math.PI / 5;
            var star = new cc.DrawNode();
            for (var i = 1; i <= 5; i++) {
                points.push(cc.p(Math.round(x + Math.sin(i * angle) * r), Math.round(y + Math.cos(i * angle) * r)));
            }
            points.push(cc.p(Math.round(x + Math.sin(angle) * r), Math.round(y + Math.cos(angle) * r)));
            star.drawPoly(points, cc.color(255, 255, 0, 255), 0, cc.color(255, 255, 0, 255));
            return star;
        }
    })
    ;

var Scene0209 = cc.Scene.extend({
    onEnter: function () {
        this._super();
        var layer = new Layer0209();
        this.addChild(layer);
        return true;
    }
});

最后效果

http://www.cocoscvp.com/usercode/2016_04_20/c3c8eccd6594c99258a6062239a643b405909593/