cocos2d-js控件常用创建方法和坐标转换一览表
var sprite = new cc.Sprite(res.);
sprite.setPosition(, );
this.addChild(sprite);
var label = new cc.LabelTTF(&&, &&, 30);
label.x = ;
label.y = ;
this.addChild(label);
var atlas = new cc.LabelAtlas(&&, res., , , &&);
atlas.x = ;
atlas.y = ;
this.addChild(atlas);
图片菜单项
var item = new cc.MenuItemImage(res.,
this.menuItemCallback,
item.x = ;
item.y = ;
menuItemCallback:function(sender){
cc.log(&menuItemStartCallback&)
var menu = new cc.Menu(item);
menu.x = ;
menu.y = ;
this.addChild(menu);
{cc.Point} convertToNodeSpace(worldPoint);//将世界坐标转换为模型坐标。
{cc.Point} convertToNodeSpaceAR(worldPoint);//将世界坐标转换为模型坐标。AR表示相对于锚点。
{cc.Point} convertTouchToNodeSpace(touch);//将世界坐标中触摸点转换为模型坐标。
{cc.Point} convertTouchToNodeSpaceAR(touch);//将世界坐标中触摸点转换为模型坐标。AR表示相对于锚点。
{cc.Point} convertToWorldSpace(nodePoint);//将模型坐标转换为世界坐标。
{cc.Point} convertToWorldSpaceAR(nodePoint);//将模型坐标转换为世界坐标。AR表示相对于锚点。标准屏幕坐标系
　　如果接触过iOS，Android，Windows Phone等系统的应用开发，或使用DOM，CSS开发过Web网页，开发者会非常熟悉所谓的标准屏幕坐标系：左上角为原点，向右为X轴正方向，向下为Y轴正方向。
Cocos2d坐标系
　　Cocos2d引擎家族，包括Cocos2d-x，Cocos2d-JS的坐标系统是统一的，但是却不同于前面的屏幕坐标系，而是继承于OpenGL的右手（Right-handed Cartesian Coordinate System）。
　Cocos2d坐标系的特点是：
原点为屏幕左下角
向右为X轴正方向
向上为Y轴正方向
锚点（Anchor Point）
锚点是在坐标系之上非常重要的概念，锚点就是给节点定位和的基准点。锚点包含X轴和Y轴两个方向上的基准点，两个方向上的取值均为[0, 1]，意味着锚点位置在节点的X轴和Y轴上的占其宽度和长度的比例。锚点的默认值对于cc.Layer来说是(0,0)，也就是场景的左下角；对于其他节点类型来说是(0.5,0.5)，即节点的中央。
将一个节点添加到父节点里面时，需要设置其在父节点上的位置，本质上就是设置节点的锚点在父节点坐标系上的位置。节点的显示位置是其位置属性和锚点属性共同作用的结果，位置属性决定锚点位置，锚点属性决定节点相对于锚点位置如何定位。以下图为例：
图中三个精灵的Y轴位置是相同的，左边的精灵锚点为(0,0)，所以锚点位于精灵的左下角；中间的精灵锚点为(0.5,0.5)，所以锚点位于精灵 中央；右边的精灵锚点为(1,1)，所以锚点位于精灵右上角。与此同时，图中可以看到，精灵的旋转也是围绕锚点的，所以锚点的作用不仅仅在于定位，它还会 影响针对节点做出的旋转，防缩等操作。
cc.Node还拥有ignoreAnchor属性，默认值为false，即使用锚点来定位。若改变其取值为true，则在定位和仿射变换时忽略锚点，始终认为锚点为(0,0)。
cc.Node包含两种深度值：vertexZ和zIndex
verextZ是OpenGL坐标系中的Z值，仅在Web端的WebGL模式下或原生平台中有效。
zIndex是Cocos2d-JS本地坐标系中Z值。
在实际开发中开发者只需关注zIndex，在本地坐标系中，即在某个节点的所有子结点中，它决定了子节点从前向后的排列以及绘制顺序。zIndex值越大，节点越靠前，反之，zIndex值越小，节点越靠后，绘制顺序则是从后向前逐个节点进行绘制，这也同样符合右手笛卡尔坐标系的逻辑。
给节点定位
在Cocos2d-JS中，有两个非常方便的属性辅助开发者为某个节点定位：
cc.winSize：Cocos2d-JS游戏窗口的大小。
cc.visibleRect：Cocos2d-JS游戏的可视范围矩形以及相对于游戏窗口的位置等信息。
需要注意的是，cc.winSize可能不等同于cc.visibleRect的大小，这取决于游戏所使用的屏幕适配策略，关于屏幕适配策略的细节我们留待后面章节详细阐述。概括来说，cc.winSize等同于游戏场景的大小，但是游戏场景可能并不是完整可见，其可见范围信息被保存在cc.visibleRect中。cc.visibleRect包含以下属性：
属性类型描述
可视范围左上角坐标
可视范围右上角坐标
bottomLeft
可视范围左下角坐标
bottomRight
可视范围右下角坐标
可视范围中心点坐标
可视范围上方中心点坐标
可视范围下方中心点坐标
可视范围左边中心点坐标
可视范围右边中心点坐标
可视范围的宽度
可视范围的高度
举个例子，想要在屏幕上方居中显示一个精灵或文本标签，那么可以使用cc.pAdd(cc.visibleRect.top, cc.p(0, 50))来获得上方中心点向下偏移50个像素的位置，这个位置就可以作为精灵的位置，同时将精灵的锚点设置为(0.5,1)，那么这个精灵就会居中显示，并且精灵顶端距离可视范围顶端50个像素。
使用cc.winSize配合cc.visibleRect可以更有效率得为节点定位，我们强烈推荐配合锚点使用这些属性来给节点进行定位。
var label = cc.LabelTTF.create("Hello World", "Arial", 40);
label.setPosition(size.width / 2, size.height / 2);
阅读(...) 评论()cocos2dx里精灵从某一位置经过moveTo方法移动到已知点，怎么让它回原来位置？有没有方法？_百度知道
cocos2dx里精灵从某一位置经过moveTo方法移动到已知点，怎么让它回原来位置？有没有方法？
PS:moveTo-&reverse()不行。
我有更好的答案
看看这个或许有用
moveto-&reverse()可以的，但这个是相当一个动作，要和moveto顺序执行，就OK了
moveTo 没这功能用 moveBy 就好了
再moveTo到原来的点不行么
其他1条回答
为您推荐：
其他类似问题
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。Cocos2D-JS 动作回调取得当前动作精灵 - 简书
Cocos2D-JS 动作回调取得当前动作精灵
今天碰到一个需求，要在动作结束的回调函数中取到当前动作的精灵，实现在执行动作之后自动 remove 掉这个精灵。查了一下，没有结果。然后看了一下 API ，发现利用 cc.CallFunc 构造函数中的 data 参数可以解决这个问题。
下面是 cc.CallFunc 的构造函数和 init 方法的实现：
ctor:function(selector, selectorTarget, data){
cc.FiniteTimeAction.prototype.ctor.call(this);
if(selector !== undefined){
if(selectorTarget === undefined)
this.initWithFunction(selector);
else this.initWithFunction(selector, selectorTarget, data);
initWithFunction:function (selector, selectorTarget, data) {
if (selectorTarget) {
this._data =
this._callFunc =
this._selectorTarget = selectorT
else if (selector)
this._function =
selector 和 selectorTarget 不赘述。注意到在 init 方法中，将 ctor 方法传入的 data 赋给了 this 的 _data 。
再看它的 execute 方法 ：
execute:function () {
if (this._callFunc != null)
//CallFunc, N, ND
this._callFunc.call(this._selectorTarget, this.target, this._data);
else if(this._function)
this._function.call(null, this.target);
在执行这个回调的时候将 this._data 传入了原方法中，这样我们就可以将当前动作精灵指针传入回调函数，并在回调中取得它。
先构造一个动作队列并运行，代码如下：
var actionSprite = new cc.Sprite("res/me.png");
actionSprite.setAnchorPoint(0, 0);
actionSprite.x = 0;
actionSprite.y = 0;
this.addChild(actionSprite, 1);
var moveAction0 = cc.MoveBy(0.5, cc.p(cc.winSize.width/2, 0));
var moveAction1 = cc.MoveBy(0.5, cc.p(0, cc.winSize.height/2));
var moveAction2 = cc.MoveBy(0.5, cc.p(-cc.winSize.width/2, 0));
var moveAction3 = cc.MoveBy(0.5, cc.p(0, -cc.winSize.height/2));
var actionCallbackFunction = cc.CallFunc(this.actionCallbackFunction, this);
var actionFinishCallbackFunction = cc.CallFunc(this.actionFinishCallFunction, this);
var actionArray = [];
actionArray.push(moveAction0);
actionArray.push(actionCallbackFunction);
actionArray.push(moveAction1);
actionArray.push(actionCallbackFunction);
actionArray.push(moveAction2);
actionArray.push(actionCallbackFunction);
actionArray.push(moveAction3);
actionArray.push(actionFinishCallbackFunction);
var actionSequence = cc.Sequence(actionArray);
actionSprite.runAction(actionSequence);
actionCallbackFunction : function(){
cc.log("Action Callback Function");
actionFinishCallFunction : function(){
cc.log("Action Finish Callback Function");
下面对以上代码做一下小修改，来取得执行动作的精灵。
首先我们在构造回调函数时要将精灵的指针作为 data 参数传入：
var actionCallbackFunction = cc.CallFunc(this.actionCallbackFunction, this, actionSprite);
var actionFinishCallbackFunction = cc.CallFunc(this.actionFinishCallFunction, this, actionSprite);
其次我们要在定义回调方法的参数表中加入 data ，以便在函数实现中使用它：
actionCallbackFunction : function(data){
cc.log("Action Callback Function");
if (data != null && data != "undefine"){
cc.log("Get Data");
cc.log(typeof data);
cc.log(data.x);
cc.log(data.y);
actionFinishCallFunction : function(data){
cc.log("Action Finish Callback Function");
if (data != null && data != "undefine"){
cc.log("Get Data");
cc.log(typeof data);
cc.log(data.x);
cc.log(data.y);
data.removeFromParent();
运行试试看～
控制台这一部分输出为：
JS: Action Callback Function
JS: Get Data
JS: object
JS: Action Callback Function
JS: Get Data
JS: object
JS: Action Callback Function
JS: Get Data
JS: object
JS: Action Finish Callback Function
JS: Get Data
JS: object
看到在每一次动作执行完毕后输出 data 类型为 object 和精灵当前的坐标，最后的 removeFromParent() 也成功了。
接下来试一下来构造一个函数，返回一个动作队列。这样，只要创建动作队列然后在精灵上 runAction 就自动实现了精灵动作并在动作结束之后自动清掉这个精灵。
创建动作队列的代码如下：
createActionSequence : function(actionSpritePointer){
var moveAction0 = cc.MoveBy(0.5, cc.p(cc.winSize.width/2, 0));
var moveAction1 = cc.MoveBy(0.5, cc.p(0, cc.winSize.height/2));
var moveAction2 = cc.MoveBy(0.5, cc.p(-cc.winSize.width/2, 0));
var moveAction3 = cc.MoveBy(0.5, cc.p(0, -cc.winSize.height/2));
var actionCallbackFunction = cc.CallFunc(this.actionCallbackFunction, this, actionSpritePointer);
var actionFinishCallbackFunction = cc.CallFunc(this.actionFinishCallFunction, this, actionSpritePointer);
var actionArray = [];
actionArray.push(moveAction0);
actionArray.push(actionCallbackFunction);
actionArray.push(moveAction1);
actionArray.push(actionCallbackFunction);
actionArray.push(moveAction2);
actionArray.push(actionCallbackFunction);
actionArray.push(moveAction3);
actionArray.push(actionFinishCallbackFunction);
var actionSequence = cc.Sequence(actionArray);
return actionS
参数 actionSpritePointer 要在创建时传入要执行这个动作队列的精灵，这样，就能把这个精灵的指针传入回调函数中。
创建动作队列并执行的代码如下：
var actionSprite0 = new cc.Sprite("res/me.png");
var actionSprite1 = new cc.Sprite("res/me.png");
actionSprite0.setAnchorPoint(0, 0);
actionSprite1.setAnchorPoint(1, 0);
actionSprite0.x = 0;
actionSprite0.y = 0;
actionSprite1.x = cc.winSize.width/2;
actionSprite1.y = 0;
this.addChild(actionSprite0);
this.addChild(actionSprite1);
var actionSequence0 = this.createActionSequence(actionSprite0);
var actionSequence1 = this.createActionSequence(actionSprite1);
cc.log(typeof actionSequence0);
actionSprite0.runAction(actionSequence0);
actionSprite1.runAction(actionSequence1);
谢谢观赏，如果有错误，欢迎指正～
弄懂js异步 讲异步之前，我们必须掌握一个基础知识-event-loop。 我们知道JavaScript的一大特点就是单线程，而这个线程中拥有唯一的一个事件循环。当然新标准中的web worker涉及到了多线程，但它的原理是利用一个父线程和多个子线程，归根结底来说js仍逃不...
DOM DOM节点 DOM的概念 DOM是文档对象模型（Document Object Model）的简称，它的基本思想是把结构化文档（比如HTML和XML）解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。所有的节点和最终的树状结构，都有规范的对外接口...
1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1.2不唐突的JS 1.2.1行为和结构分离
分为组织结构、样式、行为三部分。
任何存在与HTML页面内部的JS代码都是错误的。 1.3.1 JQuery包...
1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1.2不唐突的JS 1.2.1行为和结构分离
分为组织结构、样式、行为三部分。
任何存在与HTML页面内部的JS代码都是错误的。 1.3.1 JQuery包...
第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型和基本包装类型 用类型的值（对象）是引用类型的-个实例。在ECMAScript中，引用类型是--种数据结构， 1 I用于将数据和功能组织在一起。它也常被称为类，...
曾经多少次迷惘 曾经多少次惆怅 如今已成过往 我不再倔强，倔强 是否是命运的安排 是否是自我的无奈 还是我在徘徊 无所释怀 干完这杯酒 兄弟姐妹情谊有木有 干完这杯酒 掏心置腑不怕丑 干完这杯酒 重头再来 你敢否 我不相信命 我不相信运 我只相信自己不会认怂 一浪接一浪 把...
原文片段1 选自《这样读书就够了》P27-28 作者：赵周 Ro阅读原文片段 如何解决三大问题 读书难，因为没时间、没精力，因为看不懂，因为看不下去所以，职场工作者若想更好地通过阅读提升自己的能力，就需要先装备更对症的学习方法论。这方法论应具备如下特征： 第一，不会成为新的...
一直有想写的欲望，被各种原因耽搁，还没有准备成熟，没有积累足够的素材，没有阅读过大量的书籍，没有丰富的人生阅历，没有时间，总而言之，写这件事一直在心里，作却一直没有被实行，今天看了简书的文章《坚持这六个习惯，你也可以成为作家》读完后终于感觉自己要行动了，今天注册了帐号。不得...
笔者今年大三，趁着最近魔兽热映，依然满怀憧憬的我带着一班现在玩游戏没有信仰的师弟去电影院刷副本，这还是我死缠烂打说要请他们去看魔兽电影，他们才去的。 然后，他们看得好爽啊。看，那个穿着盔甲的酷似盖伦诶；如果英雄联盟翻拍电影，肯定更好看；各种魔兽与lol的类比论从他们口中说出...
装饰（修改）一个Service /htdocs/engine/Shopware/Bundle/StoreFrontBundle/Service/Core/ListProductService.php可以在上面路径中找到ListProductService.php文件 ==&...Pages: 1/2
主题 : 请问，如何获得精灵的实际（最终）大小和坐标
可可豆: * CB
威望: * 点
在线时间: (时)
注册时间: *
最后登录: *
发自: Web Page
来源于&&分类
请问，如何获得精灵的实际（最终）大小和坐标&&&
[i=s] 本帖最后由 alex_itxz 于
10:25 编辑 请问如何获得Sprite 或者 Layer 在经过自己、父亲（或者父亲的父亲，诸如此类）的缩放和移动后的在GL坐标系或者屏幕坐标系上的实际大小和位置啊（在屏幕上展现出来的“最终”大小和位置）？？[ 此帖被abc8-03-04 09:35重新编辑 ]
可可豆: * CB
威望: * 点
在线时间: (时)
注册时间: *
最后登录: *
发自: Web Page
boundingBoxInPixels (void)
returns a "local" axis aligned bounding box of the node in pixels.
用这个试试，不过我之前貌似用过这个不行:L
可可豆: * CB
威望: * 点
在线时间: (时)
注册时间: *
最后登录: *
发自: Web Page
我试了下，直接调用 boundingBox 是可以的。这个就是缩放后的大小了。
至于坐标以及大小的其他问题，推荐你看看这篇文章
[url]http://www.cnblogs.com/cppguru/archive//2041835.html[/url]
可可豆: * CB
威望: * 点
在线时间: (时)
注册时间: *
最后登录: *
发自: Web Page
谢谢啦~~~ 这个例子我看过了。。可是还不能得到答案
可可豆: * CB
威望: * 点
在线时间: (时)
注册时间: *
最后登录: *
发自: Web Page
继续发问，希望能求得答案~
级别: 侠客
可可豆: 238 CB
威望: 228 点
在线时间: 46(时)
发自: Web Page
回 楼主() 的帖子
js&& sprite.getBody.p 但是这个 在JSB报错
级别: 圣骑士
UID: 298324
可可豆: 800 CB
威望: 798 点
在线时间: 282(时)
发自: Web Page
位置涉及到节点坐标系和世界坐标系，你要获取的话可以转换一下，通过getPosition()获取的是节点坐标系，使用convertToWorld这个函数记得不清楚了，你查一下可以转化的。坐标系这块很重要，项目的时候经常用到，一定要搞清楚了。
欢迎访问cocos2d-x博客www.zaojiahua.com皂荚花。
级别: 新手上路
可可豆: 127 CB
威望: 127 点
在线时间: 116(时)
发自: Web Page
getContentSize().widthgetContentSize().heightgetPosition().xgetPosition().y
可可豆: * CB
威望: * 点
在线时间: (时)
注册时间: *
最后登录: *
发自: Web Page
未发现已有的方法可以实现。不过还是可以计算出来的。首先Rect可以理解为有两个点组成，一个是origin即左下角的点，再计算出右上角的点，Rect就可以用这两个点来表示了。将这两个点都转换为世界坐标，再重新生成rect，新的rect就是相对于世界的大小了。
Pages: 1/2
关注本帖(如果有新回复会站内信通知您)
发帖、回帖都会得到可观的积分奖励。
按"Ctrl+Enter"直接提交
关注CocoaChina
关注微信 每日推荐
扫一扫 关注CVP公众号
扫一扫 浏览移动版}