入门教程

Shape 形状

Shape 是一个二维图形,例如矩形、圆形等,Easy2D 提供了几种简单图形的创建方式:

1
2
3
4
5
6
7
8
9
10
11
12
// 创建一个从 (0,0) 到 (100,100) 的直线
auto line = Shape::createLine(Point(0, 0), Point(100, 100));
// 创建一个宽高为 (10,20) 的矩形
auto rect = Shape::createRect(Rect(Point(), Size(10, 20)));
// 创建一个宽高为 (10,20) ,圆角角度为 (40,20) 的圆角矩形
auto roundedRect = Shape::createRoundedRect(Rect(Point(), Size(10, 20)), Vector2(40, 20));
// 创建一个半径为 10 的圆形
auto circle = Shape::createCircle(Point(), 10);
// 创建一个半径为 (10,20) 的椭圆形
auto ellipse = Shape::createEllipse(Point(), Vector2(10, 20));
// 创建一个多边形
auto polygon = Shape::createPolygon({ Point(), Point(100, 100), Point(0, 100) });

形状具有周长、面积等属性:

1
2
shape->getLength();     // 获取周长
shape->computeArea(); // 计算面积

形状还有一些辅助方法:

1
2
3
4
5
6
7
8
9
10
11
shape->getBoundingBox();            // 获取形状外包围盒
shape->containsPoint(Point(5, 5)); // 判断点是否在形状内

// 计算形状长度为 1 时点的位置和切线向量
Point p;
Vector2 tangent;
shape->computePointAtLength(
1, // 长度,应 >= 0 && <= getLength()
p, // 返回点坐标
tangent // 返回切线向量
);

ShapeMaker 形状生成器

复杂形状可以用 ShapeMaker 来构造,如创建一个三角形:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 等边三角形边长
float side = 45.f;

// 使用形状生成器创建三角形三条边
ShapeMaker maker;
// 从三角形第一个点开始描绘形状
maker.beginPath(Point(0, 0));
// 添加第一条边
maker.addLine(Point(side, 0));
// 添加第二条边
maker.addLine(Point(side / 2, side * math::Cos(30.0f)));
// 闭合路线,形成第三条边
maker.endPath(true);
// 获取形状
auto triangle = maker.getShape();

ShapeMaker 提供的形状生成方法有一下几种:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 添加一条边
maker.addLine(Point());
// 添加多条边
maker.addLines({ Point(), Point() });
// 添加贝塞尔曲线
maker.addLines(
Point(), // 贝塞尔曲线的第一个控制点
Point(), // 贝塞尔曲线的第二个控制点
Point() // 贝塞尔曲线的终点
);
// 添加弧线
maker.addLines(
Point(), // 弧线终点
Size(), // 椭圆半径
120, // 椭圆旋转角度
true, // 是否顺时针
true // 是否取小于 180° 的弧
);
Tips

形状生成必须在 beginPathendPath 之间完成。

ShapeMaker 还可以合并两个形状

1
2
3
4
5
// 创建两个形状
auto rect = Shape::createRect(Rect(Point(), Size(10, 20)));
auto circle = Shape::createCircle(Point(), 10);
// 用交集方式合并
auto shape = ShapeMaker::combine(rect, circle, ShapeMaker::CombineMode::Union);

ShapeMaker 支持的合并方式有一下几种

1
2
3
4
5
6
7
8
// 形状合并方式
enum class CombineMode
{
Union, // 并集 (A + B)
Intersect, // 交集 (A + B)
Xor, // 对称差集 ((A - B) + (B - A))
Exclude // 差集 (A - B)
};

ShapeNode 形状节点

Shape 形状 不是节点,所以不可以直接加入到场景中,需要添加到 ShapeNode 才可以具备节点的性质,例如移动

1
2
3
4
5
6
7
8
// 创建一个宽高为 (10,20) 的矩形
auto rect = Shape::createRect(Rect(Point(), Size(10, 20)));
// 创建矩形节点
auto shapeNode = gcnew ShapeNode(rect);
// 移动矩形到 (100, 100) 坐标处
shapeNode->setPos(100, 100);
// 添加到场景中
scene->addChild(shapeNode);

填充与轮廓

ShapeNode 支持设置 DrawingStyle 绘图样式,以设置填充颜色、描边颜色等,详情请参阅 DrawingStyle

1
2
3
4
5
6
7
8
9
10
11
// 创建绘图样式
DrawingStyle style;
style.mode = DrawingStyle::Mode::Solid; // 绘图模式为填充
style.fillColor = Color::White; // 填充色
style.strokeColor = Color::Red; // 描边色
style.strokeWidth = 2.0; // 描边宽度为 2.0
style.lineJoin = LineJoin::Miter; // 线条相交样式

// 设置绘图样式
auto shapeNode = ShapeNode::createRect(Size(10, 10));
shapeNode->setDrawingStyle(style);

也可以单独设置某一项样式

1
2
3
4
5
6
7
8
// 创建一个宽高为 (10,20) 的矩形
auto rect = gcnew ShapeNode(Shape::createRect(Rect(Point(), Size(10, 20))));
// 设置填充颜色为红色
rect->setFillColor(Color::Red);
// 设置轮廓颜色为白色
rect->setStrokeColor(Color::White);
// 设置轮廓线条宽度为 2
rect->setStrokeWidth(2.0);