cocos2d-js cc.DrawNode用法示例

         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));

转载至http://blog.csdn.net/alex8046/article/details/48548119

在项目中可以自行封装常用的DrawNode方法,如圆形头像的封装


评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值