cocos2d-js cc.DrawNode用法示例

最新推荐文章于 2020-11-30 13:09:10 发布

alex8046

最新推荐文章于 2020-11-30 13:09:10 发布

阅读量2.1k

点赞数

分类专栏： Cocos2d-js 文章标签： cocos2d-js DrawNode

Cocos2d-js 专栏收录该内容

68 篇文章 1 订阅

订阅专栏

 
        var  
        draw =  
        new  
        cc.DrawNode();                  
        //创建drawnode对象 
       
        this 
        .addChild(draw, 10); 
       
        var  
        centerPos = cc.p(winSize.width / 2, winSize.height / 2); 
       
        //drawSegment --- 绘制直线 
       
        //用法：draw.drawSegment(from, to, lineWidth, color) 
       
        //参数 
       
        // from:起始点 
       
        // to:终点 
       
        // lineWidth：线条宽度 
       
        // color：线条颜色 
       
        draw.drawSegment(cc.p(0, 0), cc.p(winSize.width, winSize.height), 1, cc.color(255, 0, 255, 255)); 
       
        draw.drawSegment(cc.p(0, winSize.height), cc.p(winSize.width, 0), 5, cc.color(255, 0, 0, 255)); 
       
        //drawDot --- 绘制圆点 
       
        //draw.drawDot(pos, radius, color) 
       
        //draw.drawDots(points, radius, color)     //画点  points  点数组 
       
        draw.drawDot(cc.p(winSize.width / 2, winSize.height / 2), 40, cc.color(0, 0, 255, 128)); 
       
        var  
        points = [cc.p(60, 60), cc.p(70, 70), cc.p(60, 70), cc.p(70, 60)]; 
       
        draw.drawDots(points, 4, cc.color(0, 255, 255, 255)); 
       
        //drawCircle  --- 绘制圆形 
       
        //draw.drawCircle(center, radius, angle, segments, drawLineToCenter, lineWidth, color) 
       
        draw.drawCircle(cc.p(winSize.width / 2, winSize.height / 2), 100, 0, 10,  
        false 
        , 7, cc.color(0, 255, 0, 255)); 
       
        draw.drawCircle(cc.p(winSize.width / 2, winSize.height / 2), 50, cc.degreesToRadians(90), 100,  
        true 
        , 2, cc.color(0, 255, 255, 255)); 
       
        //draw poly --- 绘制多边形 
       
        //draw.drawPoly(verts, fillColor, lineWidth, color) 
       
        //not fill 
       
        var  
        vertices = [cc.p(0, 0), cc.p(50, 50), cc.p(100, 50), cc.p(100, 100), cc.p(50, 100) ]; 
       
        draw.drawPoly(vertices,  
        null 
        , 5, cc.color(255, 255, 0, 255)); 
       
        var  
        vertices2 = [cc.p(30, 130), cc.p(30, 230), cc.p(50, 200)]; 
       
        draw.drawPoly(vertices2,  
        null 
        , 2, cc.color(255, 0, 255, 255)); 
       
        //fill 
       
        var  
        vertices3 = [cc.p(60, 130), cc.p(60, 230), cc.p(80, 200)]; 
       
        draw.drawPoly(vertices3, cc.color(0, 255, 255, 50), 2, cc.color(255, 0, 255, 255)); 
       
        //draw rect --- 绘制矩形 
       
        //draw.drawRect(origin, destination, fillColor, lineWidth, lineColor) 
       
        //not fill 
       
        draw.drawRect(cc.p(120, 120), cc.p(200, 200),  
        null 
        , 2, cc.color(255, 0, 255, 255)); 
       
        //fill 
       
        draw.drawRect(cc.p(120, 220), cc.p(200, 300), cc.color(0, 255, 255, 180), 2, cc.color(128, 128, 0, 255)); 
       
        // draw quad bezier path --- 绘制二次贝塞尔曲线 
       
        // draw.drawQuadBezier(origin, control, destination, segments, lineWidth, color) 
       
        draw.drawQuadBezier(cc.p(0, winSize.height), cc.p(centerPos.x, centerPos.y), cc.p(winSize.width, winSize.height), 50, 2, cc.color(255, 0, 255, 255)); 
       
        // draw cubic bezier path --- 绘制三次贝塞尔曲线 
       
        // draw.drawCubicBezier(origin, control1, control2, destination, segments, lineWidth, color) 
       
        draw.drawCubicBezier(cc.p(winSize.width / 2, winSize.height / 2), cc.p(winSize.width / 2 + 30, winSize.height / 2 + 50), 
       
        cc.p(winSize.width / 2 + 60, winSize.height / 2 - 50), cc.p(winSize.width, winSize.height / 2), 100, 2, cc.color(255, 0, 255, 255)); 
       
        // draw cardinal spline --- 绘制曲线 
       
        // drawNode.drawCardinalSpline(config, tension, segments, lineWidth, color) 
       
        var  
        vertices4 = [ 
       
        cc.p(centerPos.x - 130, centerPos.y - 130), 
       
        cc.p(centerPos.x - 130, centerPos.y + 130), 
       
        cc.p(centerPos.x + 130, centerPos.y + 130), 
       
        cc.p(centerPos.x + 130, centerPos.y - 130), 
       
        cc.p(centerPos.x - 130, centerPos.y - 130) 
       
        ]; 
       
        draw.drawCardinalSpline(vertices4, 0.5, 100, 2, cc.color(255, 255, 255, 255));