2D笛卡坐标系(世界坐标 本地坐标)

笛卡坐标系在现实中

Paste_Image.png

已城镇为中心点，x轴描述中央街道东西大街 y描述南北大街
通过两条街的名称就可以定位到煎饼果子的位置

Paste_Image.png

在cocos2d中

在coocs2d中使用的笛卡坐标系 (原点在物体左下角(0,0)，右边x 上方y)
首先xy轴所表示的就是世界坐标，描述世界中的一个物体，是根据世界坐标系来定的。

1. 比如 ： 描述红色正方形在世界中的坐标为 (x=3,y=3)
2. 比如 : 描述红色原点在世界中的坐标为 (x=4,y=4)
3. 比如 : 描述红色原点在 红色正方形中的坐标为(x=1,y=1) 这个也可以称为本地坐标系

一段代码描述笛卡坐标系

 
 var HelloWorldLayer = cc.Layer.extend({
 sprite:null,
 ctor:function () {
 
 
    this._super();


    var size = cc.winSize;

     //创建一个矩形
     var rect = new cc.DrawNode();
     //1:原点 2:长宽 3:填充颜色 4:边框大小 5边框颜色
     rect.drawRect(cc.p(0,0),cc.p(300,300),cc.color(),5,cc.color(255,0,0,255));

      //设置世界坐标系  左下脚放入屏幕中心点
      rect.setPosition(size.width/2,size.height/2);

      //创建一个点
      var dot = new cc.DrawNode();
      //位置相对于矩形(本地坐标)
      dot.drawDot(cc.p(0,0),10,cc.color(255,255,255,255));

      dot.setPosition(100,100);

      //放入矩形中
      rect.addChild(dot);

      this.addChild(rect);

      //旋转函数
      this.schedule(function(f){
         rect.setRotation(rect.getRotation()+1);

         //dot本地坐标
         var p = dot.getPosition();
         cc.log("x="+p.x+"y="+p.y);

         //dot世界坐标
         var wordPos = dot.convertToWorldSpace(cc.p(0,0));
           cc.log("世界x="+wordPos.x+"世界y="+wordPos.y);
      });

      //将矩形完全居中显示 设置 锚点
      rect.setContentSize(cc.size(300,300));
      rect.setAnchorPoint(cc.p(0.5,0.5));



    return true;
}
 
 
});
 
 

 

Paste_Image.png