Cocos2d-x - 绘制三次贝塞尔曲线时出错

Question

我正在尝试绘制具有一定厚度的三次贝塞尔曲线路径,但曲线看起来像一系列断开的线段(在我的情况下为3).这是一个截图(蓝色圆圈是曲线的控制点).

我注意到在cocos2d-x测试中的'draw primitives'中也会出现相同的效果.无论如何,我很确定应该有一个解决方法,但我自己找不到它.此外,该行受到别名效果的影响,我不知道如何应用alpha阴影来避免它.

这是我使用的代码:

glLineWidth(24.0f);

Vec2 cp1 = Vec2(200, 200);
Vec2 cp2 = Vec2(1300, 150);
Vec2 cp3 = Vec2(170, 1200);
Vec2 cp4 = Vec2(1400, 1000);

//Draw control points
DrawPrimitives::setDrawColor4B(0, 0, 255, 255);
DrawPrimitives::drawSolidCircle(cp1, 50, 360, 120, 1, 1);
DrawPrimitives::drawSolidCircle(cp2, 50, 360, 120, 1, 1);
DrawPrimitives::drawSolidCircle(cp3, 50, 360, 120, 1, 1);
DrawPrimitives::drawSolidCircle(cp4, 50, 360, 120, 1, 1);

//Draw cubic red bezier curve
DrawPrimitives::setDrawColor4B(255, 0, 0, 255);
DrawPrimitives::drawCubicBezier(cp1, cp2, cp3, cp4, 50);

Answer 1

这种损坏的效果是由于线条端点之间缺乏路径连接造成的。

OpenGL 首先是为快速扫描线光栅化而设计的，但如果您想以这种方式使用它，它并不总是那么漂亮。

可能有一些快速而肮脏的解决方法来获得合理的结果，例如在端点处画圆圈以尝试填充内容。

一个正确的库（其中精美地绘制路径很重要）通常会提供直线/曲线之间的连接选项，例如圆形、斜角或斜接接头，以及段不连接在一起的端盖选项。对于您正在做的工作来说，使用一个像样的 SVG 光栅器来完成这种工作可能会更容易、更高效。如果您需要将结果合成到 OGL 光栅化的元素上，您可以将图像结果传输到纹理中并进行渲染。

您还可以通过 OpenGL 获得相当复杂的解决方案（或者可能在其他地方找到一个）。这是一个示例： https: //www.mapbox.com/blog/drawing-antialiased-lines/