Easy2d 文档教程之常用元素 Node
常用元素
常用元素包括七大类
分别为Node, Text, Sprite, Button, ToggleButton, Menu, Shape
节点,文本,精灵,按钮,开关按钮,菜单,形状
七大元素都是Node节点的一种,
所以它们具备Node的所有性质
其他性质将会在之后的文档中另外提及。
auto创建
使用 auto
创建节点元素
auto node = new Node();//什么也不是的一个普通节点
auto text = new Text(L"Hello World");//创建文本
auto sprite = new Sprite(L"a.png");//创建精灵
auto button = new Button(sprite, callback);//创建按钮
auto toggleButton = new ToggleButton(on, off);//创建开关按钮
auto menu = new Menu;//创建菜单
auto rect = gcnew RectShape(Size(10, 20));// 创建一个宽高为 (10,20) 的矩形
auto roundRect = gcnew RoundRectShape(Size(10, 20), 40, 20);// 创建一个宽高为 (10,20) ,圆角角度为 (40,20) 的圆角矩形
auto circle = gcnew CircleShape(10);// 创建一个半径为 10 的圆形
auto ellipse = gcnew EllipseShape(10, 20);// 创建一个半径为 (10,20) 的椭圆形
isVisible
获取节点显示状态,显示为真,反之为假;
用法:
bool a = node->isVisible();
原型:
// 获取节点显示状态
bool isVisible() const;
getName
获取节点名称,返回字符串
用法:
string a = node->getName();
原型:
String getName() const;
getOrder
这个不必初学者了解,获取节点绘图顺序
用法:
int a = node->getOrder();
原型:
int getOrder() const;
getPosX 与 getPosY
分别获取节点x和y坐标
用法
float x = node->getPosX();
float y = node->getPosY();
原型
float getPosX() const;
float getPosY() const;
getPos
统一获取节点坐标,不建议初学者使用,因为要涉及到Point
类型。
用法
Point pos = node->getPos();
原型
Point getPos() const;
getWidth,getHeight与getRealWidth,getRealHeight
前一组分别获取宽高,后一组分别获取缩放之前的宽高,后一组不建议初学者使用,比较晦涩难懂。
用法
float w = node->getWidth(),h = node -> getHeight();
float rw = node->getRealWidth(),rh = node -> getRealHeight();
原型:
// 获取节点宽度
float getWidth() const;
// 获取节点高度
float getHeight() const;
// 获取节点宽度(不考虑缩放)
float getRealWidth() const;
// 获取节点高度(不考虑缩放)
float getRealHeight() const;
getRealSize
不考虑缩放,获取节点大小,不建议初学者使用,因为涉及Size类。
用法
Size size = node->getRealSize();
原型
Size getRealSize() const;
getAnchorX和getAnchorY
获取节点锚点,因头文件内没有相关区别资料,同论。
用法:
float a = node->getAnchorX;
float b = node->getAnchorY;
原型:
float getAnchorX() const;
float getAnchorY() const;
getSize
获取节点大小(未缩放),此部分不适合初学者,因为涉及Size类型。
用法
Size size = node->getSize();
原型
Size getSize() const;
getScaleY getScaleX
分别获取节点横、纵向比例
用法
float x = node->getScaleX();
float y = node->getScaleY();
原型
float getScaleX() const;
float getScaleY() const;
getSkewY getSkewX
分别获取节点横、纵向倾斜角度
用法
float y = node->getSkewY();
float x = node->getSkewX();
原型
float getSkewX() const;
float getSkewY() const;
getRotation
获取节点旋转角度
用法
float rotation = node->getRotation();
原型
float getRotation() const;
getOpacity
获取节点透明度
用法
float opacity = node->getOpacity;
原型
float getOpacity() const;
getProperty
获取节点属性,建议配合setProperty
使用
用法:
Node::Property pro = node->getProperty();
原型
// 获取节点属性
Property getProperty() const;
getBounds
此部分因博主能力所限,请路过的大佬在评论区发表看法!
getBoundingBox
此部分因博主能力所限,请路过的大佬在评论区发表看法!
getTransform
此部分因博主能力所限,请路过的大佬在评论区发表看法!
getInverseTransform
此部分因博主能力所限,请路过的大佬在评论区发表看法!
Property getProperty() const;
// 获取边框
Rect getBounds() const;
// 获取外切包围盒
Rect getBoundingBox() const;
// 获取二维变换矩阵
Matrix32 getTransform() const;
// 获取二维变换逆矩阵
Matrix32 getInverseTransform() const;
getParent
获取父节点,返回一个Node
类型
用法
auto node = new Node();
auto child = new Node();
node->addChild(child);
child->getParent();//此时getParent返回的是node
原型
Node * getParent() const;
getParentScene
获取节点所在场景,返回一个Scene
类型。
用法
auto scene = new Scene();
auto node = new Node();
scene->addChild(node);
node->getParentScene();//此时getParentScene返回的是scene
containsPoint
是否包含点坐标,返回bool
类型
用法
//假设节点在0,0处
Point point = Point(1, 1);
auto node = Node();
node->setPosX(0);
node->setPosY(0);
bool flag = node->containsPoint();//返回false
原型
bool containsPoint(Point const& point);
setVisible
设置节点可见性,默认为true
。
用法
node->setVisible(false);//不可见
node->setVisible(true);//可见
原型
void setVisible(
bool value
);
setAutoUpdate
开启或禁用自动刷新,默认为true
用法
node->setAutoUpdate(true);//启用
原型
void setAutoUpdate(
bool bAutoUpdate
);
setName
设置节点名称,与getName
搭配使用
用法
node->setName(L"Hello");
node->getName();//返回Hello
原型
// 设置节点名称
void setName(
const String& name
);
setPosX 与 setPosY
分别设置节点x
和y
坐标
用法
node->setPosX(0);
node->setPosY(0);//坐标0,0
原型
// 设置节点横坐标
void setPosX(
float x
);
// 设置节点纵坐标
void setPosY(
float y
);
setPos
设置节点坐标
用法
Point point = Point(1, 1);
node->setPos(point);//坐标为1,1
node->setPos(1, 1);//也可以
原型
// 设置节点坐标
void setPos(
const Point & point
);
// 设置节点坐标
void setPos(
float x,
float y
);
setPosFixed
节点坐标固定,参数为Bool
类型。
用法
node->setPosFixed(true);//固定住
原型
void setPosFixed(
bool fixed
);
movePosX 与 movePosY
分别移动节点的 X
与 Y
,参数为float
类型
用法
node->movePosX(1.0);
node->movePosY(1.0);//移动到1.0 , 1.0 坐标
原型
void movePosX(
float x
);
// 移动节点
void movePosY(
float y
);
movePos
移动节点
用法
node->movePos(1.0, 1.0);//1.0 1.0坐标
Point point = Point(1.0, 1.0);
node->movePos(point);//一样的作用
原型
void movePos(
float x,
float y
);
// 移动节点
void movePos(
const Vector2 & v
);
setOrder
设置节点绘图顺序,默认为0
用法
node->setOrder(1);//绘图顺序为1
原型
void setOrder(
int order
);
setScaleX 与 setScaleY
分别设置横向和纵向缩放比例,默认1.0f(无缩放)
f
表示float
,强制类型转换
用法
node->setScaleX(1.0f);
node->setScaleY(2.0f);//纵向缩放2倍
原型
// 设置横向缩放比例
// 默认为 1.0f
void setScaleX(
float scaleX
);
// 设置纵向缩放比例
// 默认为 1.0f
void setScaleY(
float scaleY
);
setScale
设置综合缩放比例(横纵比例不变),默认为1.0f
倍。
用法
node->setScale(2.0f);//综合缩放2倍
原型
// 设置缩放比例
// 默认为 1.0f
void setScale(
float scale
);
setSkewX 与 setSkewY
分别设置横向和纵向的倾斜角度,默认为0.0(不倾斜)
用法
node->setSkewX(1.0);
node->setSkewY(-1.0);
原型
// 设置横向倾斜角度
// 默认为 0
void setSkewX(
float angleX
);
// 设置纵向倾斜角度
// 默认为 0
void setSkewY(
float angleY
);
setSkew
设置综合倾斜角度,默认为 (0, 0)
node->setSkew(1, -1);//1, -1的倾斜
原型
// 设置倾斜角度
// 默认为 (0, 0)
void setSkew(
float angleX,
float angleY
);
setRotation
设置旋转角度,默认为 0.0
用法
node->setRotation(1.0);//旋转1.0
原型
// 设置旋转角度
// 默认为 0
void setRotation(
float rotation
);
setOpacity
设置透明度,默认为 1.0f
, 范围 [0, 1]
用法
node->setOpacity(0.5f);//半透明
原型
// 设置透明度
// 默认为 1.0f, 范围 [0, 1]
void setOpacity(
float opacity
);
setAnchorX 与 setAnchorY
分别设置锚点的横向和纵向位置,默认为 0.0
, 范围 [0, 1]
用法
node->setAnchorX(0.5);
node->setAnchorY(0.5);//二分之一
原型
// 设置锚点的横向位置
// 默认为 0, 范围 [0, 1]
void setAnchorX(
float anchorX
);
// 设置锚点的纵向位置
// 默认为 0, 范围 [0, 1]
void setAnchorY(
float anchorY
);
setAnchor
设置锚点综合位置,默认为 (0, 0)
, 范围 [0, 1]
用法
node->setAnchor(0.5f, 0.5f);//一半
原型
void setAnchor(
float anchorX,
float anchorY
);
setWidth 与 setHeight
修改节点宽度和修改节点高度,参数皆为float
用法
node->setWidth(10);//宽度10
node->setHeight(10);//高度10
原型
// 修改节点宽度
void setWidth(
float width
);
// 修改节点高度
void setHeight(
float height
);
setSize
修改节点大小
用法
node->setSize(10, 10);
Size size = Size(10, 10);
node->setSize(size);
原型
// 修改节点大小
void setSize(
float width,
float height
);
// 修改节点大小
void setSize(
Size size
);
setProperty
设置节点属性,参数为结构体Property
,
结构体原型
struct Property
{
bool visable; // 可见性
float posX; // X 坐标
float posY; // Y 坐标
float width; // 宽度
float height; // 高度
float opacity; // 透明度
float anchorX; // 锚点 X 坐标
float anchorY; // 锚点 Y 坐标
float scaleX; // 横向缩放
float scaleY; // 纵向缩放
float rotation; // 旋转角度
float skewAngleX; // 横向倾斜角度
float skewAngleY; // 纵向倾斜角度
};
用法
Node::Property pro = node->getProperty();//先获取,再修改
//注意这里Node不能省略
pro.height = 10;//修改成员值,点是成员运算符
//这个height可以改成上面结构体中的任意成员,注意前面的数据类型
pro.visable = true;//可见
原型
// 设置节点属性
void setProperty(
Property prop
);
addChild
添加子节点
用法
//假设有一个Text类型节点叫text
node->addChild(text);
node->addChild(text, 0);//0是渲染顺序,表示首个
//假设有一组Text类型节点数组叫array
node->addChild(array);//array中所有元素同级
node->addChild(array, 0);
原型
// 添加子节点
void addChild(
Node * child,
int order = 0 /* 渲染顺序 */
);
// 添加多个子节点
void addChild(
const std::vector<Node*>& nodes, /* 节点数组 */
int order = 0 /* 渲染顺序 */
);
getChildren 与 getChild
本部分不建议初学者学习,因为涉及vector
和iterator
前者:获取所有名称相同的子节点,返回节点数组
后者:获取首个名称相同的子节点,返回从右数首个节点
关系图
用法
//getChildren
//假设有个子节点叫做text
std::vector<Node*> a = node->getChildren(L"text");
//输出向量
std::vector<Node*>::iterator ite = a.begin();
for(;ite != a.end(); ite++)
//此处使用*ite即为向量中每一个元素
//getChild
Node* a = node->getChild(L"text");
原型
// 获取所有名称相同的子节点
std::vector<Node*> getChildren(
const String& name
) const;
// 获取名称相同的子节点
Node* getChild(
const String& name
) const;
getAllChildren
获取所有子节点
用法
std::vector<Node*> a = node->getAllChildren();
//输出向量
std::vector<Node*>::iterator ite = a.begin();
for(;ite != a.end(); ite++)
//此处使用*ite即为向量中每一个元素
原型
// 获取所有子节点
const std::vector<Node*>& getAllChildren() const;
getChildrenCount
获取子节点数量,返回整型数据
用法
int count = node->getChildrenCount();
原型
// 获取子节点数量
int getChildrenCount() const;
removeChild
移除子节点,此函数返回一个布尔值
用法
//假设存在一个text节点在node之下
if (node->removeChild(text)) //删除成功
else //删除失败
原型
bool removeChild(
Node* child
);
removeChildren
移除所有名称相同的子节点,参数为String
字符串。
用法
//假设text1为node的子节点
node->removeChildren(L"text1");
原型
bool removeChild(
Node* child
);
removeFromParent
移除当前节点父节点下的所有子节点
用法
//假设c1和c2是node的子节点
//用c1删除node
c1->removeFromParent();
//用c2删除node
c2->removeFormParent();
原型
void removeFromParent();
removeAllChildren
移除此节点下的所有子节点
用法
//假设c1和c2是node的子节点
node->removeAllChildren();//移除此节点下的所有子节点
原型
void removeAllChildren();
结束语
此文章经过3天的时间,结合博主的请教和资料寻找还有自己画的释义图,编写完成已经是非常难的事情了,希望大家能为我点一个赞并订阅专栏。
最后其实还有Action
和Listener
两个部分,考虑到文档教程对初学者的友好性,这两个部分我们将会在后面的文档教程中详细讲述,尽情期待!