核心:
1、首先需要使用上节提到的ClippingNode进行裁剪;
2、绘制圆角矩形模版;
3、用模版去裁剪;
定义静态方法:
ClippingNode* drawRoundRect(Node *newNode,float radius,unsigned int segments);
具体实现:
/* * @brief 画圆角矩形模版,并裁剪节点 * @param origin 矩形开始点 * @param destination 矩形结束点 * @param radius 圆角半径 * @param segments 圆角等份数,等份越多,圆角越平滑 * @attention */ ClippingNode* MapLayer::drawRoundRect(Node* newNode,unsigned int segments){ Point origin = newNode->getPosition(); Point destination = Point(newNode->getPosition().x + newNode->getContentSize().width,newNode->getPosition().y + newNode->getContentSize().height); ClippingNode* pClip = ClippingNode::create(); pClip->setInverted(false);//设置是否反向,将决定画出来的圆是透明的还是黑色的 pClip->setAnchorPoint(Point(0,0)); //算出1/4圆 const float coef = 0.5f * (float)M_PI / segments; Point * vertices = new Point[segments + 1]; Point * thisVertices = vertices; for (unsigned int i = 0; i <= segments; ++i,++thisVertices) { float rads = (segments - i)*coef; thisVertices->x = (int)(radius * sinf(rads)); thisVertices->y = (int)(radius * cosf(rads)); } // Point tagCenter; float minX = MIN(origin.x,destination.x); float maxX = MAX(origin.x,destination.x); float minY = MIN(origin.y,destination.y); float maxY = MAX(origin.y,destination.y); unsigned int dwPolygonPtMax = (segments + 1) * 4; Point * pPolygonPtArr = new Point[dwPolygonPtMax]; Point * thisPolygonPt = pPolygonPtArr; int aa = 0; //左上角 tagCenter.x = minX + radius; tagCenter.y = maxY - radius; thisVertices = vertices; for (unsigned int i = 0; i <= segments; ++i,++thisPolygonPt,++thisVertices) { thisPolygonPt->x = tagCenter.x - thisVertices->x; thisPolygonPt->y = tagCenter.y + thisVertices->y; // log("%f,%f",thisPolygonPt->x,thisPolygonPt->y); ++aa; } //右上角 tagCenter.x = maxX - radius; tagCenter.y = maxY - radius; thisVertices = vertices + segments; for (unsigned int i = 0; i <= segments; ++i,--thisVertices) { thisPolygonPt->x = tagCenter.x + thisVertices->x; thisPolygonPt->y = tagCenter.y + thisVertices->y; // log("%f,thisPolygonPt->y); ++aa; } //右下角 tagCenter.x = maxX - radius; tagCenter.y = minY + radius; thisVertices = vertices; for (unsigned int i = 0; i <= segments; ++i,++thisVertices) { thisPolygonPt->x = tagCenter.x + thisVertices->x; thisPolygonPt->y = tagCenter.y - thisVertices->y; // log("%f,thisPolygonPt->y); ++aa; } //左下角 tagCenter.x = minX + radius; tagCenter.y = minY + radius; thisVertices = vertices + segments; for (unsigned int i = 0; i <= segments; ++i,--thisVertices) { thisPolygonPt->x = tagCenter.x - thisVertices->x; thisPolygonPt->y = tagCenter.y - thisVertices->y; // log("%f,thisPolygonPt->y); ++aa; } //设置参数 static Color4F red(1,1);//顶点颜色设置为红色,参数是R,G,B,透明度 //注意不要将pStencil addChild DrawNode *pStencil = DrawNode::create(); pStencil->drawPolygon(pPolygonPtArr,dwPolygonPtMax,red,red);//绘制这个多边形 pStencil->setPosition(Point(0,0)); pClip->setStencil(pStencil); pClip->addChild(newNode,1); pClip->setContentSize(newNode->getContentSize()); CC_SAFE_DELETE_ARRAY(vertices); CC_SAFE_DELETE_ARRAY(pPolygonPtArr); return pClip; }
其中,实现了圆角矩形模板、并根据模板才用ClippingNode对newNode节点进行裁剪。
调用:
// 裁剪圆角 auto newCardNode = CSLoader::createNode("node_layer.csb"); // 裁剪圆角 auto newNode = this->drawRoundRect(newCardNode,16,200); newNode->setPosition(cardNode->getPosition()); newNode->setScale(0.85); rootNode->addChild(newNode,4);//4 oldNode->setVisible(false);
将裁剪后的Node加入到我们自己的根节点rootNode,替换原来的oldNode,并将oldNode设置为InVisible。这样我们就得到了裁剪后的圆角矩形。