Cocos2d-JS cc.DrawNode用法

时间:2021-11-27 08:45:52

app.js

var HelloWorldLayer = cc.Layer.extend({
sprite:null,
ctor:function () {
//////////////////////////////
// 1. super init first
this._super();
//这里输入测试代码 return true;
}
}); var HelloWorldScene = cc.Scene.extend({
onEnter:function () {
this._super();
var layer = new HelloWorldLayer();
this.addChild(layer);
}
});

绘制矩形:drawRect

        //创建draw对象
var drawNode =new cc.DrawNode();
//绘制矩形,参数:坐标,大小,填充颜色,边框大小,边框颜色
drawNode.drawRect(cc.p(0,0),cc.p(300,300),cc.color(),5,cc.color(255,255,0,255));
//加入Layer层
this.addChild(drawNode);

画圆点:drawDot

        //创建draw对象
var drawNode =new cc.DrawNode();
//画点,参数:坐标,半径, 颜色
drawNode.drawDot(cc.p(100,100),10,cc.color(255,255,255));
//加入Layer层
this.addChild(drawNode);

绘制圆形:drawCircle

        //创建draw对象
var drawNode =new cc.DrawNode();
//圆形,参数:原点,半径,弧度,分段(越大越接近圆),原点到弧度的线是否显示,线条宽度,颜色
drawNode.drawCircle(cc.p(200, 200), 50, 0, 50, false, 2, cc.color(0, 255, 0, 255));
//加入Layer层
this.addChild(drawNode);

绘制多边形:drawPoly

        //创建draw对象
var drawNode =new cc.DrawNode();
//转折点坐标组
var vertices = [cc.p(60, 80), cc.p(60, 230), cc.p(500, 80)];
//多边形,参数:坐标组,填充颜色,边框宽度,边框颜色
drawNode.drawPoly(vertices, cc.color(0, 255, 255, 80), 2, cc.color(255, 0, 0, 255));
//加入Layer层
this.addChild(drawNode);

绘制直线:drawSegment

        //创建draw对象
var drawNode =new cc.DrawNode();
//线,参数:起点,终点,线条宽度,线条颜色
drawNode.drawSegment(cc.p(0, 0), cc.p(200,300), 1, cc.color(255, 0, 255, 255));
//加入Layer层
this.addChild(drawNode);

绘制曲线:drawCardinalSpline

        //创建draw对象
var drawNode =new cc.DrawNode();
var vertices = [cc.p(60, 80), cc.p(60, 300), cc.p(300, 60)];
//曲线,参数:点数组,张力,段落,线条宽度,颜色
drawNode.drawCardinalSpline(vertices, 0.5,4,2,cc.color(255, 255, 255, 255));
//加入Layer层
this.addChild(drawNode);

坐标移动:node.setPosition

        drawNode.setPositionX(22);
drawNode.setPositionY(22);