我用剪切节点实现的圆角层

Cocos2d-x JavaScript
#1

有时候为了方便会直接用颜色层和过渡层来显示一些信息,但层只有方角没有圆角不太美观,于是我用剪切节点实现了一个圆角层.方便以后使用.

    //图层定位,以屏幕中心偏移
    var offsetX = 0;
    var offsetY = 0;
    //图层大小
    var clipWidth = 600;
    var clipHeight =400;
    //圆角半径
    var radius =25;
    //圆角层实现代码
    var size = cc.winSize;
    var stencil = new cc.DrawNode();
    stencil.drawRect(cc.p((size.width-clipWidth)/2+offsetX,(size.height-clipHeight)/2+offsetY+radius),cc.p(size.width/2+clipWidth/2+offsetX,size.height/2+clipHeight/2+offsetY-radius),cc.color(0,0,0),1,cc.color(0,0,0));
    stencil.drawRect(cc.p((size.width-clipWidth)/2+offsetX+radius,(size.height-clipHeight)/2+offsetY),cc.p(size.width/2+clipWidth/2+offsetX-radius,size.height/2+clipHeight/2+offsetY),cc.color(0,0,0),1,cc.color(0,0,0));
    stencil.drawCircle(cc.p(size.width/2-clipWidth/2+offsetX+radius,size.height/2-clipHeight/2+offsetY+radius),radius/3,0,100,false,radius,cc.color(0,0,0));
    stencil.drawCircle(cc.p(size.width/2+clipWidth/2+offsetX-radius,size.height/2-clipHeight/2+offsetY+radius),radius/3,0,100,false,radius,cc.color(0,0,0));
    stencil.drawCircle(cc.p(size.width/2+clipWidth/2+offsetX-radius,size.height/2+clipHeight/2+offsetY-radius),radius/3,0,100,false,radius,cc.color(0,0,0));
    stencil.drawCircle(cc.p(size.width/2-clipWidth/2+offsetX+radius,size.height/2+clipHeight/2+offsetY-radius),radius/3,0,100,false,radius,cc.color(0,0,0));
    var clippingPanel = new cc.ClippingNode();
    clippingPanel.stencil = stencil;
    //层颜色
    var layer = new cc.LayerColor(cc.color(255,0,0),clipWidth,clipHeight);
    layer.x = (size.width-clipWidth)/2+offsetX;
    layer.y = (size.height-clipHeight)/2+offsetY;
    //层透明度
    layer.opacity = 200;
    clippingPanel.addChild(layer);
    this.addChild(clippingPanel);

这段代码可以直接拷贝,放入刚创建的游戏app.js中以演示.

#2

可以设定的参数就是
1.以屏幕中心位置X,Y轴坐标偏移
2.图层尺寸width,height
3.圆角半径radius
4.图层颜色
5.透明度

#3

我贡献一个修改至网上的一段代码吧。

请加代码加入到 DrawNode.cpp 再加入相应的.h 和auo绑定文件。js就可以使用了。这个是绘制圆角矩形的方法。

void DrawNode::drawRoundRect(const Vec2 &origin, const Vec2 &destination, float radius, unsigned int segments, bool bFill, const Color4F &color )
{
//算出1/4圆

const float coef    = 0.5f * (float)M_PI / segments;
Point * vertices    = new Point;
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;
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;
    ++aa;
}
//右上角
tagCenter.x        = maxX - radius;
tagCenter.y        = maxY - radius;
thisVertices    = vertices + segments;
for(unsigned int i = 0; i <= segments; ++i, ++thisPolygonPt, --thisVertices)
{
    thisPolygonPt->x    = tagCenter.x + thisVertices->x;
    thisPolygonPt->y    = tagCenter.y + thisVertices->y;
    ++aa;
}
//右下角
tagCenter.x        = maxX - radius;
tagCenter.y        = minY + 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;
    ++aa;
}
//左下角
tagCenter.x        = minX + radius;
tagCenter.y        = minY + radius;
thisVertices    = vertices + segments;
for(unsigned int i = 0; i <= segments; ++i, ++thisPolygonPt, --thisVertices)
{
    thisPolygonPt->x    = tagCenter.x - thisVertices->x;
    thisPolygonPt->y    = tagCenter.y - thisVertices->y;
    ++aa;
}

if(bFill){
    this->drawSolidPoly(pPolygonPtArr, dwPolygonPtMax, color);
}else
{
    this->drawPoly(pPolygonPtArr, dwPolygonPtMax, true,color);
}

CC_SAFE_DELETE_ARRAY(vertices);
CC_SAFE_DELETE_ARRAY(pPolygonPtArr);

}

jsb_cocos2dx_auto.cpp:

bool js_cocos2dx_DrawNode_drawRoundRect(JSContext *cx, uint32_t argc, jsval *vp)
{
JS::CallArgs args = JS::CallArgsFromVp(argc, vp);
bool ok = true;

JS::RootedObject obj(cx);
cocos2d::DrawNode* cobj = NULL;
obj = args.thisv().toObjectOrNull();
js_proxy_t *proxy = jsb_get_js_proxy(obj);
cobj = (cocos2d::DrawNode *)(proxy ? proxy->ptr : NULL);
JSB_PRECONDITION2( cobj, cx, false, "js_cocos2dx_DrawNode_drawRect : Invalid Native Object");



do {
    
    cocos2d::Vec2 arg0;
    ok &= jsval_to_vector2(cx, args.get(0), &arg0);
    if (!ok) { ok = true;  }
    
    cocos2d::Vec2 arg1;
    ok &= jsval_to_vector2(cx, args.get(1), &arg1);
    if (!ok) { ok = true; break; }
    
    double arg2;
    ok &= JS::ToNumber(cx, args.get(2), &arg2);
    if (!ok) { ok = true; break; }
    
    unsigned int  arg3;
    ok &= jsval_to_uint(cx, args.get(3), &arg3);
    if (!ok) { ok = true; break; }
    
    
    bool arg4 ;
    arg4= JS::ToBoolean(args.get(4));
    if (!ok) { ok = true; break; }
    
    cocos2d::Color4F arg5;
    ok &= jsval_to_cccolor4f(cx, args.get(5), &arg5);
    if (!ok) { ok = true; break; }
    
    
    cobj->drawRoundRect(arg0, arg1, arg2, arg3, arg4,arg5);
    args.rval().setUndefined();
    
    return true;
    
}while(0);
JS_ReportError(cx, "js_cocos2dx_DrawNode_drawRoundRect : wrong number of arguments");
return false;

}

然后在注册一下 就可以用了 支持3.x上