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

【问题标题】：Cocos2d-x - Error drawing cubic bezier curvesCocos2d-x - 绘制三次贝塞尔曲线时出错
【发布时间】：2015-04-06 16:55:48
【问题描述】：

我正在尝试绘制具有一定厚度的三次贝塞尔路径，但曲线看起来像一系列断开的段（在我的例子中是 3 个）。这是截图（蓝色圆圈是曲线的控制点）。

我注意到 cocos2d-x 测试中的“绘制原语”中出现了相同的效果。无论如何，我很确定应该有一个解决方法，但我自己无法找到它。此外，这条线受到锯齿效果的影响，我不确定如何应用 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);

【问题讨论】：

如果在您指定“正常”线宽（如 1.0f）时效果没有在视觉上出现，那么您看到的是 OpenGL 的限制。您看到的“间隙”是用于绘制贝塞尔曲线的三条线的上限。由于 OpenGL 不允许您指定行上限，因此您可能必须自己实现这些...

标签： drawing cocos2d-x bezier

【解决方案1】：

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

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

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

一个适当的库，其中漂亮地绘制路径很重要，通常会提供线条/曲线之间的连接选项，如圆形、斜面或斜接接头，以及段未连接在一起的端盖选项。对于您正在做的工作来说，使用体面的 SVG 光栅化器可能会更容易和更有效。如果您需要将结果合成到由 OGL 栅格化的元素上，您可以将图像结果转换为纹理并进行渲染。

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

【讨论】：

【解决方案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);


}

这是我的结果

【讨论】：