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/

Answer 2

我有另一种解决方案，但我不知道它是否会降低性能？ 有人请给我建议!!

void DrawNode::drawCubicBezier(const Vec2 &origin, const Vec2 &control1, const Vec2 &control2, const Vec2 &destination, unsigned int segments, const Color4F &color)

{

Vec2* vertices = new (std::nothrow) Vec2[segments + 1];
if( ! vertices )
    return;

float t = 0;
for (unsigned int i = 0; i < segments; i++)
{
    vertices[i].x = powf(1 - t, 3) * origin.x + 3.0f * powf(1 - t, 2) * t * control1.x + 3.0f * (1 - t) * t * t * control2.x + t * t * t * destination.x;
    vertices[i].y = powf(1 - t, 3) * origin.y + 3.0f * powf(1 - t, 2) * t * control1.y + 3.0f * (1 - t) * t * t * control2.y + t * t * t * destination.y;

    t += 1.0f / segments;
    **///begin  adddd
    drawLine(Vec2(vertices[i].x, vertices[i].y - 3), Vec2(vertices[i].x, vertices[i].y + 3), color);
    /// end addddd**
}
vertices[segments].x = destination.x;
vertices[segments].y = destination.y;
**drawLine(Vec2(vertices[segments].x, vertices[segments].y - 3), Vec2(vertices[segments].x, vertices[segments].y + 3), color);**

CC_SAFE_DELETE_ARRAY(vertices);


}

这是我的结果