Draw smooth Bezier curve with cocos2d-x

Question

It may be a duplicate with this question, but I don't know how to apply this approach in my app, and which method I should use in cocos2d-x to draw a Bezier curve. My app should allow users to draw lines and curves when they touch the canvas. How can I achieve that?

Answer 1

From Cocos2dx v3.3 you can use DrawNode to draw Bezier curves. Check the DrawPrimitivesTest.cpp, it is very easy to use. This is only a sample script taken from the above mentioned file. You can use it anywhere in your Scene:

auto draw = DrawNode::create();
addChild(draw, 10);

auto s = Director::getInstance()->getWinSize();
draw->drawQuadBezier(Vec2(0, s.height), Vec2(s.width/2, s.height/2), Vec2(s.width, s.height), 50, Color4F(CCRANDOM_0_1(), CCRANDOM_0_1(), CCRANDOM_0_1(), 0.5));  
draw->drawCubicBezier(VisibleRect::center(), Vec2(VisibleRect::center().x+30,VisibleRect::center().y+50), Vec2(VisibleRect::center().x+60,VisibleRect::center().y-50),VisibleRect::right(),100, Color4F(CCRANDOM_0_1(), CCRANDOM_0_1(), CCRANDOM_0_1(), 0.5));

Answer 2

in CCDrawPrimitives.cpp file.

You can use this method.

ccDrawCubicBezier
ccDrawQuadBezier

-MyClass::draw() {
    glLineWidth(4.0f);
    ccPointSize(4);

    //Draw a blue quadratic bezier curve
    ccDrawColor4B(0, 0, 255, 255);
    ccDrawQuadBezier(ccp(90,0), ccp(200, 70), ccp(350,0), 12);

    //Draw cubic red bezier curve
    ccDrawColor4B(255, 0, 0, 255);
    ccDrawCubicBezier(ccp(100,100), ccp(300,150), ccp(250,50), ccp(350,100), 12);

    //Restore original values
    glLineWidth(1);
    ccDrawColor4B(255,255,255,255);
    ccPointSize(1);
}

Every time you move your touch positions, ccTouchesMoved method is called as you may know.
You can control the curve shape using the method and member variables.