一 说明
1.1 当前软件环境，Windows10，Cocos Creator 2.4.8，VSCode
1.2 安装VSCode插件 Debugger for Chrome
1.3 详情主要参考：http://docs.cocos.com/creator/3.0/manual/zh/concepts/scene/coord.html
二 示例
creator 简易工程：
2.1 A是B的父节点，宽高都为400，B为C的父节点，宽高都为300，C宽高都为200.锚点都是默认(0.5，0.5)。
2.2 点击 缩放按钮，A放大到2倍，点击 移动按钮，A向右移动100个像素。
20220605130520.png
代码如下：
cc.Class({
extends: cc.Component,
properties: {
A:{
type:cc.Node,
default:null,
},
B:{
type:cc.Node,
default:null,
},
C:{
type:cc.Node,
default:null,
},
},
onLoad () {
this.print_node_info();
},
start () {
},
onClickScale(event, event_data) {
console.log("onClickScale(),");
this.A.scale = 2;
this.print_node_info();
},
onClickMove(event, event_data) {
console.log("onClickMove(),");
this.A.x += 100;
this.print_node_info();
},
print_node_info(){
var str_a = this.debug_node_make_str(this.A);
console.log("str_a="+str_a);
var str_b = this.debug_node_make_str(this.B);
console.log("str_b="+str_b);
var str_c = this.debug_node_make_str(this.C);
console.log("str_c="+str_c);
},
//构造输出信息
debug_node_make_str(node){
var name = node.name;
var scale = node.scale;
var x = node.x;
var y = node.y;
var ws_x = node.parent.convertToWorldSpaceAR(cc.v2(x,y)).x;
var ws_y = node.parent.convertToWorldSpaceAR(cc.v2(x,y)).y;
var active = node.active;
var bounding_box_w = node.getBoundingBox().width;
var bounding_box_h = node.getBoundingBox().height;
var world_bounding_box_w = node.getBoundingBoxToWorld().width;
var world_bounding_box_h = node.getBoundingBoxToWorld().height;
var str = "{name="+name+",scale="+scale+",x="+x+",y="+y+",ws_x="+ws_x+",ws_y="+ws_y+",active="+active+",bounding_box_w="+bounding_box_w+",bounding_box_h="+bounding_box_h+",world_bounding_box_w="+world_bounding_box_w+",world_bounding_box_h="+world_bounding_box_h+"}";
return str;
},
});
来看一下输出结果
load __quick_compile_project__: 3.965087890625 ms
eval __quick_compile_project__ : 2 files: 3.430908203125 ms
Cocos Creator v2.4.8
app/engine/cocos2d/core/CCGame.js:393
str_a={name=A,scale=1,x=0,y=0,ws_x=480,ws_y=853.3333333333333,active=true,bounding_box_w=400,bounding_box_h=400,world_bounding_box_w=400,world_bounding_box_h=400}
str_b={name=B,scale=1,x=0,y=0,ws_x=480,ws_y=853.3333333333333,active=true,bounding_box_w=300,bounding_box_h=300,world_bounding_box_w=300,world_bounding_box_h=300}
str_c={name=C,scale=1,x=0,y=0,ws_x=480,ws_y=853.3333333333333,active=true,bounding_box_w=200,bounding_box_h=200,world_bounding_box_w=200,world_bounding_box_h=200}
onClickScale(),
str_a={name=A,scale=2,x=0,y=0,ws_x=480,ws_y=853.3333333333333,active=true,bounding_box_w=800,bounding_box_h=800,world_bounding_box_w=800,world_bounding_box_h=800}
str_b={name=B,scale=1,x=0,y=0,ws_x=480,ws_y=853.3333333333333,active=true,bounding_box_w=300,bounding_box_h=300,world_bounding_box_w=600,world_bounding_box_h=600}
str_c={name=C,scale=1,x=0,y=0,ws_x=480,ws_y=853.3333333333333,active=true,bounding_box_w=200,bounding_box_h=200,world_bounding_box_w=400,world_bounding_box_h=400}
onClickMove(),
str_a={name=A,scale=2,x=100,y=0,ws_x=580,ws_y=853.3333333333333,active=true,bounding_box_w=800,bounding_box_h=800,world_bounding_box_w=800,world_bounding_box_h=800}
str_b={name=B,scale=1,x=0,y=0,ws_x=580,ws_y=853.3333333333333,active=true,bounding_box_w=300,bounding_box_h=300,world_bounding_box_w=600,world_bounding_box_h=600}
str_c={name=C,scale=1,x=0,y=0,ws_x=580,ws_y=853.3333333333333,active=true,bounding_box_w=200,bounding_box_h=200,world_bounding_box_w=400,world_bounding_box_h=400}
三 简单结论
3.1 父节点缩放scale属性改变，并不影响子节点scale属性。缩放的是父节点坐标系的x轴，y轴。在该坐标系中，子节点还是保持原来的scale属性。【网络上挺多资讯都说子节点也进行了缩放，其实质是，在世界坐标系中的边界框发生了变化，但scale属性却是不变的】
3.2 node.getBoundingBox()，节点的边界框，是在父节点坐标系的边界框，父节点缩放和移动都不影响子节点。
3.3 node.getBoundingBoxToWorld()，节点的父坐标系边界框转世界坐标系边界框。
3.4 父节点移动的时候，子节点的(x,y)属性并不影响。因为子节点的坐标系是相对父坐标系的坐标。而在世界坐标系中是发生了变化。
3.5 在坐标系的转换过程当中，认清楚当前坐标(x,y)，是在哪个坐标系之下，就使用哪个坐标系的原点节点，进行转换。 说到底，区分和认清楚不同的坐标系就好了。
学海无涯，错误难免，如有发现，尽请指正。
--the end
