阅读本文之前，默认你已经掌握cocosCreator的基本知识。
关于节点
节点在cocosCreator中是非常重要的，所以它的相关API至关重要。
- 节点基本属性
width: 节点宽度。
height: 节点高度。
name: 节点名称。
color: 节点颜色。
opacity: 节点透明度（0-255）。
position: 节点在父节点坐标系中的位置。
x: 节点 X 轴坐标（相当于父节点）。
y: 节点 Y 轴坐标（相当于父节点）。
anchorX: 节点 X 轴锚点位置（0-1之间）。
anchorY: 节点 Y 轴锚点位置（0-1之间）。
rotation: 该节点旋转角度。
scale: 节点相对父节点的缩放。
zIndex: 决定一个节点在兄弟节点之间的位置。
active: 当前节点的自身激活状态。
parent: 该节点的父节点。
children: 节点的所有子节点。
可以直接对属性赋值从而改变属性的值。 - 节点基本方法
getContentSize: 获取节点原始大小，不受该节点是否被缩放或者旋转的影响。
setContentSize: 设置节点原始大小，不受该节点是否被缩放或者旋转的影响。
getPosition: 获取节点在父节点坐标系中的位置（x, y）。
setPosition: 设置节点在父节点坐标系中的位置。
getScale: 获取节点的缩放。
setScale: 设置节点的缩放比例，默认值为 1.0。
getRotation: 获取该节点以局部坐标系 Z 轴为轴进行旋转的角度。
setRotation: 设置该节点以局部坐标系 Z 轴为轴进行旋转的角度。
getBoundingBox: 返回父节坐标系下的轴向对齐的包围盒。
getBoundingBoxToWorld: 返回节点在世界坐标系下的对齐轴向的包围盒。
convertToWorldSpace: 将一个相对于节点左下角的坐标位置转换到世界空间坐标系。
convertToWorldSpaceAR: 将一个相对于节点锚点的坐标位置转换到世界空间坐标系。
convertToNodeSpace: 将一个点转换到节点空间坐标系，这个坐标系以节点左下角为原点。
convertToNodeSpaceAR: 将一个点转换到节点空间坐标系，这个坐标系以锚点为原点。 - 节点操作查找相关方法
getParent: 获取该节点的父节点。
setParent: 设置该节点的父节点。
addChild: 添加子节点。
insertChild: 插入子节点到指定位置。
removeChild: 移除节点中指定的子节点。
removeAllChild: 移除节点所有的子节点。
removeFromParent: 从父节点中删除该节点。
getChildByName: 通过名称获取节点的子节点。
getComponent: 获取节点上指定类型的组件。
getComponents: 返回节点上指定类型的所有组件。
addComponent: 向节点添加一个指定类型的组件类。
removeComponent: 删除节点上的指定组件。 - 节点事件相关方法
on: 在节点上注册指定类型的回调函数。
once: 注册节点的特定事件类型回调，回调会在第一时间被触发后删除自身。
off: 删除之前与同类型，回调，目标注册的回调。
targetOff: 移除目标上的所有注册事件。
emit: 通过事件名发送自定义事件。
dispatchEvent: 分发事件到事件流中。
pauseSystemEvents: 暂停当前节点上注册的所有节点系统事件，节点系统事件包含触摸和鼠标事件。
resumeSystemEvents: 恢复当前节点上注册的所有节点系统事件，节点系统事件包含触摸和鼠标事件。 - 节点动作相关方法
runAction: 执行并返回该执行的动作。
stopAction: 停止并移除指定的动作。
stopAllActions: 停止并且移除所有正在运行的动作列表。
pauseAllActions: 暂停本节点上所有正在运行的动作。
resumeAllActions: 恢复运行本节点上所有暂停的动作。 - 注意点
- 节点的width，height代表节点原始大小（与getContentSize方法的结果一样），不受节点缩放旋转的影响。
- 节点旋转后，自身的坐标系也会一起旋转。所以一些转换坐标的方法结果会有变化。
- 一个空节点设置颜色是无效的，可以给空节点添加Sprite渲染组件。
关于事件
Cocos Creator 支持的系统事件包含鼠标、触摸、键盘、重力传感四种。
鼠标和触摸事件被称为节点系统事件，键盘和重力传感事件被称为全局系统事件。
值得注意的是无论你的鼠标和触摸事件注册在哪个层级的节点上，获取到的位置坐标都是基于世界坐标系的
所以我们经常需要将坐标统一转换为世界坐标系进行相应的计算。
关于坐标系
Cocos Creator 的坐标系是笛卡尔右手系，即原点在左下角，x 向右，y 向上，z 向外。
关于Graphics组件的坑
Graphics组件提供了一系列绘画接口，和canvas的API差不多。但是在使用过程中还是有很多问题的，现就我遇到的问题简单描述并给出解决方案。
- 问题一，1px划的线条在不同分辨率设备上会出现粗细不均，甚至线条丢失问题？
原因：我们的画布会根据设备屏幕的实际分辨率并对场景中所有渲染元素进行适当的缩放，所以1px的线条在缩小到足够小的时候就会出现丢失问题。
解决方案：确保在不同分辨率的设备上，线条宽度永远为1px。
如果你的画布是适配高度的话，代码如下：
lineWidth = 1 /cc.view.getScaleY()
如果你的画布是适配宽度度的话，代码如下：
lineWidth = 1 /cc.view.getScaleX()
如果没有开启画布的任何适配模式，代码如下：
lineWidth = 1 / Math.min(cc.view.getScaleX(), cc.view.getScaleY()) - 问题二，对节点进行放大缩小会出现粗细不均，甚至线条丢失问题？
原因：同问题一。
解决：每次放大或缩小都进行一次重绘，确保lineWidth和原来的保持一致。
lineWidth = 1 / Math.min(cc.view.getScaleX(), cc.view.getScaleY()) / scaleRatio
scaleRatio为放大或缩小的比例。
注意点：确保真实绘制的lineWidth乘以实际的缩放比例为整数，即我们‘/’号之前为整数，不然还是会出现丢失问题或粗细不均问题
网友评论