cocos2d-x JS 純代碼實現人物頭像裁剪

有時候為了方便會直接用顏色層和過渡層來顯示一些信息,但層只有方角沒有圓角不太美觀,於是我用剪切節點實現了一個圓角層.方便以后使用.

 

當然，如果使用Cosos Studio 操作會更好一些，省去了坐標裁剪計算等問題，可以一步到位

        //圖層定位,以屏幕中心偏移
        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中以演示.

描述:界面示例
圖片:layer.png