Cocos2d-x - Errore durante il disegno delle curve cubiche di bezier

Question

Sto provando a disegnare un tracciato di Bezier cubico con un certo spessore, ma la curva appare come una sequenza di segmenti sconnessi (3 nel mio caso). Questo è uno screenshot (i cerchi blu sono i punti di controllo della curva).

ho notato che lo stesso effetto si verifica negli disegnare primitivi 'nei test di cocos2d-x. Ad ogni modo sono abbastanza sicuro che ci dovrebbe essere una soluzione, ma non sono in grado di trovarlo da solo. Inoltre la linea è influenzata dall'effetto di aliasing e non sono sicuro di come applicare un'ombra alfa per evitarlo.

Questo è il codice che ho usato:

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

Tale effetto rotture è causata da una mancanza di percorso giunzione tra le terminazioni delle strisce di linea.

OpenGL è progettato per la rasterizzazione di scanline veloce prima di tutto e non è sempre così bello se si desidera utilizzarlo in questo modo.

Ci potrebbe essere rapido e sporco modi soluzione per tipo di ottenere un risultato ragionevole, come disegnare i cerchi ai punti finali per cercare di riempire le cose in.

Una biblioteca corretta in cui disegnare i percorsi in modo bello è importante spesso offrono unirsi opzioni tra linee/curve come arrotondate, smussate o una giuntura insieme alle opzioni per i cappucci terminali in cui i segmenti non si uniscono tra loro. Potrebbe essere più facile ed efficiente per il tipo di lavoro che stai facendo per usare, per esempio, un rasterizzatore SVG decente per questo tipo di lavoro. Se è necessario comporre i risultati su elementi rasterizzati da OGL, è possibile trasferire i risultati dell'immagine in una texture e renderli visibili.

Si potrebbe anche essere piuttosto elaborati e ottenere una soluzione piuttosto sofisticata (o eventualmente trovarne una altrove) tramite OpenGL. Ecco un esempio: https://www.mapbox.com/blog/drawing-antialiased-lines/

Answer 2

Ho un'altra soluzione, ma non so se rallenta le prestazioni? chiunque mi dia consigli!

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); 


} 

Ecco il mio risultato