The picture above first shows this effect
The first difficulty in achieving this effect is to follow the curve path Stretch and pass a fixed point to draw a curve
Fortunately, someone has already written an algorithm for us, here http://discuss.cocos2d-x.org/…, thank you this great god!
Just download the cpp file and h file inside and put it into the project. Next is how to use it.
Follow the example inside:
if(auto spline = TexturedSpline::create(path, 10, "brick.jpg")
{
addChild(spline);
spline->setPosition(center);
}
where path is a std::vector
Note that the pixel length and width of the picture should be a multiple of 2, otherwise an error will be reported.
Press the above In the example, you may find that the curve does not cross the point you want. This is because of the anchor point. Just reset the curve position and anchor point:
_touchLine->setPosition (Vec2(0, 0));
_touchLine->setAnchorPoint(Vec2(0, 0));
Just like this, you can use world coordinates to directly generate curves.
So far, the curves are static, let’s see how to do it dynamically:
First set something in the h file
virtual void draw(cocos2d::Renderer *renderer, const cocos2d::Mat4 &transform, uint32_t flags);
void onDraw(const cocos2d::Mat4 &transform, bool transformUpdated);
cocos2d::CustomCommand _customCommand;
//The above is cocos2dx 3 .x rewrite the relevant statement of draw
bool _makeLine; //Determine whether you are drawing a line
std::vector_pointArray; //Install the coordinates of the selected letter sprite
Vec2 _touchPoint; //The coordinates of your current touch< br /> TexturedSpline* _touchLine; //The curve
void addLinePoint(Vec2 point); //Add the coordinates of the selected letter
void deletePoint(); //Delete the selection to
void removeTouchLine(); //Delete the curve
cpp file:
void GameScene::addLinePoint(Vec2 point){ //Due to the curve drawing The path cannot be less than four points, so when you click for the first time, put three same points inside if (_pointArray.size() <4) {_pointArray.push_back(point); _pointArray.push_back(point); _pointArray .push_back(point);} _pointArray.push_back(point); _makeLine = true;}void GameScene::deletePoint(){ _pointArray.pop_back(); if (_pointArray.size() <4) {_makeLine = false; }) void GameScene::removeTouchLine(){ _pointArray.clear(); _makeLine = false;}void GameS cene::draw(cocos2d::Renderer *renderer, const cocos2d::Mat4 &transform, uint32_t flags){ _customCommand.init(zOrderLetters); _customCommand.func = CC_CALLBACK_0(GameScene::onDraw, this, transform, flags); renderer- >addCommand(&_customCommand);}void GameScene::onDraw(const cocos2d::Mat4 &transform, bool transformUpdated){ Director *director = Director::getInstance(); director->pushMatrix(MATRIX_STACK_TYPE::MATRIX_STACK_MODELVIEW); director->loadMatrix (MATRIX_STACK_TYPE::MATRIX_STACK_MODELVIEW, transform); if (_touchLine != NULL) {this->removeChild(_touchLine); _touchLine = NULL;} if (_makeLine) {std::vector path; path.insert(path. end(), _pointArray.begin(), _pointArray.end()); path.push_back(_touchPoint); //The idea is this, each time the path of drawing a curve is the coordinates of each selected letter + your current touch Coordinates _touchLine = TexturedSpline::create(path, 50, "line.png"); this->addChild(_touchLine,2); _touchLine->setPosition(Vec2(0, 0));
_to uchLine->setAnchorPoint(Vec2(0, 0));} director->popMatrix(MATRIX_STACK_TYPE::MATRIX_STACK_MODELVIEW);}
The usage is:
1. Record _touchPoint in the touch event
2. When a point is detected to add a letter, execute addLinePoint to start drawing the curve
3. When the letter coordinates need to be deleted, execute deletePoint
4. When the user is detected to let go, execute removeTouchLine to end drawing
The author has just played cocos2dx and c++ for half a month, there must be some incomplete writing, if you have better ideas, please communicate with me more